Forms, Validation, and UX
Input types, constraints, and accessible form design
Built-in Form Validation
HTML provides free validation through attributes. The browser checks these rules before submitting a form.
Common Validation Attributes
required — field must be filled
min / max / step — numeric constraints
minlength / maxlength — text length limits
pattern — regular expression match
type="email" — email validation
type="url" — URL validation
Accessible Form Example
<form>
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
required
autocomplete="email"
aria-describedby="email-help"
/>
<p id="email-help">We'll never share your email.</p>
<label for="age">Age</label>
<input id="age" name="age" type="number" min="13" max="120" />
<button type="submit">Create Account</button>
</form>Fieldset and Legend
Group related fields for clarity and accessibility:
<fieldset>
<legend>Shipping Address</legend>
<label for="city">City</label>
<input id="city" name="city" />
</fieldset>Input Modes for Mobile
Use inputmode to trigger the right keyboard on mobile without changing validation rules.
<input inputmode="numeric" placeholder="1234" />
<input inputmode="email" placeholder="name@example.com" />⚠️ Form Mistakes to Avoid
- ❌ Inputs without
<label> - ❌ Placeholder text used as a label
- ❌ Custom validation with no error messages
- ❌ Not providing
autocompletehints