HTML Selection Inputs

Table of Contents +

In previous article, we learned about HTML number inputs. Now, we will learn HTML selection inputs, which allow users to select options from a list.

What are Selection Inputs?

Selection inputs are HTML elements that allow users to choose one or more options from a predefined options list.

Types of Selection Inputs

  • Select: A select allows users to select one option from a list of options.
  • Checkboxes: Checkboxes allow users to select multiple options from a list.
  • Radio Buttons: Radio buttons allow users to select one option from a group of options.

🏗️ HTML <select> Tag

We use the <select> and <option> tags to create a dropdown list in HTML.

  • <select> tag is a container tag that wraps around the options.
  • <option> tag is a self-closing tag that defines an individual option in the dropdown.

Example of HTML Select Tag

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

The output of the above code will look like this:

Output

🏷️ Attributes of Select Tag

The <select> tag has several attributes that can be used to enhance its functionality:

Attribute Description Possible Values
name Defines the name of the select element, used for form submission Any valid string
id Defines a unique identifier for the select element Any valid string
multiple Allows multiple options to be selected at once true, false (default is false)

optgroup Tag

When you have a long list of options in a select dropdown, you can use the <optgroup> tag to group related options together. This makes it easier for users to find what they are looking for.

Example of HTML Optgroup Tag

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

The output of the above code will look like this:

Output

🏷️ HTML Checkbox Input

Checkboxes allow users to select one or more options from a list. We use the <input> tag with type="checkbox" to create checkboxes. Also we can use <label> tag to provide a label for each checkbox.

Example of HTML Checkbox Input

<input type="checkbox" id="option1" name="options" value="option1">
<label for="option1">Option 1</label><br>


<input type="checkbox" id="option2" name="options" value="option2">
<label for="option2">Option 2</label><br>


<input type="checkbox" id="option3" name="options" value="option3">
<label for="option3">Option 3</label><br>

The output of the above code will look like this:

Output

As you can see, we have created three checkboxes with labels. Users can select multiple options by checking the boxes.

🏷️ Attributes of Checkbox Input

input tag with type="checkbox" can be used with several attributes to change its behavior:

Attribute Description Possible Values
type Specifies the type of input (e.g., checkbox) checkbox
name Defines the name of the input, used for form submission Any valid string
value Sets the value that will be submitted if the checkbox is checked Any valid string
checked Indicates whether the checkbox is checked by default Boolean (true/false)

🏷️ HTML Radio Button Input

Radio buttons allow users to select one option from a group of options. We use the <input> tag with type="radio" to create radio buttons. Also we can use <label> tag to provide a label for each radio button.

Example of HTML Radio Button Input

<input type="radio" id="radio1" name="radioGroup" value="option1">
<label for="radio1">Option 1</label><br>


<input type="radio" id="radio2" name="radioGroup" value="option2">
<label for="radio2">Option 2</label><br>


<input type="radio" id="radio3" name="radioGroup" value="option3">
<label for="radio3">Option 3</label><br>

The output of the above code will look like this:

Output

As you can try checking the radio buttons, you will notice that only one option can be selected at a time within the same name group.

🏷️ Attributes of Radio Button Input

input tag with type="radio" can be used with several attributes to change its behavior:

Attribute Description Possible Values
type Specifies the type of input (e.g., radio) radio
name Defines the name of the input, used for form submission Any valid string
value Sets the value that will be submitted if the radio button is selected Any valid string
checked Indicates whether the radio button is selected by default Boolean (true/false)

Difference between Checkboxes and Radio Buttons

Remember that Checkboxes allow multiple selections, while radio buttons allow only one selection from a group.

📝 Best Practices for Selection Inputs

  • Use clear labels: Always provide a label for each selection input to help users understand what they are selecting.
  • Group related options: Use the same name attribute for radio buttons to group them together, and use <optgroup> for grouping options in a select dropdown.
  • Use proper selections types: Use checkboxes for multiple selections, radio buttons for single selections, and select dropdowns for long lists of options.

🛠️ Try it Yourself

  1. Create a folder named interactive-elements.
  2. Create an HTML file named selection-inputs.html.
  3. Create a basic HTML file with the title “Selection Inputs”. For example: a. Gender Selection b. Hobbies Selection c. Country Selection

🎊 What we have learned

  • We learned about HTML selection inputs like <select>, checkboxes, and radio buttons.
  • We learned how to create dropdowns using the <select> and <option> tags.
  • We learned how to create checkboxes and radio buttons using the <input> tag with type="checkbox" and type="radio".
  • We learned about the attributes of selection inputs and how to use them effectively.

🚀 What’s Next?

Next we will learn about HTML Date Time Inputs which allow users to enter date values in a form.

Previous HTML Number Inputs Next HTML Date and Time Inputs

Share & Connect

Share on LinkedIn