Text Inputs and Labels
Master the <input> element, the <label> element, and learn why wiring them together is essential for usability and accessibility.
The <input> element — the workhorse of forms
The <input> element is the most versatile and commonly used form element in HTML. In its default form (type="text"), it creates a single-line text field where users can type information.
Every input needs three key attributes to be useful:
The type attribute determines what kind of input it is. type="text" is the default and creates a plain text field. We'll explore many other types in a later lesson.
The name attribute gives the field a name that the server uses to identify the data. When the form is submitted, the browser sends name-value pairs like username=alex. Without a name attribute, the input's data is simply not sent — it's as if the field doesn't exist.
The placeholder attribute shows faint hint text inside the input before the user types anything. It gives users a clue about what to enter. For example, placeholder="Enter your email" shows gray text that disappears as soon as the user starts typing.
The <input> element is a void element (also called a self-closing element) — it has no closing tag. You write <input type="text" name="email">, not <input>...</input>. This is because inputs don't wrap around other content; they are standalone interactive widgets.
placeholder attribute is for hints only — short examples like "e.g., alex@email.com" or "Enter your city". It disappears when the user starts typing, so it should never contain important instructions. Users with cognitive disabilities may confuse placeholder text with pre-filled data. Always use a <label> for the field's actual name.