Week 6: More Form Controls

Expand your form-building skills with checkboxes, radio buttons, dropdowns, and more.

Explore Chapter 6

Chapter 6: Advanced Form Elements

Checkboxes and Radio Buttons

Checkboxes (`type="checkbox"`)

Checkboxes allow users to select zero or more options from a set.

<form action="/process" method="post">
  <p>Select your interests:</p>
  <input type="checkbox" id="interest1" name="interests" value="music">
  <label for="interest1">Music</label><br>

  <input type="checkbox" id="interest2" name="interests" value="sports" checked> <!-- 'checked' pre-selects -->
  <label for="interest2">Sports</label><br>

  <input type="checkbox" id="interest3" name="interests" value="reading">
  <label for="interest3">Reading</label><br><br>

  <input type="submit" value="Submit Choices">
</form>

Key points for checkboxes:

Each checkbox should have a unique `id` for its corresponding ``.
Checkboxes that belong to the same group should share the same `name` attribute.
The `value` attribute specifies the data sent to the server if the checkbox is checked.
The boolean `checked` attribute makes the checkbox selected by default.

Radio Buttons (`type="radio"`)

Radio buttons allow users to select exactly one option from a set.

<form action="/process" method="post">
  <p>Choose your preferred contact method:</p>
  <input type="radio" id="contact_email" name="contact_pref" value="email" checked>
  <label for="contact_email">Email</label><br>

  <input type="radio" id="contact_phone" name="contact_pref" value="phone">
  <label for="contact_phone">Phone</label><br>

  <input type="radio" id="contact_mail" name="contact_pref" value="mail">
  <label for="contact_mail">Mail</label><br><br>

  <input type="submit" value="Submit Preference">
</form>

Key points for radio buttons:

All radio buttons within the same group must have the same `name` attribute. This is how the browser knows only one can be selected.
Each radio button needs a unique `id` for its ``.
The `value` attribute is crucial for identifying which option was selected when the data is sent.
Use the `checked` attribute to set a default selection.

Dropdown Lists (<select> and <option>)

The <select> element creates a dropdown list, allowing users to choose one (or multiple, with the `multiple` attribute) options from a predefined list contained within <option> tags.

<form action="/process" method="post">
  <label for="country_select">Choose a country:</label>
  <select id="country_select" name="country">
    <option value="">--Please choose an option--</option> <!-- Placeholder option -->
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk" selected>United Kingdom</option> <!-- 'selected' pre-selects -->
    <option value="australia">Australia</option>
  </select>
  <br><br>

  <input type="submit" value="Submit Country">
</form>

The <select> element needs `name` and `id` attributes.
Each <option> represents one choice in the list.
The `value` attribute of the selected <option> is sent to the server. If omitted, the text content of the option is sent.
The boolean `selected` attribute marks an option as the default choice.
You can group related options using the <optgroup> tag with a `label` attribute.

Text Areas (<textarea>)

The <textarea> element defines a multi-line text input control, suitable for longer messages or comments.

<form action="/process" method="post">
  <label for="message">Your Message:</label><br>
  <textarea id="message" name="user_message" rows="5" cols="40" placeholder="Enter your comments here..."></textarea>
  <br><br>

  <input type="submit" value="Send Message">
</form>

Unlike <input>, <textarea> is not an empty tag; it has opening and closing tags. Any text between the tags becomes the default content.
The `rows` attribute specifies the visible number of text lines.
The `cols` attribute specifies the visible width in average character widths.
Use CSS for more precise control over size and styling.
It requires `name` and `id` attributes like other form controls.
The `placeholder` attribute works similarly to text inputs.

Grouping Form Controls (<fieldset> and <legend>)

You can group related form controls together using the <fieldset> element. This improves structure and accessibility.

The <legend> element provides a caption or title for the <fieldset> group.

<form action="/process" method="post">
  <fieldset>
    <legend>Personal Information</legend>

    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="firstName"><br><br>

    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lastName"><br><br>
  </fieldset>
  <br>

  <fieldset>
    <legend>Contact Preference</legend>

    <input type="radio" id="pref_email" name="preference" value="email" checked>
    <label for="pref_email">Email</label><br>

    <input type="radio" id="pref_phone" name="preference" value="phone">
    <label for="pref_phone">Phone</label>
  </fieldset>
  <br>

  <input type="submit" value="Submit All">
</form>

Browsers typically render a border around the <fieldset> with the <legend> embedded in the top border. This visual grouping helps users understand the form's structure.