Multiple Choice and Lists

5.1 The <select> Element

The <select>, <option>, and <optgroup> elements are used to create dropdown lists and multi-select lists in HTML forms. With these elements, users can pick one or several options from a predefined set of values.

The <select> element is used to create a dropdown list. It contains one or more <option> elements that represent the possible options a user can choose from.

Usage example:

    
      <label for="country">Choose a country:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Main attributes of <select>

The name attribute: sets the name of the form element, which will be sent to the server along with the selected value.

    
      <select name="country"></select>
    
  

The id attribute: sets a unique identifier for the element, which is used to associate it with a <label> element.

    
      <select id="country" name="country"></select>
    
  

The multiple attribute: allows the user to select multiple options simultaneously. Visually, the list will be shown as multi-line.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

The size attribute: sets the number of visible rows in the dropdown list. This is useful for creating scrollable lists.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 The <option> Element

The <option> element is used inside a <select> to define each option that a user can select.

Usage example:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

Main attributes of <option>:

The value attribute: sets the value that will be sent to the server if this option is selected.

    
      <option value="red">Red</option>
    
  

The selected attribute: indicates whether this option should be selected by default.

    
      <option value="green" selected>Green</option>
    
  

The disabled attribute: makes this option unavailable for selection.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 The <optgroup> Element

The <optgroup> element is used to group related options within a <select> element. It allows you to logically divide options into categories, making the dropdown list more organized and understandable.

Usage example:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Main attributes of <optgroup>:

The label attribute: sets the title for the group of options.

    
      <optgroup label="German Cars"></optgroup>
    
  

The disabled attribute: makes all options within this group unavailable for selection.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Helpful tips for using <select>, <option> and <optgroup>

1. Logical grouping: use <optgroup> to logically group related options: it makes the form more user-friendly.
2. Multiple choice: if you need to allow a user to select multiple options, use the multiple attribute on <select>.
3. Accessibility: use id and label attributes to enhance the accessibility of form elements. Proper use of label improves form interaction for all users, including those using assistive technologies.
4. Styling: use CSS to improve the appearance of dropdown and multi-select lists. For example:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
    
  

1

Task

Frontend SELF EN, level 8, lesson 5

Locked

Country Selection

Country Selection

Open

1

Task

Frontend SELF EN, level 8, lesson 5

Locked

Car Selection

Car Selection

Open