Text and choice controls
Text controls
Choose text, email, URL, password, search, telephone, and multiline controls according to the value a person needs to enter.
8 minute lesson
Use the native control that matches what the person is entering.
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">
<label for="website">Website</label>
<input id="website" name="website" type="url">
<label for="message">Message</label>
<textarea id="message" name="message" rows="6"></textarea>
The type affects browser behavior. An email input can show a suitable mobile keyboard and perform basic format validation. A URL input understands URL-shaped values. A textarea accepts multiple lines.
The type does not prove that an address exists, that a URL is safe to fetch, or that a message is acceptable. The server receives strings and must apply the real contract.
Use type="password" when text should be visually obscured. It does not encrypt the value. HTTPS protects the request in transit, and the server must store passwords using a suitable password-hashing function rather than plain text.
type="search" and type="tel" mainly improve input behavior. Telephone formats vary, so do not apply a narrow pattern unless your service truly accepts only one format.
Add autocomplete values where the browser can safely help. They reduce typing and make forms easier to complete.
Test the controls on a phone or with device emulation. Look at the keyboard and validation behavior, not only their desktop appearance.
Lesson completed