Lesson 13

HTML Forms

0

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:

Result:

The Form element

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:

  • action contains an address that defines where the form information will be sent

  • method can 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.

Text inputs

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

Placeholders

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.

Labels

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

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

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

Radio buttons

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:

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.

Dropdown menus

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.


HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0

Comments

icon

Be the first to comment!