DEV Community

Cover image for Day 13/180 of FrontendnDev: Mastering Form Controls - Checkboxes, Radios, Selects & Buttons
CodeWithDhanian
CodeWithDhanian

Posted on

Day 13/180 of FrontendnDev: Mastering Form Controls - Checkboxes, Radios, Selects & Buttons

#frontend #frontendchallenge #webdev

Welcome to Day 13 of the 180 Days of Frontend Development Challenge. Today we'll dive deep into professional implementation of advanced form controls. For comprehensive form techniques, see the Learn Frontend Development in 180 Days ebook.

1. Checkboxes: Multiple Selections

Basic Implementation 

<fieldset>
  <legend>Select Your Interests</legend>

  <div class="form-control">
    <input type="checkbox" id="news" name="interests" value="news">
    <label for="news">Newsletters</label>
  </div>

  <div class="form-control">
    <input type="checkbox" id="updates" name="interests" value="updates" checked>
    <label for="updates">Product Updates</label>
  </div>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

Key Attributes:

  • checked: Pre-selects the option
  • value: Data sent when form is submitted
  • name: Groups related checkboxes

Professional Pattern:

Wrap each checkbox in <div class="form-control"> for consistent styling

2. Radio Buttons: Single Selection

Proper Grouping 

<fieldset>
  <legend>Payment Method</legend>

  <div class="form-control">
    <input type="radio" id="credit" name="payment" value="credit" required>
    <label for="credit">Credit Card</label>
  </div>

  <div class="form-control">
    <input type="radio" id="paypal" name="payment" value="paypal">
    <label for="paypal">PayPal</label>
  </div>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

Critical Notes:

  • All radios in a group must share the same name
  • Include required when selection is mandatory
  • Use fieldset and legend for accessibility

3. Select Dropdowns

Basic Select 

<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">-- Select Country --</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Advanced Select Features 

<select id="skills" name="skills" multiple size="4">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="node">Node.js</option>
  </optgroup>
</select>
Enter fullscreen mode Exit fullscreen mode

Attributes to Know:

  • multiple: Allows multi-select
  • size: Visible rows
  • optgroup: Groups related options

4. Buttons: Beyond Basic Submission

Button Types 

<!-- Submit Button -->
<button type="submit">Process Order</button>

<!-- Reset Button -->
<button type="reset">Clear Form</button>

<!-- Generic Button -->
<button type="button" id="calculate">Calculate</button>
Enter fullscreen mode Exit fullscreen mode

Professional Button Patterns 

<button type="submit" class="btn-primary">
  <svg aria-hidden="true" width="16" height="16"><!-- icon --></svg>
  <span>Place Order</span>
</button>

<button type="button" disabled aria-busy="true">
  Processing...
</button>
Enter fullscreen mode Exit fullscreen mode

Accessibility Features:

  • Always specify type (submit/reset/button)
  • Use ARIA attributes when needed
  • Include state indicators (disabled/loading)

Complete Example: Survey Form 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customer Satisfaction Survey</title>
  <style>
    :root {
      --primary: #0066cc;
      --border: 1px solid #ddd;
    }
    form {
      max-width: 600px;
      margin: 2rem auto;
      padding: 2rem;
      border: var(--border);
      border-radius: 8px;
    }
    fieldset {
      border: var(--border);
      border-radius: 4px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    legend {
      padding: 0 0.5rem;
      font-weight: bold;
    }
    .form-control {
      margin: 1rem 0;
    }
    button {
      background: var(--primary);
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:disabled {
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <form id="survey">
    <fieldset>
      <legend>Customer Information</legend>

      <div class="form-control">
        <label for="email">Email*</label>
        <input type="email" id="email" name="email" required>
      </div>

      <div class="form-control">
        <label>Age Group*</label>
        <div>
          <input type="radio" id="age1" name="age" value="18-25" required>
          <label for="age1">18-25</label>
        </div>
        <div>
          <input type="radio" id="age2" name="age" value="26-35">
          <label for="age2">26-35</label>
        </div>
      </div>
    </fieldset>

    <fieldset>
      <legend>Survey Questions</legend>

      <div class="form-control">
        <label for="satisfaction">Overall Satisfaction*</label>
        <select id="satisfaction" name="satisfaction" required>
          <option value="">-- Select Rating --</option>
          <option value="5">Very Satisfied</option>
          <option value="4">Satisfied</option>
          <option value="3">Neutral</option>
          <option value="2">Dissatisfied</option>
          <option value="1">Very Dissatisfied</option>
        </select>
      </div>

      <div class="form-control">
        <label>Which features do you use?*</label>
        <div>
          <input type="checkbox" id="feat1" name="features" value="dashboard" required>
          <label for="feat1">Dashboard</label>
        </div>
        <div>
          <input type="checkbox" id="feat2" name="features" value="reports">
          <label for="feat2">Reports</label>
        </div>
      </div>
    </fieldset>

    <div class="form-control">
      <button type="submit">Submit Survey</button>
      <button type="reset">Start Over</button>
    </div>
  </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Professional Practices

  1. Accessibility Must-Haves

    • Always associate labels with inputs
    • Use fieldset for related controls
    • Implement keyboard navigation
    • Include ARIA attributes when needed

  2. Validation Patterns

   <!-- Require at least one checkbox -->
   <input type="checkbox" name="terms" required>

   <!-- Custom radio validation -->
   <input type="radio" name="shipping" required 
          oninvalid="this.setCustomValidity('Please select shipping option')">
Enter fullscreen mode Exit fullscreen mode
  1. UX Considerations
    • Group related options visually
    • Order selections logically
    • Provide clear selection feedback
    • Style focus states for keyboard users

Exercises

  1. Build a Pizza Order Form with:

    • Radio buttons for size (S/M/L)
    • Checkboxes for toppings
    • Select dropdown for delivery time
    • Custom styled submit button

  2. Create a Multi-Step Registration with:

    • Radio button for account type
    • Checkbox for terms acceptance
    • Disabled submit button until valid

  3. Fix These Control Errors:

   <div>
     <p>Choose color:</p>
     <input name="color" type="radio" value="red">
     <input name="color" type="radio" value="blue">
   </div>
Enter fullscreen mode Exit fullscreen mode

What's Next?

Tomorrow (Day 14) covers Form Validation Techniques - client-side validation, error messaging, and accessibility patterns. For advanced form control techniques including custom dropdowns and toggle switches, see Chapter 9 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Test all form controls using only keyboard navigation to ensure full accessibility compliance.

Top comments (2)

Collapse
 
dotallio profile image
Dotallio •

Really appreciate how much you emphasized accessibility and real-world patterns here

Do you have any tips for handling custom-styled checkboxes or selects that keep accessibility intact?

Collapse
 
code_2 profile image
CodeWithDhanian •

Check my eBook