Qarpeo LogoInstitute

<select>

The HTML <select> element generates a dropdown menu that lets users select from a list of choices, with individual options specified using <option> elements.

<select> Tag

The <select> tag is used to create a dropdown list that allows users to pick one or more options. It is commonly found in forms where predefined choices are needed for user selection.

Syntax

index.html
<select name="name" id="id" multiple>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3" selected>Option 3</option>
</select>

<select> Demo

index.html
<form>
  <label for="fruit">Choose a fruit:</label>
  <select id="fruit" name="fruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana" selected>Banana</option>
    <option value="grape">Grape</option>
  </select>
  <input type="submit" value="Submit">
</form>

Attributes

  • name: Specifies the name of the <select> element for form submission.
  • id: Assigns a unique identifier to the <select> element for use in CSS and JavaScript.
  • multiple: Allows users to select multiple options instead of just one.

Key Points

  • <option>: Defines each choice within the dropdown list. The value attribute determines what is submitted, and selected preselects an option.
  • Multiple Selections: The multiple attribute enables selecting multiple options, typically by holding the Ctrl key (Cmd on Mac) while clicking.
  • Form Behavior: When the form is submitted, the selected values are included in the form data.

Conclusion

The <select> tag is essential for creating dropdown menus in forms, enabling users to choose from predefined options. It supports attributes like multiple for selecting multiple options, and the value attribute in <option> determines the submitted data. With the selected attribute, users can pre-select a default option.

<search>

The HTML (<input type="search">) element generates a search box, enabling users to enter and submit search queries, often featuring enhancements for a better search experience.

<summary>

The HTML (<summary>) element serves as a summary or title for a (<details>) element, allowing users to click and expand it to show or hide further information, thereby improving interactivity and content organization.