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 item. To create a group of checkboxes related value="bacon">Bacon <br>
<input type="checkbox" name="breakfast"
to the same topic, they should all use the same name
attribute. Since it’s a checkbox, multiple checkboxes can value="eggs">Eggs 🍳<br>
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-
box for multi-line input (e.g. a comment section). The <textarea rows="10" cols="30"
element supports the rows and cols attributes name="comment"></textarea>
which 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 action="http://server1">
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 elds allow the user to enter only numbers and a <input type="number" name="balance" />
few 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
<input type="text" name="fname"
id="fname"><br>
type attribute that determines how it gets rendered to
a page.
The example code block will create a text input eld and <input type="checkbox" name="vehicle"
a checkbox input eld on a webpage. value="Bike"> I own a bike

<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
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>
<option value="family">Family
default, only one <option> can be selected at a 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-
</select>
value pair when the form is submitted.

/
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 </form>
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.

<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 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> <input list="ide">
with a <datalist> . To pair a <input> with a
<datalist id="ide">
<datalist> the <input> ’s list value must
<option value="Visual Studio Code" />
match the value of the id of the <datalist> . The
<option value="Atom" />
datalist element is used to store a list of
<option value="Sublime Text" />
<option> s. </datalist>
The list of data is shown as a dropdown on an input
eld when a user clicks on the input eld. As the user
starts 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
<input name="delivery_option" type="radio"
type="radio" attribute that renders a single radio
button. Multiple radio buttons of a related topic are given value="pickup" />
<input name="delivery_option" type="radio"
the same name attribute value. Only a single option can
be chosen from a 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.

/
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 <input id="address" />
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 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
<label for="password ">Password:</label>
for a speci c <input> based on matching values of
<input type="text" id="password"
the <input> ‘s id attribute and the <label> ‘s
name="password">
for attribute. By default, clicking on the <label>
will focus 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
<input type="text" name="username" />
type="password" that renders a single row input
eld which allows the user to type censored text inside <input type="password" name="password" />
the 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.

required Attribute
In HTML, input elds have an attribute called
required which speci es that the eld must include <input type="password" name="password"
a value. required >
The example code block shows an input eld 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 speci es the maximum value for the
input eld.
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
<input type="text" name="tweet"
called maxlength that speci es the maximum
number of characters that can be entered into the eld. maxlength="140">
The code 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) <form action="/action_page.php">
the value 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 <input type="text" name="username"
the input text has a minimum length, add the minlength="6" />
minlength 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.

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