HTML Tutorial

HTML Tag <select>:

Understanding <select>

The <select> tag creates a dropdown list that presents a set of options to the user. It is an essential element for creating forms and interactive elements in web pages.

Usage of <select>

  1. Define the list: Use the <option> tag inside the <select> tag to define each option in the list. Each <option> tag should contain the text to be displayed in the dropdown and the corresponding value.
  2. Set attributes: Add attributes to the <select> tag to customize its appearance and behavior (see below).
  3. Display the dropdown: The <select> tag renders as a dropdown list on the web page. Users can click the dropdown to view the options and select one.

Attributes of <select>

  • autofocus: Automatically focus on the dropdown when the page loads.
  • disabled: Disables the dropdown, preventing user interaction.
  • multiple: Allows users to select multiple options.
  • name: Specifies the name of the dropdown for form submission.
  • required: Makes the dropdown a required field in a form.
  • size: Sets the number of options to be displayed in the dropdown without scrolling.
  • value: Specifies the initially selected option (matches the value attribute of the <option> tag).

Examples with <select>

Consider this HTML code:

<select name="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

This code creates a dropdown list with three options: "Apple", "Banana", and "Orange". It is named "fruits" and the default selected option is "Apple".

Exploring the <select> Tag

To explore the <select> tag, you can use the following steps:

  1. Create an HTML file and include the code above.
  2. Save the file and open it in a web browser.
  3. You should see a dropdown list with the options "Apple", "Banana", and "Orange".
  4. Click on the dropdown to view the options and select one.

Accessibility Considerations

  • Use descriptive labels for the dropdown and options to assist screen readers.
  • Ensure that the dropdown is accessible via keyboard navigation.
  • Provide clear instructions for using the dropdown.