Select Tag in HTML5
in this article I am going to describe about the implementation and use of Select Tag in HTML5.
Select Tag in HTML5
The <select> element is used to create a drop-down list. This tag is used in conjunction with the <option> tag to produce a list of options.
The <option> tag inside the <select> tag define the available options in the list. We can use <optgroup> tag within <select> tag for grouping option.
Note: The <select> element is a form control and can be used in a form to collect user input.
Browser Support
<select> tag is supported in all major browsers.
Syntax
Syntax of <select> tag in HTML5
<select>
<option>Text</option>
<option>Text</option>
</select>
Attributes of <select> tag in HTML5
Attribute |
Value |
Description |
autofocus |
autofocus |
Specifies that the drop-down list should automatically get focus when the page loads |
disabled |
disabled |
Specifies that a drop-down list should be disabled |
form |
form_id |
Defines one or more forms the select field belongs to |
name |
name |
Specify the name of select element. |
multiple |
multiple |
Specify user can select multiple options |
required |
required |
Specifies that the user is required to select a value before submitting the form |
size |
number |
Specify number of visible option for user in selection list. |
HTML5 has added some new attributes suchas autofocus,form and required.
Example of <select> tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Select Tag</title>
</head>
<body>
<h1>Example of select tag in HTML5.</h1>
<form id="form1">
<table style="width: 50%">
<tr>
<td>
<label>Id</label></td>
<td>
<input type="text"></td>
</tr>
<tr>
<td>
<label>Name</label></td>
<td>
<input type="text"></td>
</tr>
<tr>
<td>Disabled attribute</td>
<td>
<select disabled>
<option>Male</option>
<option>Female</option>
</select></td>
</tr>
<tr>
<td>AutoFocus Attribute</td>
<td>
<select autofocus>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<input type="submit" value="Submit" />
</td>
</tr>
<tr>
<td>Multiple Attribute</td>
<td>
<select multiple="multiple">
<option>Cold Drink</option>
<option>Burger</option>
<option>Pizza</option>
<option>Pao Bhaji</option>
</select>
</td>
</tr>
<tr>
<td>Size Attribute</td>
<td>
<select size="3">
<option>Cold Drink</option>
<option>Burger</option>
<option>Pizza</option>
<option>Pao Bhaji</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
Output