Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

Cheatsheets / Learn HTML

Forms
<input>: Checkbox Type
When using an HTML input element, the
type="checkbox" attribute will render a single checkbox <input type="checkbox" name="breakfast"
item. To create a group of checkboxes related to the value="bacon">Bacon �<br>
same topic, they should all use the same name attribute. <input type="checkbox" name="breakfast"
Since it’s a checkbox, multiple checkboxes can be value="eggs">Eggs �<br>
selected for the same topic.
<input type="checkbox" name="breakfast"
value="pancakes">Pancakes �<br>

<textarea> Element
The textarea element is used when creating a text-box
for multi-line input (e.g. a comment section). The element <textarea rows="10" cols="30"
supports the rows and cols attributes which name="comment"></textarea>
determine the height and width, respectively, of the
element.
When rendered by the browser, textarea �elds can be
stretched/shrunk in size by the user, but the rows and
cols attributes determine the initial size.
Unlike the input element, the <textarea> element has
both opening and closing tags. The value of the element
is the content in between these tags (much like a <p>
element). The code block shows a <textarea> of size
10x30 and with a name of "comment" .

<form> Element
The HTML <form> element is used to collect and send
information to an external source. <form method="post"
<form> can contain various input elements. When a user action="http://server1">
submits the form, information in these input elements is Enter your name:
passed to the source which is named in the action <input type="text" name="fname">
attribute of the form.
<br/>
Enter your age:
<input type="text" name="age">
<br/>
<input type="submit" value="Submit">
</form>

1 of 6 13-Jan-22, 12:43 PM
Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

<input>: Number Type

HTML input elements can be of type number . These input
�elds allow the user to enter only numbers and a few <input type="number" name="balance" />
special characters inside the �eld.
The example code block shows an input with a type of
number and a name of balance . When the input �eld is a
part of a form, the form will receive a key-value pair with
the format: name: value after form submission.

<input> Element
The HTML <input> element is used to render a variety of
input �elds on a webpage including text �elds, <label for="fname">First name:</label>
checkboxes, buttons, etc. <input> element have a type <input type="text" name="fname"
attribute that determines how it gets rendered to a page. id="fname"><br>
The example code block will create a text input �eld and
a checkbox input �eld on a webpage.
<input type="checkbox" name="vehicle"
value="Bike"> I own a bike

<input>: Range Type

A slider can be created by using the type="range"
attribute on an HTML input element. The range slider <input type="range" name="movie-rating"
will act as a selector between a minimum and a maximum min="0" max="10" step="0.1">
value. These values are set using the min and max
attributes respectively. The slider can be adjusted to
move in di�erent steps or increments using the step
attribute.
The range slider is meant to act more as a visual widget to
adjust between 2 values, where the relative position is
important, but the precise value is not as important. An
example of this can be adjusting the volume level of an
application.

<select> Element
The HTML <select> element can be used to create a
dropdown list. A list of choices for the dropdown list can <select name="rental-option">
be created using one or more <option> elements. By <option value="small">Small</option>
default, only one <option> can be selected at a time. <option value="family">Family
The value of the selected <select> ’s name and the Sedan</option>
<option> ’ s value attribute are sent as a key-value pair
<option value="lux">Luxury</option>
when the form is submitted.
</select>

2 of 6 13-Jan-22, 12:43 PM
Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

Submitting a Form
Once we have collected information in a form we can
send that information somewhere else by using the <form action="/index3.html" method="PUT">
action and method attribute. The action attribute tells </form>
the form to send the information. A URL is assigned that
determines the recipient of the information. The method
attribute tells the form what to do with that information
once it’s sent. An HTTP verb is assigned to the method
attribute that determines the action to be performed.

<input>: Text Type

HTML <input> elements can support text input by
setting the attribute type="text" . This renders a single <input type="text" name="username">
row input �eld that users can type text inside.
The value of the <input> ‘s name and value attribute of
the element are sent as a key-value pair when the form is
submitted.

<datalist> Element
When using an HTML input, a basic search/autocomplete
functionality can be achieved by pairing an <input> with <input list="ide">
a <datalist> . To pair a <input> with a <datalist> the
<input> ’s list value must match the value of the id <datalist id="ide">
of the <datalist> . The datalist element is used to <option value="Visual Studio Code" />
store a list of <option> s.
<option value="Atom" />
The list of data is shown as a dropdown on an input �eld
<option value="Sublime Text" />
when a user clicks on the input �eld. As the user starts
</datalist>
typing, the list will be updated to show elements that best
match what has been typed into the input �eld. The
actual list items are speci�ed as multiple option
elements nested inside the datalist .
datalist s are ideal when providing users a list of pre-
de�ned options, but to also allow them to write
alternative inputs as well.

