HTML Tutorial · Page Structure · Lesson 16 of 34
HTML Input Types and Validation
email, number, date, range and more — plus built-in validation attributes.
Input types
The type attribute changes the control and the on-screen keyboard on phones:
<style>label { display: block; margin: 6px 0; font-family: sans-serif; }</style>
<label>Email <input type="email" placeholder="[email protected]"></label>
<label>Password <input type="password"></label>
<label>Age <input type="number" min="0" max="120" value="30"></label>
<label>Birthday <input type="date"></label>
<label>Volume <input type="range" min="0" max="10" value="7"></label>
<label>Colour <input type="color" value="#2563eb"></label>
<label>Website <input type="url" placeholder="https://"></label>
<label>Search <input type="search"></label>
<label>Avatar <input type="file" accept="image/*"></label>
Built-in validation
The browser validates these before submitting — no JavaScript needed:
| Attribute | Rule |
|---|---|
required |
must not be empty |
minlength / maxlength |
text length |
min / max / step |
number and date range |
pattern |
must match a regular expression |
type="email" / type="url" |
must look like an email / URL |
Try submitting the form below with invalid values:
<style>
form { display: grid; gap: 8px; max-width: 300px; font-family: sans-serif; }
input:invalid:not(:placeholder-shown) { border-color: crimson; }
</style>
<form onsubmit="event.preventDefault(); this.querySelector('p').textContent = 'All fields are valid!';">
<input name="user" required minlength="3" placeholder="Username (3+ characters)">
<input name="zip" pattern="[0-9]{5}" placeholder="ZIP code (5 digits)" required>
<input name="qty" type="number" min="1" max="10" placeholder="Quantity (1–10)" required>
<button>Check</button>
<p></p>
</form>
Client-side validation improves the experience, but always validate again on the server — anyone can bypass the browser.
Test yourself
Which attribute makes a field mandatory?
mandatoryrequiredneededvalidate
Show answer
Answer: required