Contents
HTML select: Main Tips
- HTML
selecttags define aselectelement - a form control with a menu of options. - Each option is wrapped in
<option>tags. - You must include both starting and ending
selecttags. - Not only HTML
selecttags have eight tag-specific attributes, they also support global ones.
Usage of HTML select Tags
Wrapping content with HTML select tags creates a dropdown list with one or more options to select:
<select name="housepets">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="llama">Llama</option>
<option value="rabbit">Rabbit</option>
<option value="animal">Animal</option>
</select>It is mostly used within a <form> element to collect user input.
HTML select element contains <option> elements that define menu options. Each of them should have their own value as an attribute. If it is not included, the text content of the element is taken as the value.
Mostly Used select Tag Attributes
There are eight tag-specific attributes commonly used with HTML select tags.
autocomplete specifies if the browser can autofill field values:
<select name="holiday_destination" autocomplete="off">
<option value="bra">Sao Paulo</option>
<option value="cub">Havana</option>
<option value="fji">Suva</option>
<option value="jam">Kingston</option>
<option value="mdv">Male</option>
</select>autofocus focuses the drop-down list automatically when the page loads:
<select name="vehicles" autofocus>
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="bicycle">Bicycle</option>
</select>Note: only one form element can have autofocus in a single page.
disabled disables the drop-down list:
<select name="mediatype" disabled>
<option value="mp4">MP4</option>
<option value="mov">MOV</option>
<option value="flv">FLV</option>
</select>form links the selected element to one or more forms:
<form action="process.php" id="language">
Primary Language: <input type="text" name="lang">
<input type="submit">
</form>
<select name="expertise" form="language">
<option value="speakwrite">Speak/Write</option>
<option value="speak">Speak</option>
<option value="write">Write</option>
</select>multiple enables selection of multiple options at once:
<select name="languages" multiple>
<option value="english">English</option>
<option value="french">French</option>
<option value="russian">Russian</option>
<option value="tamil">Tamil</option>
<option value="spanish">Spanish</option>
</select>Note: most browsers will replace the dropdown menu with a scrolling list box if you enable multiple.
name defines the name for the HTML dropdown menu:
<select name="department">
<option value="parks">Parks</option>
<option value="rnd">R&D</option>
<option value="finance">Finance</option>
<option value="rec">Recreational</option>
<option value="purchasing">Purchasing</option>
</select>required makes the selection of an option within a list mandatory before submitting the form:
<select name="pet" required>
<option value="lama">Lama</option>
<option value="racoon">Racoon</option>
<option value="mouse">Mouse</option>
<input type="submit">
</select>If the menu is presented by the browser as a scrolling list box, size defines the number of options to be displayed:
<select name="meals" size="2">
<option value="eggs">Eggs</option>
<option value="salad">Salad</option>
<option value="bread">Bread</option>
<option value="ham">Ham</option>
</select>Default Option vs. Placeholder
In the examples we reviewed, one option was always shown from the start. When using HTML select, default option is usually the first of the selection. If you wish to choose a different option as HTML select default value, you need to add the selected keyword:
<select name="lunch">
<option value="chic">Chicken pot pie</option>
<option value="beef">Beef stew</option>
<option value="pizza" selected>Pepperoni pizza</option>
<option value="jelly">Jelly beans</option>
</select>If you don't want any of the options to show as default, you can also create an HTML select placeholder. To do that, use both selected and disabled on an option that has no value:
<select name="dessert">
<option value="" disabled selected>Please choose one</option>
<option value="choc">Chocolate cake</option>
<option value="mango">Mango sorbet</option>
<option value="car">Caramel pudding</option>
<option value="pick">Pickles</option>
</select>