4. Form Validation & Inputs

Level: BeginnerDuration: 20m

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">
email	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 ]+"`).

MDN: HTML Form Validation Guide

Page

Advanced HTML Inputs

HTML5 Form Validation

Checkboxes, Radio Buttons, and Dropdowns

Mini Project Step 4: Enhanced Personal Profile Form