The <input> element

The <input> element is used to create interactive controls for web-based forms to accept data from the user. Various types of input data and control widgets are available, depending on what use you need. The <input> element is one of HTML's most powerful and complex. The DOM HTMLInputElement interface provides the properties and methods for working with the options, layout, and presentation of <input> elements.

Accessibility concerns

Labels

When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see Labels .

The following is an example of how to associate the <label> with an <input> element in the above style. You need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />


Size

Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.