Selection Controls

Forms Selection Controls: The Choice-Making Buttons of the Web

The Story of Choices

Imagine you’re at an ice cream shop. The friendly person behind the counter asks you questions:

• “Do you want sprinkles?” (Yes or No - you can say yes!)
• “Do you want chocolate chips?” (Yes or No - you can say yes to this too!)
• “Which cone do you want?” (Waffle OR Sugar - pick ONE only!)
• “Ready to order?” (Press the button to confirm!)

That’s exactly how selection controls work on websites! They help users make choices - some let you pick many things, some let you pick just one, and buttons make things happen.

1. Checkbox Inputs: Pick As Many As You Want!

What Is It?

A checkbox is like a checklist. You know those lists where you tick off things you’ve done? That’s a checkbox!

<input type="checkbox"
       id="sprinkles"
       name="toppings"
       value="sprinkles">
<label for="sprinkles">
  Sprinkles
</label>

The Magic Parts

Real Example: Pizza Toppings

<p>Pick your toppings:</p>

<input type="checkbox"
       id="cheese"
       name="topping"
       value="cheese"
       checked>
<label for="cheese">
  Extra Cheese
</label>

<input type="checkbox"
       id="mushroom"
       name="topping"
       value="mushroom">
<label for="mushroom">
  Mushrooms
</label>

<input type="checkbox"
       id="pepperoni"
       name="topping"
       value="pepperoni">
<label for="pepperoni">
  Pepperoni
</label>

Key Points

• Users can check zero, one, or ALL boxes
• checked makes it pre-selected
• Always use <label> - it makes the text clickable too!
• Same name groups them together

2. Radio Inputs: Pick Only ONE!

What Is It?

Radio buttons are like those old car radios - push one button and the others pop out. You can only pick ONE option from a group.

<input type="radio"
       id="small"
       name="size"
       value="small">
<label for="small">
  Small
</label>

Why “Radio”?

Old radios had buttons. Press button 1, and button 2 pops out. You could only listen to ONE station at a time. Radio buttons work the same way!

Real Example: T-Shirt Size

<p>Choose your size:</p>

<input type="radio"
       id="small"
       name="size"
       value="small">
<label for="small">Small</label>

<input type="radio"
       id="medium"
       name="size"
       value="medium"
       checked>
<label for="medium">Medium</label>

<input type="radio"
       id="large"
       name="size"
       value="large">
<label for="large">Large</label>

The Secret: Same Name = Same Group

graph TD
    A["name='size'"] --> B["Small"]
    A --> C["Medium"]
    A --> D["Large"]
    E["Only ONE can be selected!"]

Important: All radio buttons with the same name are in the same group. Pick one, the others turn off!

3. The Button Element: Make Things Happen!

What Is It?

A <button> is like a doorbell - press it and something happens! It’s more powerful than old-style buttons.

<button type="button">
  Click Me!
</button>

Three Types of Buttons

Button vs Input Button

<!-- Old way (still works) -->
<input type="button" value="Click">

<!-- New way (better!) -->
<button type="button">
  Click Me!
</button>

Why <button> is better:

• Can have images inside
• Can have icons inside
• Easier to style
• More flexible

Example: Button with Icon

<button type="button">
  Save Document
</button>

4. Submit Button: Send Your Form!

What Is It?

The submit button is the “GO!” button. It packages up all your form answers and sends them to the website.

Two Ways to Create It

<!-- Way 1: Using input -->
<input type="submit"
       value="Send Message">

<!-- Way 2: Using button -->
<button type="submit">
  Send Message
</button>

How It Works

graph TD
    A["User fills form"] --> B["Clicks Submit"]
    B --> C["Browser collects data"]
    C --> D["Data sent to server"]
    D --> E["Server responds"]

Real Example

<form action="/send" method="post">
  <label for="email">Email:</label>
  <input type="email"
         id="email"
         name="email">

  <button type="submit">
    Subscribe
  </button>
</form>

Note: Submit only works inside a <form> tag!

5. Reset Button: Start Over!

What Is It?

The reset button is like an eraser - it clears everything in the form back to the beginning.

Two Ways to Create It

<!-- Way 1: Using input -->
<input type="reset"
       value="Clear Form">

<!-- Way 2: Using button -->
<button type="reset">
  Clear Form
</button>

What Reset Does

• Clears text inputs
• Unchecks checkboxes (unless they had checked)
• Returns radio buttons to default
• Resets dropdowns to first option

Example: Contact Form with Reset

<form>
  <input type="text"
         name="name"
         placeholder="Your name">

  <textarea name="message"
            placeholder="Message">
  </textarea>

  <button type="submit">Send</button>
  <button type="reset">Clear</button>
</form>

Caution!

Reset buttons can be frustrating for users. They might click it by accident and lose all their work. Use them carefully!

Putting It All Together

Complete Example: Order Form

<form action="/order" method="post">

  <!-- Radio: Pick ONE -->
  <p>Choose size:</p>
  <input type="radio"
         id="s" name="size"
         value="s">
  <label for="s">Small</label>

  <input type="radio"
         id="m" name="size"
         value="m" checked>
  <label for="m">Medium</label>

  <input type="radio"
         id="l" name="size"
         value="l">
  <label for="l">Large</label>

  <!-- Checkboxes: Pick MANY -->
  <p>Add extras:</p>
  <input type="checkbox"
         id="gift" name="extra"
         value="gift">
  <label for="gift">Gift wrap</label>

  <input type="checkbox"
         id="rush" name="extra"
         value="rush">
  <label for="rush">Rush delivery</label>

  <!-- Buttons -->
  <button type="submit">
    Place Order
  </button>
  <button type="reset">
    Start Over
  </button>

</form>

Quick Summary

Remember!

1. Checkboxes = Pick many (like a shopping list)
2. Radio buttons = Pick one (like a multiple choice test)
3. Same name = Same group (for radios)
4. Always use <label> = Better for everyone
5. Submit = Send the form
6. Reset = Clear the form (use sparingly!)

You now have the power to let users make choices on your websites. Go build something amazing!