4Form Validation & Inputs
Beginner20m
Advanced HTML Inputs
HTML provides many input types beyond plain text. These help users provide the correct information and make forms more interactive.
| Input Type | Purpose | Example |
|---|---|---|
| text | Single-line text input | <input type="text"> |
| User email address | <input type="email"> | |
| number | Numbers only | <input type="number" min="1" max="100"> |
| password | Hidden text | <input type="password"> |
| checkbox | Select multiple options | <input type="checkbox"> |
| radio | Select one option | <input type="radio"> |
| date | Pick a date | <input type="date"> |
| url | Website URL | <input type="url"> |
| file | Upload a file | <input type="file"> |
💡 Tip: Always pair input fields with `<label>` for better accessibility and easier clicking.
HTML5 Form Validation
HTML5 lets you validate user input before submission. These attributes help enforce correct input without JavaScript.
- `required` - ensures a field isn’t left empty
- `pattern` - checks the input against a regular expression
- `min` / `max` - set numeric or date limits
- `maxlength` / `minlength` - control text length
- `type="email"` or `type="url"` - validate email and URL format
html
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="3"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="120"><br><br>
<label for="website">Website:</label>
<input type="url" id="website" name="website"><br><br>
<button type="submit">Submit</button>
</form>Checkboxes, Radio Buttons, and Dropdowns
Sometimes you want users to pick one option, multiple options, or select from a list. HTML has you covered.
html
<h2>Preferences</h2>
<form>
<label>Favorite Colors:</label><br>
<input type="checkbox" name="color" value="red"> Red<br>
<input type="checkbox" name="color" value="blue"> Blue<br>
<input type="checkbox" name="color" value="green"> Green<br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male" required> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="nigeria">Nigeria</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<button type="submit">Submit Preferences</button>
</form>Mini Project Step 4: Enhanced Personal Profile Form
Take your profile page from the previous lesson and enhance your contact form:
- Add `required` to important fields (name, email).
- Use input types like `email`, `number`, `password`, and `url` where appropriate.
- Include a checkbox group for hobbies or interests.
- Include radio buttons for gender selection.
- Add a dropdown `<select>` for country or location.
html
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="13" max="120"><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="male" required> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<label>Hobbies:</label><br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="music"> Music<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="nigeria">Nigeria</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<button type="submit">Update Profile</button>
</form>💡 Bonus Challenge: Use the `pattern` attribute to only allow names with letters and spaces (e.g., `pattern="[A-Za-z ]+"`).