Forms — input, label, button

Forms collect user input. Each input needs a name and a label.

index.html v3.1

<form>
  <label>
    Email:
    <input type="email" name="email" placeholder="you@example.com" required>
  </label>
  <label>
    Password:
    <input type="password" name="password" required>
  </label>
  <label>
    Age:
    <input type="number" name="age" min="18" max="120" value="25">
  </label>
  <label>
    Bio:
    <textarea name="bio" rows="3" placeholder="Tell us about yourself"></textarea>
  </label>
  <button type="submit">Sign Up</button>
</form>

Live preview updates as you type

🧠 How it works

form wraps the inputs. action is the URL to submit to, method is GET or POST. label ties text to an input (click the text to focus the input). input types: text, email, password, number, date, checkbox, radio, file, color, range. required — browser won't submit without a value. placeholder — grey hint text. value — default value. textarea — multi-line text input (rows = height in lines). button type='submit' — submits the form. type='button' — just a clickable button.

✏️ Try these changes

Change type="email" to type="text"
→ no email validation — any text accepted
Change type="number" to type="range"
→ number input becomes a slider
Add 'disabled' to the password input
→ field becomes greyed out and uneditable
Add <input type="checkbox" name="agree"> I agree
→ adds a checkbox
Wrap the form in <fieldset>...</fieldset>
→ form gets a border

← Previous lab

Common tags — h1, p, ul, a, img, div

Next lab →

Tables — the right way (not for layout!)