Text fields, email fields, and text areas

Common input types

type	Use	Phone keyboard
text	Names, short answers	Normal
email	Email addresses	Has @ and .com
tel	Phone numbers	Number pad
number	Quantities	Numbers
date	Booking dates	Date picker
password	Passwords	Hides characters
search	Search boxes	Search key

Using the right type is one of the easiest ways to make forms faster on mobile.

Examples

<input type="text" name="full_name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="mobile" autocomplete="tel" placeholder="0917 123 4567">
<input type="number" name="boxes" min="1" max="20" value="1">
<input type="date" name="check_in">

The textarea element

<label for="msg">Your message</label>
<textarea id="msg" name="message" rows="5" maxlength="1000"></textarea>

Unlike input, textarea has a closing tag. Any text between the tags becomes the default value, so keep it empty. rows sets the visible height.

placeholder and autocomplete

A placeholder shows example text inside the field until the visitor types. It is a hint, not a label. It disappears when typing starts and is often low contrast.

autocomplete tells the browser what the field is, like name, email, tel, or street-address. Chrome and Safari can then fill saved details with one tap.

Try it: pick the right types

Every field is type text. Change each to the best type, add autocomplete, and make the message a textarea.

Quick quiz

Common mistakes

• Everything as type text. Visitors lose the right keyboard and checks.
• Placeholder as the only label. The hint disappears while typing.
• Text between textarea tags. It becomes real content that may be submitted.

Your action

Tick each item when you can do it. Your progress saves on this device.