HTML Forms

The HTML <form> element defines a document section containing interactive controls for submitting information — the form itself. It's a container element inside which we place all other elements: inputs, checkboxes, radio-buttons, submit buttons, etc. These elements are called "controls."

Users interact with the form by modifying its controls — entering text, selecting items, and submitting the information to a server for processing.

The <input> element is the most commonly used element within HTML forms. Changing the type attribute allows you to specify the type of input field you want to use. Yep, that's right — most types of controls are input elements with different attributes.

The <input> element is one of the most powerful and complex in HTML because of the number of combinations of input types and attributes. The most common of them are text fields, password fields, checkboxes, radio buttons, submit buttons, reset buttons, file select boxes, and several new input types introduced in HTML5.^[1]

The attribute of an input defines its type. To add a single-line text field, add the attribute type with the value "text" to the <input> start tag.

Use text fields when you want users to enter short textual information like a name or address. For more specific types of data like dates, URLs, emails, or search terms, you've got better options available.^[2]

Sometimes we need users to enter a larger text — for example, when asking for comments or reviews. <input type="text"> isn't a good choice as it automatically removes line breaks — also, it's not possible to see a long text at once. In these cases, use the <textarea> element to allow users to enter more than one line of text.

Use the <input type="radio"> to add radio buttons. They are great when you need users to select exactly one option from a pre-defined list, for example, the type of delivery or payment option. Radio buttons usually come in groups of related options, each button rendered as a small circle. The circles are filled or highlighted when selected.

The type="checkbox" attribute of the <input> tag introduces checkboxes. This type of control allows users to select one or multiple options from a pre-defined set of options, unlike radio buttons that only select one option. For example, a food delivery website can let customers build their own pizza. In that case, checkboxes are the best option for letting users choose the ingredients they want to put inside.

To create a selection menu, use the <select> element. It's a dropdown element that allows users to pick a single option from a list, similar to radio buttons. Selectors are a better choice when the list of options is large. For example, a classic use case is country selection as there are at least 195 countries in the world, and that's not counting disputed territories. To define each menu option, use the <option> element inside the <select> tag.

There are several ways of letting users submit their information to the server. One way is to add the <input> element with the attribute type="submit". Browsers render this element as a button.

When users click on the button, the browser sends the form data to the file in the form's action attribute. What happens to the data later has less to do with design and more with data processing. If you're interested, you can read more about it on MDN Web Docs.^[3]

One of the ways to create buttons in a form is with the <button> element. Button elements allow more possibilities as they can have content because it's a container tag. <input>, on the other hand, is a null element — it means that you can't add a markup to the text or insert a picture. The <button> element offers all of these possibilities, and it's easier to style in CSS.

Labels are no less important than inputs themselves — without them, users wouldn't know what information they need to type in or choose from. Of course, it's possible to replace labels with placeholders, but it will create all sorts of problems for assistive technology users. While label-free forms might look less cluttered, screen readers can't read placeholders, and low vision users might struggle reading them too.

Create labels with the <label> tag. We strongly recommend associating labels with inputs not only visually but also programmatically for better accessibility. You can do it either with the for attribute along with the value of the input's id, or by nesting the <input> directly inside the <label> (read more about that on MDN Web Docs).^[4]

Filling out forms can sometimes get really tedious. What can help with that is dividing forms into sections — basically, grouping similar controls together depending on the type of information they ask. For example, when asking for employees' information, an employer can put the fields Full name and Phone number into the Personal info section, and Job title and Start date into Job information section.

To group controls and their labels, put them inside the <fieldset> container tag. Creating sections will also allow you to style each section differently with CSS if you choose to do so.

The <legend> element is nested inside the <fieldset> element and provides a caption for the section content. Use this element right after the <fieldset> start tag and put the caption between its start and end tags.

Generally, grouping controls is a good idea as it makes it easier for users to locate a control they need and looks more user-friendly. Just make sure your grouping makes sense and use descriptive and concise labels for captions.

So users fill a field, but where does this information go afterward? The point of forms is to collect data, of course. For a server to correctly identify the data in the fields, each input needs the <name> attribute. For example, set the name attribute's value to "email" for a field that collects users' emails.

JavaScript requires the name attribute to be unique among the forms in a document and not be an empty string.

Placeholder text gives users an example of information they need to type into a text field. To add a placeholder, use the placeholder attribute inside the <input> tag and define its value inside the quotation marks. This attribute works with the following input types: text, search, URL, tel, email, and password. For example, add placeholder="Jack Sparrow" in a Full Name input to give users an example of a full name.

Browsers will display placeholders in faded text inside the input. Ensure it's not the only information users need to fill in a field — assistive technologies can't read placeholders, and they are highly problematic for low vision users.

If you want to ensure users fill in a particular field, add the required attribute to that field. It won't let users submit the form before they specify a value for the input. The most common required fields are name, phone number, email, and password — among others.

Many forms ask for the same information — name, address, phone number, etc. Allowing autocomplete can make your users' lives much easier — instead of typing all this information anew, they can just choose from the list of predictions.

You can add the autocomplete attribute to <input>, <textarea>, <select>, and <form> elements to enable autocomplete. The value "on" allows the browser to automatically complete the input, although it doesn't provide any guidance about the type of data expected in the field. You can learn more about how to optimize autocomplete on MDN Web Docs.^[5]

Set the type of the input element to "radio" to create a radio button. Remember that radio buttons usually come in groups — called radio groups incidentally. For a single on and off control, a checkmark is a better option.

To create an input field for multi-line text, use the <textarea> element. This element also accepts several attributes common to the <input> element, for example, autocomplete, placeholder, and required.

In most browsers, <textarea> is resizable — you'll notice the handle in the right corner that users can drag to change the input size. This is because the resize CSS property is enabled by default. If you want to disable it, add the following rule to your style sheet:

textarea {

resize: none;

}

Use the <select> element to create a control with a dropdown menu. To add options, use the <option> tag inside the <select> tag. You can include the selected attribute in the <option> element to make it selected by default when the page first loads.

The placeholder attribute provides a brief hint to users about what kind of information they need to enter into the field. Avoid writing lengthy prompts and explanations — the best placeholder is a one or two-word example. The attribute doesn't allow line breaks.

When designing a form, make sure that users can fill it out even if they can't read placeholders.