HTML Forms

Understanding HTML Forms

HTML forms provide a way for users to enter information and submit it for processing.

Forms can collect many types of information, including names, email addresses, messages, selections, dates, files, and other user input. HTML provides the structure and controls for collecting this information, while server-side processing is typically used to receive and work with the submitted data.

The <form> Element

The <form> element creates a form and acts as a container for the controls used to collect information from a user.

A form begins with an opening <form> tag and ends with a closing </form> tag. Input fields, labels, buttons, and other form-related elements are placed inside it.

<form>
  Form controls go here.
</form>

Form Controls

Form controls are the interactive elements users work with when completing a form. Different controls are designed to collect different kinds of information.

Common controls include text fields, email and telephone fields, radio buttons, checkboxes, select menus, text areas, and submit buttons. Many of these controls are created with the <input> element and its type attribute.

<input type="text">
<input type="email">
<input type="tel">
<button type="submit">Submit</button>

Form Labels

The <label> element describes the purpose of a form control. A label should be programmatically associated with its control so users can identify what information should be entered.

The label's for attribute should match the control's id value.

<label for="name">First &amp; Last Name:</label>
<input type="text" id="name" name="user_name">

Selecting the label also places focus on its associated control, which makes forms easier to use with a mouse, touch screen, and assistive technology.

Grouping Form Controls

The <fieldset> element groups related form controls, while the <legend> element provides a description for that group.

<fieldset>
  <legend>Your Name &amp; Contact Info</legend>

  <label for="name">First &amp; Last Name:</label>
  <input type="text" id="name" name="user_name">
</fieldset>

Grouping controls is especially useful when a form contains several sections or related sets of choices.

The action Attribute

The action attribute specifies where the browser sends the form data when the form is submitted.

<form action="/html5/tutorials/forms/php/forms-01.php">
  ...
</form>

The destination is usually a server-side resource that receives and processes the submitted information.

The method Attribute

The method attribute specifies the HTTP method used to submit the form. The two methods commonly used with HTML forms are get and post.

<form action="/html5/tutorials/forms/php/forms-01.php" method="post">
  ...
</form>

In this example, post sends the form data in the request body rather than placing it in the page URL. The differences between these methods are covered later in the GET vs POST tutorial.

Complete Form Example

The following example combines a form, related controls, labels, a fieldset, and submit and reset buttons. Submit the form to see how the entered values are sent to the server and returned as a result.

Form Best Practices

• Use labels to clearly identify form controls.
• Associate each label with its form control using matching for and id values.
• Use the appropriate input type for the information being collected.
• Use <fieldset> and <legend> when controls form a meaningful group.
• Use clear instructions so users understand what information is expected.
• Choose the appropriate form submission method for the type of request being made.

Summary

HTML forms collect information through form controls placed inside the <form> element. Labels identify controls, fieldsets can organize related controls, and the action and method attributes determine where and how the form data is submitted.

The tutorials that follow examine each major part of an HTML form in more detail, beginning with form labels.