Lesson 12: Forms

Almost every website uses forms. We use a <form> element to group fields and buttons together so users can send information to a server.

The <form> tag wraps all the input fields and buttons that you use to collect data from a user.

HTML can handle checking and sending form data without any JavaScript. We will cover the basic input types and attributes that control this behavior.

Submitting forms#

Forms send their data when a user clicks a submit button. You can create a submit button using either <input> or <button> tags.

<input type="submit" value="Submit Form" />
<button type="submit">Submit Form</button>

The <form> tag uses action and method attributes to decide where the data goes and how it gets sent. By default, the browser sends the form data to the current page.

The sent data consists of name and value pairs. Only inputs with a name attribute are sent to the server.

The method attribute is usually set to GET or POST. The GET method adds the form data directly to the end of the website address. The POST method hides the data in the background. Always use POST for sensitive info like passwords.

Reading form values#

When a form is submitted, the browser sends the name and value of each active input. The value of a text box is the text typed inside it, and the value of a dropdown is the selected option.

If an option tag has no value attribute, the browser uses the text inside the tag instead.

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form" />
</form>

Unchecked checkboxes and inactive radio options are not sent. If a text input is empty, its name is still sent with a blank value.

We recommend using unique names for each input field on your form.

Radio buttons#

Radio buttons in a group use the exact same name attribute. This links them together so the user can only select one option at a time.

Make sure each radio button has a unique value attribute. The browser only sends the value of the checked button when the form is submitted.

Add the checked attribute to select an option by default. To make selection required, add the required attribute to at least one button in the group.

Checkboxes#

Checkboxes in a group can also share the same name. Unlike radio buttons, users can select multiple options.

Always include a value attribute on your checkboxes. If you leave it off, the browser sends the word "on" as the default value.

Labels and fieldsets#

Accessible forms require labels. Every input must have a label, and groups of inputs should be wrapped in fieldsets labeled by legends.

To link a label to an input, set the for attribute on the label to match the id of the input.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name" />

Clicking the label text selects the input field. This gives mobile users a larger area to tap.

You can also put the input directly inside the label tag to link them automatically.

<label>
  Your name
  <input type="text" name="name" />
</label>

Avoid putting other links or buttons inside labels.

For radio and checkbox groups, wrap the inputs in a <fieldset> tag and use the <legend> tag to label the whole group.

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine" /> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine" /> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine" /> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

You can style fieldsets and legends using CSS. Disabling a fieldset will disable all the inputs inside it.

Input types#

HTML has over twenty input types. On mobile screens, the type determines the layout of the virtual keyboard. Using type="tel" displays a phone keypad, while type="email" adds the @ symbol.

Uploading files#

Use <input type="file"> to let users upload files. You can restrict the allowed file types using the accept attribute. The capture attribute suggests using the camera or microphone directly on mobile devices.

<label for="avatar">A photo of yourself</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar" />

Form validation#

HTML can block form submission if inputs are invalid. You can set rules using attributes like required, min, max, minlength, and maxlength.

HTML checks these rules when the user clicks submit. If something is wrong, the browser blocks the submission, focuses the incorrect input, and shows a message.

You can style valid and invalid inputs using CSS.

Avoid disabling submit buttons using styles. Many users click the button specifically to see what errors they need to fix.

You can also use JavaScript to customize these default error messages.

Example form#

Here is a simple example form showing how these elements work together.

<form method="POST" action="/submit">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required />

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments"></textarea>

  <button type="submit">Submit Form</button>
</form>

Other considerations#

Always check form data on the server side too. Client-side checks are just a convenience for the user.

Keep your forms flexible because address formats, names, and phone numbers vary across the world.

Use the autocomplete attribute to help users fill out forms faster.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).