Loading…
Nobody likes submitting a form only to get an error page. HTML5 has built-in client-side validation that catches common mistakes before the data leaves the browser — no JavaScript needed!
required AttributeAdd required to any input to make it mandatory:
<input type="text" name="name" required>
If a user tries to submit without filling in a required field, the browser will show an error message automatically.
Some input types validate format automatically:
| Type | Validates | Example |
|---|---|---|
| <code>email</code> | Must contain @ and a domain | <code>user@example.com</code> |
| <code>url</code> | Must start with http:// or https:// | <code>https://example.com</code> |
| <code>number</code> | Must be a number, supports min/max | <code>42</code> |
| <code>tel</code> | Shows a phone keyboard on mobile | No format validation |
<input type="text" name="username" minlength="3" maxlength="20" required>
The browser will not let users type more than 20 characters, and will show an error if they type fewer than 3.
placeholder vs required Distinctionplaceholder shows hint text — it is not a substitute for a label.required enforces that the field must be filled — it is validation.Create a registration form with:
name="username", minlength="3")name="email")name="password", minlength="8")Each input must have a <label>.