HTML - <select> Tag

The dropdown lists in online forms are made using the HTML <select> tag. 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

Following is the syntax for HTML <select> tag −

<select>....</select>

Specific Attributes

The HTML <select > tag also supports the following additional attributes −

S.No. Attribute & Description
1

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.
2

autofocus

Specifies that on page load the drop-down list should automatically get focus.
3

form

Specifies one or more forms.
4

multiple

When set, it specifies that multiple items can be selected at a time
5

name

Assigns a name to the input control.
6

required

Before submitting the form the user is required to select a value, else it won't proceed ahead.
7

size

Defines the number of visible items in the drop-down list

Example

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>

When we run the above code, it will generate an output consisting of the dropdown menu on the webpage.

Example

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>

On running the above code, the output window will pop up displaying the dropdown menu within the form tag.

Example

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>

When we run the above code, it will generate an output consisting of the dropdown menu used with a disabled attribute displayed on the webpage.

Example

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;
      }

      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>

On running the above code, the output window will pop up displaying the dropdown menu applied with a CSS applied to it on the webpage.

html_tags_reference.htm
Advertisements