Input types
Learn input types like text, email, password, number and date.
Five common input types
The <input> tag's type attribute says what kind of data the field wants. Five common types are:
text— single-line text (name, surname)email— email; the browser checks the shapepassword— password; characters are hiddennumber— number; spin buttons appeardate— date; a calendar picker shows up
The browser shows each type differently and opens a matching keyboard. Example: <input type="email" name="email">.
type and browser validation
Some types make the browser check the value. With email, the browser looks for an @ and a domain; if missing, it blocks the submit. number accepts only digits; date wants a valid date.
These checks cut down user mistakes. Still, validate on the server too, because browser checks can be skipped. Example: <input type="date" name="birth">.
Exercise Try all five types
Add five <input> fields to the form. Their types should be text, email, password, number and date in order. Give each a different name.
Show example solution
<form>
<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="pwd">
<input type="number" name="age">
<input type="date" name="birth">
</form>Test yourself
-
Which type value suits a password field?
- text
- password
- hidden
- secret
Show answer
password — Correct. type="password" hides the typed characters.
-
Match each type to its purpose
- type="email"
- Email field
- type="password"
- Password field
- type="number"
- Number field
- type="date"
- Date field
-
Write the date field
<input type="____" name="birth">Show answer
<input type="date" name="birth">