Forms

Key Concepts

Review core concepts you need to learn to master this subject

<form> Element

<input> Element

<label> Element

<input>: Text Type

<input> Password Type

<input>: Number Type

<input>: Range Type

<input>: Checkbox Type

`<form>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The HTML <form> element is used to collect and send information to an external source.

<form> can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form.

`<input>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The HTML <input> element is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc. <input> element have a type attribute that determines how it gets rendered to a page.

The example code block will create a text input field and a checkbox input field on a webpage.

`<label>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The HTML <label> element provides identification for a specific <input> based on matching values of the <input>‘s id attribute and the <label>‘s for attribute. By default, clicking on the <label> will focus 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>.

`<input>`: Text Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

HTML <input> elements can support text input by 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.

`<input>` Password Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The HTML <input> element can have the attribute type="password" that renders a single row input field 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.

`<input>`: Number Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

HTML input elements can be of type number. These 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>`: Range Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

A slider can be created by using the type="range" attribute on an HTML input element. The range slider 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.

`<input>`: Checkbox Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

When using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.

`<input>`: Radio Button Type

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

HTML <input> elements can be given a type="radio" attribute that renders a single radio button. Multiple radio buttons of a related topic are given the same name attribute value. Only a single option can be chosen from a group of radio buttons.

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.

`<select>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time.

The value of the selected <select>’s name and the <option>’ s value attribute are sent as a key-value pair when the form is submitted.

`<datalist>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

When using an HTML input, a basic 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 must match the value of the id of the <datalist>. The datalist element is used to store a list of <option>s.

The list of data is shown as a dropdown on an input field when a user clicks on the input field. As the user 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.

datalists are ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well.

`<textarea>` Element

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The 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".

HTML submittable input

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

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

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

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

HTML form validators

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

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.

`required` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

In HTML, input fields have an attribute called required which specifies that the field must include a value.

The example code block shows an input field that is required. The attribute can be written as required="true" or simply required.

`min` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

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

`max` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

HTML <input>s of type number have an attribute 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.

`minlength` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

In HTML, an input field of type text has an attribute that supports minimum length validation. To check that 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.

`maxlength` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

In HTML, input fields with type text have an attribute called maxlength that specifies the maximum number 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.

`pattern` Attribute

<form method="post" action="http://server1">
  Enter your name:
  <input type="text" name="fname">
  <br/>
  Enter your age:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="Submit">
</form>

In a text input element, the pattern attribute uses a regular expression to match against (or validate) the value of the <input>, when the form is submitted.

Learn HTML: Forms

Lesson 1 of 2

1
Forms are a part of everyday life. When we use a physical form in real life, we write down information and give it to someone to process. Think of the times you’ve had to fill out information for v…
2
We can think of the internet as a network of computers which send and receive information. Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving comp…
3
If we want to create an input field in our , we’ll need the help of the element. The element has a type attribute which determines how it renders on the web page and what kind of data it can…
4
In the previous exercise we created an element but we didn’t include anything to explain what the is used for. For a user to properly identify an we use the appropriately named element. T…
5
Think about all those times we have to put sensitive information, like a password or PIN, into a . We wouldn’t want our information to be seen by anyone peeking over our shoulder! Luckily, we hav…
6
We’ve now gone over two type attributes for related to text. But, we might want our users to type in a number — in which case we can set the type attribute to… (you guessed it)… “number”!…
7
Using an is great if we want to allow users to type in any number of their choosing. But, if we wanted to limit what numbers our users could type we might consider using a different type value. …
8
So far the types of inputs we’ve allowed were all single choices. But, what if we presented multiple options to users and allow them to select any number of options? Sounds like we could use checkb…
9
Checkboxes work well if we want to present users with multiple options and let them choose one or more of the options. However, there are cases where we want to present multiple options and only al…
10
Radio buttons are great if we want our users to pick one option out of a few visible options, but imagine if we have a whole list of options! This situation could quickly lead to a lot of radio but…
11
Even if we have an organized dropdown list, if the list has a lot of options, it could be tedious for users to scroll through the entire list to locate one option. That’s where using the element …
12
An element with type=”text” creates a single row input field for users to type in information. However, there are cases where users need to write in more information, like a blog post. In such ca…
13
Remember, the purpose of a form is to collect information that will be submitted. That’s the role of the submit button — users click on it when they are finished with filling out information …
14
Nice work interacting with the extremely common and useful element! In this lesson we went over: The purpose of a is to allow users to input information and send it. The ‘s action attri…

1
Ever wonder how a login page actually works? Or why the combination of a username and password grants you access to a website? The answers lies in validation. Validation is the concept of checkin…
2
Sometimes we have fields in our s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an element. …
3
Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g. and . To set a minimum acceptable value, we use the min attribute and assign a value. On t…
4
In the previous exercise, we were able to use min and max to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn’t wan…
5
In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the pattern …
6
Awesome job adding client-side validation to s! Let’s quickly recap: Client-side validations happen in the browser before information is sent to a server. Adding the required attribute to …

What you'll create

Portfolio projects that showcase your new skills

Form a Story
Use your knowledge of HTML forms to collect input users and put a spin on a classical story!

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

HTML Forms
What is a benefit of using the <label> element?

Key Concepts

`<form>` Element

`<input>` Element

`<label>` Element

`<input>`: Text Type

`<input>` Password Type

`<input>`: Number Type

`<input>`: Range Type

`<input>`: Checkbox Type

`<input>`: Radio Button Type

`<select>` Element

`<datalist>` Element

`<textarea>` Element

HTML submittable input

`<input>` `name` Attribute

HTML form validators

`required` Attribute

`min` Attribute

`max` Attribute

`minlength` Attribute

`maxlength` Attribute

`pattern` Attribute

What you'll create

Form a Story

How you'll master it

HTML Forms

Forms

By Subject

By Language

<form> Element

<input> Element

<label> Element

<input>: Text Type

<input> Password Type

<input>: Number Type

<input>: Range Type

<input>: Checkbox Type

<input>: Radio Button Type

<select> Element

<datalist> Element

<textarea> Element

HTML submittable input

<input> name Attribute

HTML form validators

required Attribute

min Attribute

max Attribute

minlength Attribute

maxlength Attribute

pattern Attribute

Form a Story

HTML Forms

`<form>` Element

`<input>` Element

`<label>` Element

`<input>`: Text Type

`<input>` Password Type

`<input>`: Number Type

`<input>`: Range Type

`<input>`: Checkbox Type

`<input>`: Radio Button Type

`<select>` Element

`<datalist>` Element

`<textarea>` Element

`<input>` `name` Attribute

`required` Attribute

`min` Attribute

`max` Attribute

`minlength` Attribute

`maxlength` Attribute

`pattern` Attribute