html
  1. html-select-tag
PreviousNext

HTML <select> Tag

  • The HTML <select> tag renders a dropdown list of options for the user to choose from.
  • It is a form control element that allows the user to select one or more options from a list.

Syntax

The basic syntax for HTML <select> tag is as follows:

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

Example

Consider the following example:

<label for="animals">Choose an animal:</label>

<select id="animals" name="animals">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="fish">Fish</option>
  <option value="bird">Bird</option>
</select>
Try Playground

Explanation

  • The <label> tag is used to describe the purpose of the dropdown list. The "for" attribute of the <label> tag must match the "id" attribute of the <select> tag.
  • The <select> tag defines the dropdown list.
  • The <option> tag is used to define the available options in the dropdown list. The "value" attribute of the <option> tag defines the value that will be sent to the server when the form is submitted. The text between the opening and closing <option> tags is what the user will see in the dropdown list.

Use

The HTML <select> tag can be used in various scenarios, like:

  • Choosing a color, size, or type of product on an online store.
  • Selecting a payment method, shipping method, or shipping address on a checkout page.
  • Selecting a date, time, or timezone on a booking or reservation form.

Important Points

  • The "name" attribute of the <select> tag is used to group the dropdown list with other form data when the form is submitted.
  • The "multiple" attribute of the <select> tag allows the user to select more than one option from the list.
  • The "disabled" attribute of the <select> tag can be used to disable the dropdown list so that the user cannot interact with it.

Summary

The HTML <select> tag is a useful form control element for allowing the user to select one or more options from a list. With a few attributes and some basic HTML, you can create a dropdown list that is easy for the user to interact with and provides valuable data for your web application.

<section> Tag<small> Tag
Published on: