HTML - <select> Tag

HTML <select> tag is used to create dropdown lists in online forms. Users are able to choose one or more selections from a list of choices. Within the <select> tag, it is made up of <option> tags.

For identification and form submission, attributes like name and id are needed. JavaScript can improve functionality while CSS can apply styling. A consistent user experience is guaranteed via testing on different devices.

Syntax

<select>
  ....
</select>

Attribute

HTML select tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
disabled	disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
autofocus	autofocus	Specifies that on page load the drop-down list should automatically get focus.
form	form_id	Specifies one or more forms.
multiple	multiple	When set, it specifies that multiple items can be selected at a time
name	name	Assigns a name to the input control.
required	required	Before submitting the form the user is required to select a value, else it won't proceed ahead.
size	number	Defines the number of visible items in the drop-down list

Examples of HTML select Tag

Bellow examples will illustrate the usage of select tag. Where, when and how to use it to create selectable items and how we can style that select section using CSS.

Dropdown using select Tag

In the following program, we are using the HTML <select> tag to create a list of options(dropdown).

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a select tag-->
   <p>Simple select element</p>
   <select>
      <option value="">--Chose your option--</option>
      <option value="">HTML</option>
      <option value="">CSS</option>
      <option value="">JavaScript</option>
   </select>
   <button>Submit</button>
</body>
</html>

Select Items within Form Element

Following is another example of the HTML <select> tag. Here, we are creating a "select" element using the <select> tag to define the list options within the "form" element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a form-->
   <h3>HTML "select" element example</h3>
   <form> Name: <input type="text">
      <br> Email: <input type="email">
      <br> Mobile: <input type="number">
      <br> Language: <select>
      <option value="">--Choose language--</option>
      <option value="">Hindi</option>
      <option value="">English</option>
      </select>
      <button>Submit</button>
   </form>
</body>
</html>

Disable Select Element

In this program, we are using the HTML <select> tag to define the list of options. We are using the "disabled" attribute to disable the "select" element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <!--create a select tag-->
   <p>HTML 'select' element with 'disabled' attribute</p>
   <label for="">Choose your country:-</label>
   <select disabled>
      <option value="">India</option>
      <option value="">United state</option>
      <option value="">Australia</option>
      <option value="">Germany</option>
   </select>
</body>
</html>

Styling Select Elements

In this example, we are defining the list of options using the HTML <select> tag. We are using the CSS to style the created select element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
      select {
         width: 200px;
         height: 30px;
         border: 2px solid blue;
         border-radius: 10px;
         padding: 5px;
      }

      select option {
         color: green;
      }
   </style>
</head>
<body>
   <!--create a select tag-->
   <p>HTML 'select' element with CSS</p>
   <label for="">Choose your favorite computer language:-</label>
   <select>
      <option value="">HTML</option>
      <option value="">JavaScript</option>
      <option value="">Java</option>
      <option value="">Python</option>
      <option value="">C++</option>
   </select>
</body>
</html>

Supported Browsers

Tag
select	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm