26. Text, Password, Email and Number Inputs
type='text', 'password', 'email', 'number', 'tel', 'url'
Real-life analogy
Just as when you dial a number on a phone only a 0-9 keypad opens, and when you type an email the keypad with @ opens, the right input type gives the user the right keyboard!
Explanation
The main text-based input types:
type="text": For writing a plain name or address.type="password": Shows secret dots (••••) in place of characters.type="email": Automatically checks for @ and a domain name on submit.type="number": Accepts only numbers (0-9). A range can be set withminandmax.type="tel": For phone numbers. Opens the phone keypad on a mobile screen.type="url": For website links (checks for https://).
Golden rules
- Always add
<label for="id">with every input so that the user can also select the box by clicking the label.
Common mistake
Using type='number' for a phone number. You should always use type='tel' for phone numbers.
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
<form style="max-width: 280px; font-size: 13px;">
<label>Full name:</label>
<input type="text" placeholder="e.g. Rahul" style="width: 100%; padding: 6px; margin: 3px 0 8px 0; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
<label>Email:</label>
<input type="email" placeholder="rahul@test.com" style="width: 100%; padding: 6px; margin: 3px 0 8px 0; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
<label>Password:</label>
<input type="password" placeholder="••••••••" style="width: 100%; padding: 6px; margin: 3px 0 8px 0; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
</form>
</body>
</html>Quick quiz
Which input type is used to hide a password and show it as dots (••••)?
- type="secret"
- type="hidden"
- type="password"
- type="dots"
Show answer
Answer: type="password"
type='password' hides the characters and shows them as bullets.