Forms

Forms collect user input. Learn the modern input types, the proper label-for pairing, built-in HTML validation, and the right button types.

forminputlabelvalidationbutton

Duration

⏱ About 1.5 hours

Level

📊 Beginner

Prerequisite

🎯 html-01

OUTCOME

Build a fully labelled form with client-side validation

What you'll learn

1Pair <label for> with <input id> correctly
2Use specific input types (email, number, date, etc.)
3Constrain input with required, pattern, min/max
4Use button type=submit/reset/button intentionally

1. Form Anatomy

html

<form action="/signup" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required minlength="2">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="age">Age</label>
  <input id="age" name="age" type="number" min="0" max="120">

  <button type="submit">Sign up</button>
</form>

💡

Always associate every <input> with a <label> via for/id. Clicking the label focuses the input — vital for accessibility.

2. Input Types

Type	Notes
text	Plain text
email	Validates format, shows email keyboard on mobile
number	Numeric, optional min/max/step
password	Masks the input
date / time / datetime-local	Native date pickers
tel	Phone keypad on mobile
url	Validates URL format
checkbox / radio	Multi-/single-select toggles
file	File upload (accept and multiple supported)
range	Slider
color	Color picker

3. Selects and Textareas

html

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- choose --</option>
  <option value="us">United States</option>
  <option value="kr">South Korea</option>
</select>

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4" cols="40" placeholder="Tell us about yourself"></textarea>

4. Validation

html

<input type="text" required minlength="3" maxlength="20">
<input type="number" min="0" max="100" step="5">
<input type="text" pattern="[A-Za-z0-9_]+" title="Letters, digits, underscore only">

These run client-side before submit, but always re-validate on the server too.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