HTML — Lesson 16
HTML Forms & Validation
Built-in validation without JavaScript using HTML attributes.
HTML Forms & Validation
HTML5 provides built-in form validation through attributes - no JavaScript required. This improves user experience and data quality.
Required Fields
<form>
<input type="text" name="name" required placeholder="Enter name">
<button type="submit">Submit</button>
</form>
Input Type Validation
Using the correct type attribute triggers browser validation automatically.
<!-- Email: checks for @ symbol -->
<input type="email" required>
<!-- URL: checks for valid URL format -->
<input type="url">
<!-- Number: only allows numbers -->
<input type="number" min="1" max="100">
<!-- Date: shows date picker -->
<input type="date" min="2026-01-01" max="2026-12-31">
Pattern Matching (Regex)
The pattern attribute validates input against a regular expression.
<!-- Phone: US format -->
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<!-- Username: 3-16 characters, letters and numbers -->
<input type="text" pattern="[A-Za-z0-9_]{3,16}">
<!-- title attribute shows on validation error -->
<input pattern="[0-9]{5}" title="Please enter a 5-digit zip code">
Text Length Validation
<textarea minlength="10" maxlength="500" required></textarea>
<input minlength="8" type="password" required>
Complete Form Example
<form style="max-width:400px;margin:20px;">
<h3>Registration Form</h3>
<label>Name (required):<br>
<input type="text" required minlength="2" style="width:100%;margin:4px 0 12px;">
</label>
<label>Email (required):<br>
<input type="email" required style="width:100%;margin:4px 0 12px;">
</label>
<label>Age (18-120):<br>
<input type="number" min="18" max="120" style="width:100%;margin:4px 0 12px;">
</label>
<label>Password (min 8 chars):<br>
<input type="password" minlength="8" required style="width:100%;margin:4px 0 12px;">
</label>
<button type="submit" style="padding:8px 24px;">Register</button>
</form>
Tip: HTML validation is a first line of defense. Always also validate on the server, as HTML validation can be bypassed by tech-savvy users.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →