The input element is the most flexible and versatile of the form controls.
- all inputs must apply a type attribute to determine how this input will function
- all inputs must have a descriptive name attribute. This will be used by the processing script in stage two in order to access the data.
- all inputs must have a descriptive id attribute (may be the same value as the name). This ensures the code is valid and allows the application of labels
- text based inputs will reliably accept 2000+ characters of data
- always apply either a placeholder or label to ALL input elements
Examine the source code of this document for details
Semantic, Accessible Inputs
All inputs must have either a placeholder or label to ensure maximum accessibility:
A form with inputs using labels
A form with inputs using only placeholder attribute (NOT accessible!)
A form with inputs using both placeholder and labels
NOTE: the labels here are hidden from view, but NOT hidden from screen readers and accessibility devices. See the associated stylesheet .sr-only rule.
Input Variations
A very versatile element, how an input works is determined by its type attribute.
Please fill out this form: