Open In App

HTML select Tag

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
1 Likes
Like
Report

The HTML <select> tag is used to create a drop-down list for user input, containing <option> tags to display the available choices. It provides functionality for selecting one or multiple options from a list.

Note: The <select> tag is used in a form to receive user responses.

Syntax

<select>
    <option>
    </option>
    ...
</select>
HTML 
<html>
<body>
	<form>
		<label for="fruits">Choose a fruit:</label>
		<select id="fruits" name="fruits">
			<option value="apple">Apple</option>
			<option value="banana">Banana</option>
			<option value="cherry">Cherry</option>
		</select>
	</form>
</body>
</html>

In this example:

  • The <label> element with the for attribute associates the label with the <select> element, enhancing accessibility.
  • The <select> element with the id and name attributes defines the drop-down list, containing multiple <option> elements representing the available choices.

Attributes

The table below shows the required attributes and their respective description:

AttributeDescription
autofocusAutomatically focuses the dropdown when the page loads.
disabledDisables the dropdown, making it un-clickable and unusable.
formSpecifies one or more forms that the select element belongs to.
multipleAllows the user to select multiple values from the dropdown.
nameDefines a name for the dropdown, used to reference form data or in JavaScript.
requiredEnsures the user selects a value before submitting the form.
size

Defines the number of visible options in the dropdown list.

Basic Dropdown Menu

HTML 
<html>
<head>
</head>
<body>
	<form>
		<label for="colors">Choose a color:</label>
		<select id="colors" name="colors">
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</select>
	</form>
</body>
</html>


In this example:

  • The <select> element with the id and name attributes defines a dropdown menu labeled "Choose a color:".
  • The <option> elements provide the selectable options: Red, Green, and Blue.

Styled Dropdown Menu

HTML 
<html>
<head>
	<style>
		label {
			font-family: Arial, sans-serif;
			font-size: 14px;
		}
		select {
			width: 150px;
			padding: 5px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-family: Arial, sans-serif;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<form>
		<label for="cars">Select a car brand:</label>
		<select id="cars" name="cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="mercedes">Mercedes</option>
			<option value="audi">Audi</option>
		</select>
	</form>
</body>
</html>

In this example:

  • The <select> element is styled with a fixed width, padding, border, and border-radius to enhance its appearance.
  • The font family and size are set for both the <label> and <select> elements to ensure consistent typography.

Dropdown Menu with Placeholder

HTML 
<html>
<head>
	<style>
		select {
			width: 200px;
			padding: 6px;
			border: 1px solid #888;
			border-radius: 5px;
			background-color: #f9f9f9;
			font-family: Verdana, sans-serif;
			font-size: 13px;
		}
		option[disabled] {
			color: #999;
		}
	</style>
</head>
<body>
	<form>
		<label for="fruits">Choose a fruit:</label>
		<select id="fruits" name="fruits">
			<option value="" disabled selected>Select a fruit</option>
			<option value="apple">Apple</option>
			<option value="banana">Banana</option>
			<option value="cherry">Cherry</option>
		</select>
	</form>
</body>
</html>

In this example:

  • The first <option> serves as a placeholder with the text "Select a fruit," is disabled, and is selected by default.
  • The <select> element is styled with specific dimensions, padding, border properties, background color, and font settings to improve usability and aesthetics.

Best Practices for Using the HTML <select> Tag

  • Associate Labels Clearly: Use the <label> element with the for attribute matching the <select> element's id to enhance accessibility and usability.
  • Provide a Default Option: Include a default <option> with a value of an empty string and the selected attribute to prompt users to make a selection.
  • Group Related Options: Utilize the <optgroup> element to categorize options within the dropdown, improving navigation for users.

S

shubham_singh
Improve
Article Tags :

Explore

Lightbox