RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-select-tag/ below:

HTML select Tag - GeeksforGeeks

HTML select Tag

Last Updated : 12 Jul, 2025

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:

Attribute Description autofocus Automatically focuses the dropdown when the page loads. disabled Disables the dropdown, making it un-clickable and unusable. form Specifies one or more forms that the select element belongs to. multiple Allows the user to select multiple values from the dropdown. name Defines a name for the dropdown, used to reference form data or in JavaScript. required Ensures 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4