11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

Cheatsheets / Learn HTML

Forms

<input> : Checkbox Type

When using an HTML input element, the <input type="checkbox" name="breakfast"

type="checkbox" attribute will render a single checkbox
value="bacon">Bacon 🥓<br>
item. To create a group of checkboxes related to the
same topic, they should all use the same name <input type="checkbox" name="breakfast"
attribute. Since it’s a checkbox, multiple checkboxes value="eggs">Eggs 🍳<br>
can be 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- <textarea rows="10" cols="30"
box for multi-line input (e.g. a comment section). The
name="comment"></textarea>
element supports the rows and cols attributes which
determine the height and width, respectively, of the
element.
When rendered by the browser, textarea fields 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" .

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 1/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

<form> Element

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

<input> : Number Type

HTML input elements can be of type number . These <input type="number" name="balance" />
input fields allow the user to enter only numbers and a
few special characters inside the field.
The example code block shows an input with a type of
number and a name of balance . When the input field 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 <label for="fname">First name:</label>
of input fields on a webpage including text fields,
<input type="text" name="fname"
checkboxes, buttons, etc. <input> element have a
type attribute that determines how it gets rendered to id="fname"><br>
a page.
The example code block will create a text input field <input type="checkbox" name="vehicle"
and a checkbox input field on a webpage.
value="Bike"> I own a bike

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 2/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

<input> : Range Type

A slider can be created by using the type="range" <input type="range" name="movie-rating"

attribute on an HTML input element. The range slider
min="0" max="10" step="0.1">
will act as a selector between a minimum and a
maximum value. These values are set using the min
and max attributes respectively. The slider can be
adjusted to move in different 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 <select name="rental-option">

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

Submitting a Form

Once we have collected information in a form we can <form action="/index3.html" method="PUT">

send that information somewhere else by using the
</form>
action and method attribute. The action attribute
tells 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.

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 3/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

<input> : Text Type

HTML <input> elements can support text input by <input type="text" name="username">
setting the attribute type="text" . This renders a single
row input field 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 <input list="ide">

search/autocomplete functionality can be achieved by
pairing an <input> with a <datalist> . To pair a
<input> with a <datalist> the <input> ’s list value <datalist id="ide">
must match the value of the id of the <datalist> . <option value="Visual Studio Code" />
The datalist element is used to store a list of <option value="Atom" />
<option> s.
<option value="Sublime Text" />
The list of data is shown as a dropdown on an input
field when a user clicks on the input field. As the user </datalist>
starts typing, the list will be updated to show elements
that best match what has been typed into the input
field. The actual list items are specified as multiple
option elements nested inside the datalist .
datalist s are ideal when providing users a list of pre-
defined 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" <input name="delivery_option"

attribute that renders a single radio button. Multiple
type="radio" value="pickup" />
radio buttons of a related topic are given the same
name attribute value. Only a single option can be <input name="delivery_option"
chosen from a group of radio buttons. type="radio" 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.

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 4/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

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 <input name="username" id="username" />
put it into key-value pairs. This is achieved by setting
<input id="address" />
the name attribute of the input element. The name
will 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 specified.
In the code example, the first input will be submitted by
the form, but the second one will not.

<label> Element

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

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 5/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

<input> Password Type

The HTML <input> element can have the attribute <input type="text" name="username" />
type="password" that renders a single row input field
<input type="password" name="password" />
which allows the user to type censored text inside the
field. 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 fields for a
basic login form - the username and password fields.

required Attribute

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

max Attribute

HTML <input> s of type number have an attribute <input type="number" max="20">

called max that specifies the maximum value for the
input field.
The code block shows an input number field that is
set to have a maximum value of 20 . Any value larger
than 20 will mark the input field as having an error.

maxlength Attribute

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

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 6/7
11/16/23, 3:26 PM Learn HTML: Forms Cheatsheet | Codecademy

pattern Attribute

In a text input element, the pattern attribute uses a <form action="/action_page.php">

regular expression to match against (or validate) the
Country code:
value of the <input> , when the form is submitted.
<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 field of type text has an attribute <input type="text" name="username"
that supports minimum length validation. To check that
minlength="6" />
the input text has a minimum length, add the
minlength attribute with the character count.
The example code block shows an example of a text
field that has a minimum length of 6 .

HTML Form Validators

HTML forms allow you to specify different kinds of

validation for your input fields to make sure that data is
entered correctly before being submitted. HTML
supports a number of different validators, including
things like minimum value, minimum/maximum length,
etc. The validators are specified as attributes on the
input field.

min Attribute

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

Print Share

https://www.codecademy.com/learn/learn-html/modules/learn-html-forms/cheatsheet 7/7