While navigating the Web, a user’s interaction is mostly only to click on links in order to navigate through webpages.
But the Web understands that a user is sometimes required to provide his own input. These types of interaction include:
- signing up and logging in to websites
- entering personal information (name, address, credit card details…)
- filtering content (by using dropdowns, checkboxes…)
- performing a search
- uploading files
To accomodate for these needs, HTML provides interactive form controls:
- text inputs (for one or multiple lines)
- radio buttons
- upload widgets
- submit buttons
These controls use different HTML tags, but most of them use the
<input> tag. Because it is a self-closing element, the type of input is defined by its
The Form element
<form> is a block-level element thats defines an interactive part of a webpage. As a result, all form controls (like
<button>) must appear within a
Two HTML attributes are required:
actioncontains an address that defines where the form information will be sent
methodcan be either GET or POST and defines how the form information will be sent
Usually, the form information is sent to a server. How this data will then be processed goes beyond the scope of this tutorial.
Think of a form as a collection of input controls that work together to perform a single operation. If you wrote a login form, you could have 3 controls:
- a email input
- a password input
- a submit button
These 3 HTML elements would be enclosed within a single
<form action="/login" method="POST">.
You could similarly add a signup form within the same HTML page, in a separate
Almost all forms require textual input from users, in order for them to enter their name, email, password, address… Text form controls come in different variations:
||Allows any type of character|
||Might display a warning if an invalid email is entered|
||Shows dots as characters|
||Up/Down keyboard keys can be used|
||Can trigger an autofill|
|Multiple line text||
||Can be resized|
Although these inputs look very similar and allow users to enter any kind of text (even wrong input), their type provides specific semantics to the input, by defining what kind of information it is supposed to contain.
Browsers can subsequently slightly alter a control’s interface to increase its interactivity or hint at what kind of content is expected.
For example, password inputs show dots instead of characters.
And number inputs allow their value to be increased/decreased using up and down keys.
Text inputs can display a placeholder text, that will disappear as soon as some text is entered.
If you start typing something, you’ll see the text “Enter your name” disappear.
Because form elements on their own are not very descriptive, they are usually preceded by a text label.
While placeholders already provide some hint at what content is expected, labels have the advantage of remaining visible at all times, and can be used alongside other types of form controls, like checkboxes or radio buttons.
Although you could use short paragraphs to describe form elements, using
<label> is semantically more valid because they only exist within forms, and can be paired with a specific form control by using the
for attribute and matching its value with the input’s
Clicking on the label will focus the text input and place the text cursor inside. While this pairing seems useless, it will come in handy with checkboxes and radio buttons.
Checkboxes are form controls that only have 2 states: checked or unchecked. They basically allow the user to say “Yes” or “No” to something.
Because it can be hard to click on a small checkbox, it is recommended to wrap a
<label> around the checkbox and its description.
You can click on “I agree to the terms” to toggle the checkbox.
By default, a checkbox input is unchecked. You can mark it as checked by using the simply called
You can present the user a list of options to choose from by using radio buttons.
For this form control to work, your HTML code needs to group a list of radio buttons together. This is achieved by using the same value for the
Because all radio buttons use the same value for their
name attribute (in this case the value
"status"), selecting one option will unselect all other ones. Radio buttons are said to be mutually exclusive.
Difference between radio buttons and checkboxes
While a checkbox exists on its own, radio buttons can only appear as a list (which means having at least 2 options).
Also, clicking a checkbox is optional while choosing one of the radio buttons is mandatory. That’s why it is impossible to uncheck a radio button unless choosing a sibling option. But in the end, one of the radio buttons is always selected.
If the number of options to choose from takes up too much space, you can use
<select> dropdown menus.
They work like radio buttons. Only their layout is different.
Multiple choice dropdown menus
If you add the
multiple attribute, you can provide the ability to select multiple choices.
Select multiple options by maintaining Ctrl (or ⌘) and clicking. This can be a good alternative to using multiple checkboxes in a row.
Example: a complete signup form
There are other form controls available, but we’ve covered the ones who’ll mostly use.
It’s time to start styling our page.