Day 4: Forms I - Inputs & Labels

Daily Objective

Understand how forms collect user data and master essential input types and accessible label binding.

1. Forms & Labels

Every form input MUST be associated with a <label>. This expands the clickable touch target and ensures assistive technologies announce what input is focused.

<form action="/submit" method="POST">
  <!-- Connect label and input using 'for' and 'id' -->
  <div>
    <label for="fullName">Full Name:</label>
    <input type="text" id="fullName" name="fullName" placeholder="Jane Doe" />
  </div>

  <div>
    <label for="userEmail">Email Address:</label>
    <input type="email" id="userEmail" name="userEmail" placeholder="jane@example.com" />
  </div>

  <div>
    <label for="userPass">Password:</label>
    <input type="password" id="userPass" name="userPass" />
  </div>
</form>

2. Checkboxes & Radio Buttons

• Radio buttons (type="radio"): For single-choice selections. All related options must share the exact same name attribute.
• Checkboxes (type="checkbox"): For multi-choice toggles.

<!-- Radio Buttons (Single Choice) -->
<fieldset>
  <legend>Choose your experience level:</legend>
  <input type="radio" id="exp-beg" name="experience" value="beginner" checked />
  <label for="exp-beg">Beginner</label>

  <input type="radio" id="exp-int" name="experience" value="intermediate" />
  <label for="exp-int">Intermediate</label>
</fieldset>

<!-- Checkboxes (Multiple Choice) -->
<input type="checkbox" id="newsletter" name="newsletter" value="yes" />
<label for="newsletter">Subscribe to our weekly coding tips</label>

Daily Hands-on Practice (70%)

1. Build a user registration form containing text, email, password, age (number), gender/level (radio), and terms acceptance (checkbox).
2. Test clicking each label to verify that the corresponding input field gains focus automatically.