<input> Types
text, email, password, number, date, file, color, range, and more.
1Pick the Right Type
The type attribute changes validation, on-screen keyboard, and browser UI. Use type="email" instead of type="text" so mobile keyboards show @, etc.
<input type="text" placeholder="Name" />
<input type="email" placeholder="you@site.com" />
<input type="password" />
<input type="number" min="0" max="100" step="5" />
<input type="date" />
<input type="time" />
<input type="file" accept="image/*" />
<input type="color" value="#4f46e5" />
<input type="range" min="0" max="100" />
<input type="tel" />
<input type="url" />
<input type="search" />2Put the element in context
Input types provide behavior and hints that fit different data, such as email or numbers. They do not replace server validation or a visible label. A numeric-looking identifier, such as a postal code, may need text input rather than arithmetic controls.
3Practice with a small page
Create email, text, and number fields with visible labels. Compare the keyboard and browser validation hints. Decide whether a proposed field is an amount, an identifier, or free text before selecting its type and autocomplete behavior.
Finished reading?
Mark this topic as complete to track progress.