Project 6: Contact & Sign-Up Forms

Project 6: Contact & Sign-Up Forms

Forms are how users talk back to your page. Build a sign-up form that works and validates.

The goals

1. A <form> that groups inputs.
2. Different type values for each kind of data.
3. Built-in validation: required, minlength, pattern.
4. A <fieldset> + <legend> to label a group, plus a final <button>.

Example

<form action="#" method="post">
  <fieldset>
    <legend>Account details</legend>

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

    <label for="name">Display name</label>
    <input type="text" id="name" minlength="3" required>

    <label for="bio">Bio</label>
    <textarea id="bio" rows="3"></textarea>

    <label for="level">Experience</label>
    <select id="level">
      <option>Beginner</option>
      <option>Intermediate</option>
      <option>Advanced</option>
    </select>
  </fieldset>

  <button type="submit">Create account</button>
</form>

Make it strict

• type="email" makes the browser check the address shape itself.
• required blocks empty inputs.
• pattern (e.g. [A-Za-z]{3,}) checks against a format.
• Attach a <label for=id> to every field - clicking it focuses the input.

Checklist

• [ ] A type appropriate for each field
• [ ] label for every input
• [ ] required on 2+ fields
• [ ] A <fieldset> with a <legend>
• [ ] A real submit <button>

TL;DR

Forms collect data; type, required, minlength, and pattern enforce it. Never forget the label and the button.