HTML Tutorial: HTML Form Validation
Learn how to validate forms using built-in HTML validation attributes with colorful examples and clear outputs
HTML provides built-in validation features. You can validate user input without JavaScript using simple attributes.
1️⃣ Required Field Validation
INPUT:
<form>
<label>Username:</label>
<input type="text" name="username" required>
<input type="submit">
</form>
OUTPUT:
Try submitting empty → Browser shows validation message
✔️ required prevents empty submission
✔️ Browser shows automatic error message
2️⃣ Email & Number Validation
INPUT:
<form>
<input type="email" placeholder="Enter email" required>
<input type="number" min="1" max="100">
<input type="submit">
</form>
OUTPUT:
Invalid email or number outside range → Error shown
✔️ type="email" validates correct email format
✔️ min and max restrict number range
3️⃣ Minlength & Maxlength
INPUT:
<form>
<input type="password" minlength="6" maxlength="12" required>
<input type="submit">
</form>
OUTPUT:
Password must be between 6 and 12 characters
✔️ minlength sets minimum characters
✔️ maxlength limits maximum characters
4️⃣ Pattern Validation (Custom Rules)
INPUT:
<form>
<label>Phone (10 digits):</label>
<input type="text" pattern="[0-9]{10}" required>
<input type="submit">
</form>
OUTPUT:
Only 10 digits allowed (Example: 0801234567)
✔️ pattern uses Regular Expression
✔️ Allows custom validation rules
5️⃣ Summary of Validation Attributes
| Attribute | Purpose |
|---|---|
| required | Prevents empty field |
| min / max | Limits numeric values |
| minlength / maxlength | Controls text length |
| pattern | Custom validation rule |
🚀 What’s Next?
👉 HTML Input Types (Advanced)
- Date, Time, Color, Range inputs
- Modern interactive form elements
- Better user experience with HTML5
HTML form validation improves data accuracy, enhances user experience, and reduces the need for complex JavaScript validation.