Cheatsheets / Learn HTML

Forms
<input>: Checkbox Type
When using an HTML input element, the type="checkbox"

🥓
attribute will render a single checkbox item. To create a <input type="checkbox" name="breakfast"
group of checkboxes related to the same topic, they value="bacon">Bacon <br>
should all use the same name attribute. Since it’s a

🍳
<input type="checkbox" name="breakfast"
checkbox, multiple checkboxes can be selected for the value="eggs">Eggs <br>
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" name="comment">
supports the rows and cols attributes which determine </textarea>
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" .

<form> Element
The HTML <form> element is used to collect and send
information to an external source. <form method="post" action="http://server1">

<form> can contain various input elements. When a user   Enter your name:
submits the form, information in these input elements is

  <input type="text" name="fname">

passed to the source which is named in the action

  <br/>
attribute of the form.

  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
fields allow the user to enter only numbers and a few <input type="number" name="balance" />
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 of
input fields on a webpage including text fields, <label for="fname">First name:</label>

checkboxes, buttons, etc. <input> element have a type <input type="text" name="fname" id="fname">
attribute that determines how it gets rendered to a page. <br>
The example code block will create a text input field and

a checkbox input field 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 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
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 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 pair

</select>
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 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 row input <input type="text" name="username">
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 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 of

<datalist id="ide">
the <datalist> . The datalist element is used to store a

  <option value="Visual Studio Code" />

list of <option> s.

  <option value="Atom" />

The list of data is shown as a dropdown on an input field

  <option value="Sublime Text" />

when a user clicks on the input field. As the user starts

</datalist>
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"
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.
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 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 a
specific <input> based on matching values of the <label for="password ">Password:</label>

<input> ‘s id attribute and the <label> ‘s for attribute. <input type="text" id="password"
By default, clicking on the <label> will focus the field of name="password">
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> .

<input> Password Type

The HTML <input> element can have the attribute
type="password" that renders a single row input field which <input type="text" name="username" />

allows the user to type censored text inside the field. It is <input type="password" name="password" />
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
which specifies that the field must include a value. <input type="password" name="password"
The example code block shows an input field 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 specifies the maximum value for the input field. <input type="number" max="20">
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
called maxlength that specifies the maximum number of <input type="text" name="tweet"
characters that can be entered into the field. The code maxlength="140">
block shows an input text field 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 field 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 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 attribute
called min that specifies the minimum value that can be <input type="number" name="rating" min="1"
entered into the field. The code block provided shows an max="10">
input number field that accepts a number with minimum

value 1.