<input>: Radio Button Type

HTML <input> elements can be given a type="radio"
attribute that renders a single radio button. Multiple radio <input name="delivery_option" type="radio"
buttons of a related topic are given the same name value="pickup" />
attribute value. Only a single option can be chosen from a <input name="delivery_option" type="radio"
group of radio buttons. value="delivery" />
The value of the selected/checked <input> ’s name and
value attribute of this element are sent as a key-value
pair when the form is submitted.

3 of 6 13-Jan-22, 12:43 PM
Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

Submittable Input
HTML <input> elements can have a type attribute set to
submit, by adding type="submit" . With this attribute
included, a submit button will be rendered and, by
default, will submit the <form> and execute its action.
The text of a submit button is set to Submit by default
but can also be changed by modifying the value
attribute.

<input> name Attribute

In order for a form to send data, it needs to be able to put
it into key-value pairs. This is achieved by setting the <input name="username" id="username" />
name attribute of the input element. The name will <input id="address" />
become the key and the value of the input will
become the value the form submits corresponding to
the key.
It’s important to remember that the name is not the same
as the ID in terms of form submission. The ID and the
name of the input may be the same, but the value will
only be submitted if the name attribute is speci�ed.
In the code example, the �rst input will be submitted by
the form, but the second one will not.

<label> Element
The HTML <label> element provides identi�cation for a
speci�c <input> based on matching values of the <label for="password ">Password:</label>
<input> ‘s id attribute and the <label> ‘s for <input type="text" id="password"
attribute. By default, clicking on the <label> will focus name="password">
the �eld of the related <input> .
The example code will create a text input �eld with the
label text “Password: “ next to it. Clicking on “Password: “
on the page will focus the �eld for the related <input> .

<input> Password Type

The HTML <input> element can have the attribute
type="password" that renders a single row input �eld <input type="text" name="username" />
which allows the user to type censored text inside the <input type="password" name="password" />
�eld. It is used to type in sensitive information.
The value of this <input> ’s name and value (actual
value and not the censored version) attribute of this
element are sent as a key-value pair when the form is
submitted.
The code block shows an example of the �elds for a basic
login form - the username and password �elds.

4 of 6 13-Jan-22, 12:43 PM
Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

required Attribute
In HTML, input �elds have an attribute called required
which speci�es that the �eld must include a value. <input type="password" name="password"
The example code block shows an input �eld that is required >
required. The attribute can be written as
required="true" or simply required .

max Attribute
HTML <input> s of type number have an attribute called
max that speci�es the maximum value for the input �eld. <input type="number" max="20">
The code block shows an input number �eld that is set
to have a maximum value of 20 . Any value larger than
20 will mark the input �eld as having an error.

maxlength Attribute
In HTML, input �elds with type text have an attribute
called maxlength that speci�es the maximum number of <input type="text" name="tweet"
characters that can be entered into the �eld. The code maxlength="140">
block shows an input text �eld that accepts text that has a
maximum length of 140 characters.

pattern Attribute
In a text input element, the pattern attribute uses a
regular expression to match against (or validate) the value <form action="/action_page.php">
of the <input> , when the form is submitted. Country code:
<input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country
code">
<input type="submit">
</form>

minlength Attribute
In HTML, an input �eld of type text has an attribute that
supports minimum length validation. To check that the <input type="text" name="username"
input text has a minimum length, add the minlength minlength="6" />
attribute with the character count.
The example code block shows an example of a text �eld
that has a minimum length of 6 .

HTML Form Validators

HTML forms allow you to specify di�erent kinds of
validation for your input �elds to make sure that data is
entered correctly before being submitted. HTML supports
a number of di�erent validators, including things like
minimum value, minimum/maximum length, etc. The
validators are speci�ed as attributes on the input �eld.

5 of 6 13-Jan-22, 12:43 PM
Firefox Developer Edition https://www.codecademy.com/learn/learn-html/modules/learn-html-form...

min Attribute
In HTML, input �elds with type number have an attribute
called min that speci�es the minimum value that can be <input type="number" name="rating" min="1"
entered into the �eld. The code block provided shows an max="10">
input number �eld that accepts a number with minimum
value 1.

6 of 6 13-Jan-22, 12:43 PM