| layout | post |
|---|---|
| title | HTML <strong>Forms</strong> |
| subtitle | To make a page <strong>interactive</strong> |
| section | html |
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
- checkboxes
- dropdowns
- 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 type attribute:
{% highlight html %}
{% endhighlight %}The <form> is a block-level element thats defines an interactive part of a webpage. As a result, all form controls (like <input>, <textarea> or <button>) must appear within a <form> element.
Two HTML attributes are required:
actioncontains an address that defines where the form information will be sentmethodcan 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
<input type="email"> - a password input
<input type="password"> - a submit button
<input type="submit">
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 <form> element.
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:
| Text | <input type="text"> |
Allows any type of character | |
|---|---|---|---|
<input type="email"> |
Might display a warning if an invalid email is entered | ||
| Password | <input type="password"> |
Shows dots as characters | |
| Number | <input type="number"> |
Up/Down keyboard keys can be used | |
| Telephone | <input type="tel"> |
Can trigger an autofill | |
| Multiple line text | <textarea></textarea> |
<textarea></textarea> | 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.
{% highlight html %} {% endhighlight %}
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.
{% highlight html %} Email {% endhighlight %}
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 id.
{% highlight html %} First name {% endhighlight %}
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.
{% highlight html %} Remember me {% endhighlight %}
Because it can be hard to click on a small checkbox, it is recommended to wrap a <label> around the checkbox and its description.
{% highlight html %} I agree to the terms {% endhighlight %}
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 checked attribute.
{% highlight html %} Use as my billing address {% endhighlight %}
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 name attribute:
{% highlight html %} Marital status Single Married Divorced Widowed {% endhighlight %}
Single
Married
Divorced
Widowed
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.
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.
{% highlight html %} January February March April May June July August September October November December {% endhighlight %}
If you add the multiple attribute, you can provide the ability to select multiple choices.
{% highlight html %} Which browsers do you have? Google Chrome Internet Explorer Mozilla Firefox Opera Safari {% endhighlight %}
Google Chrome Internet Explorer Mozilla Firefox Opera Safari
Select multiple options by maintaining Ctrl (or ⌘) and clicking. This can be a good alternative to using multiple checkboxes in a row.
{% highlight html %}
Title Mr Mrs Miss
First name
Last name
Phone number
Password
Confirm your password
Country Canada France Germany Italy Japan Russia United Kingdom United States
I agree to the terms and conditions
Sign up
{% endhighlight %}Title Mr Mrs Miss
First name
Last name
Phone number
Password
Confirm your password
Country Canada France Germany Italy Japan Russia United Kingdom United States
I agree to the terms and conditions
Sign up
There are other form controls available, but we've covered the ones who'll mostly use.
It's time to start styling our page.