HTML - <select> Tag

Quiz

Introduction to <select> Tag

The HTML <select> tag is used to create dropdown lists in online forms, allowing users to choose one or more options from a list. The <select> tag, contains <option> tags.

For identification and form submission, attributes like name and id are required. JavaScript enhances functionality while CSS applies styling. Testing on different devices ensures a consistent user experience.

Syntax

Following is the syntax of <select> tag −

<select>
  ....
</select>

Attributes

The HTML select tag supports Global and Event attributes of HTML along with some specific attributes listed bellow.

Attribute	Value	Description
disabled	disabled	Disables the input control. The button will not accept user changes, cannot receive focus, and will be skipped when tabbing.
autofocus	autofocus	Specifies that the drop-down list should automatically receive focus when the page loads.
form	form_id	Specifies one or more forms.
multiple	multiple	When set, it allows multiple items to be selected simultaneously.
name	name	Assigns a name to the input control.
required	required	Before submitting the form, the user must select a value; otherwise, it will not be proceed.
size	number	Specifies the number of visible items in the drop-down list.

Example: Creating Dropdown

In the following program, we use the HTML <select> tag to create a dropdown list. The HTML code includes options for HTML, CSS, and JavaScript, along with a submit button.

<!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>

Example: Form Selection

Here is another example of the HTML <select> tag. We create a "select" element using the select tag that defines the list options within the "form" element. The HTML code includes a form with text, email, and number inputs, a language dropdown, and a submit button.

<!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>

Example: Disable Select Element

In this program, we use the HTML <select> tag to define a list of options. The "disabled" attribute is used to disable the "select" element. The HTML code creates a disabled dropdown list with options for India, United States, Australia, and Germany.

<!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>

Example: Styling Select Elements

In this example, we use the HTML <select> tag to define a list of options. CSS is applied to style the select element. The HTML code creates a styled dropdown list with options for HTML, JavaScript, Java, Python, and C++, labeled as follows.

<!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

Print Page