HTML Form Inputs

Understanding Form Inputs

The HTML <input> element creates many of the controls used to collect information in a form.

The behavior and appearance of an input depend primarily on its type attribute. Additional attributes identify the control, provide initial values or hints, help browsers complete information, and define whether a value is required.

The <input> Element

The <input> element creates an interactive form control. It is a void element, which means it does not have a closing tag.

<input type="text" name="user_name">

Different attributes can be added to control how the input behaves and how its value is handled.

The type Attribute

The type attribute determines what kind of input control the browser creates. If the attribute is omitted or contains an unsupported value, the input behaves as a text field.

<input type="text">
<input type="email">
<input type="tel">

HTML provides many input types for different kinds of information and controls. The next tutorial covers the available input types in detail.

The name Attribute

The name attribute identifies a form control when its data is submitted. The submitted value is associated with this name so the receiving resource can determine which control the value came from.

<input type="text" name="user_name">

In a typical submission, the control's name and its current value are sent together as a name-value pair. A control without a name generally does not contribute a value to the submitted form data.

The id Attribute

The id attribute gives an input a unique identifier within the document. One important use is connecting the input to a <label>.

<label for="email">Email:</label>
<input type="email" id="email" name="user_email">

The id and name attributes have different jobs. The id identifies the element within the document, while name identifies its data during form submission.

The value Attribute

The value attribute can provide an initial value for an input or specify the value associated with certain controls when they are submitted.

<label for="city">City:</label>
<input type="text" id="city" name="user_city" value="Portland">

For a text field, the value appears in the field and can normally be changed by the user before the form is submitted.

The placeholder Attribute

The placeholder attribute displays a short hint inside certain input fields while the field is empty.

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="user_phone" placeholder="1234567890">

Placeholder text should provide a helpful example or hint rather than replace a visible <label>. The placeholder disappears when the user begins entering a value.

The required Attribute

The boolean required attribute tells the browser that the user must provide an acceptable value before the form can be submitted.

<label for="email">Email:*</label>
<input type="email" id="email" name="user_email" required>

If the required control is empty or otherwise fails its built-in validation requirements, the browser prevents normal form submission and prompts the user to correct it.

The autocomplete Attribute

The autocomplete attribute helps browsers and other user agents understand what kind of information a field expects so previously saved information can be offered when appropriate.

<label for="name">Name:</label>
<input type="text" id="name" name="user_name" autocomplete="name">

<label for="email">Email:</label>
<input type="email" id="email" name="user_email" autocomplete="email">

Using an appropriate autocomplete value can make frequently used forms faster and easier to complete.

Form Input Example

The following example combines several common input attributes. Change the type, value, placeholder, or required attributes to see how each change affects the form.

Input Best Practices

• Choose an input type that matches the information being collected.
• Give controls a meaningful name when their values need to be submitted.
• Use unique id values and associate inputs with their labels.
• Use placeholder text only as a hint, not as a replacement for a label.
• Use required only when the information is actually necessary.
• Use appropriate autocomplete values when they can make the form easier to complete.

Summary

The <input> element creates many common HTML form controls. Its type determines the kind of control, while attributes such as name, id, value, placeholder, required, and autocomplete control how the field is identified and behaves.

Next, the Input Types tutorial looks more closely at the different controls that can be created with the <input> element.