Introduction
The select element creates a drop-down list.
This element is used in conjunction with the <option> element to produce a list of options that the user can choose from. The <select> tag is supported in all major browsers. You can use <optgroup> tag within <select> tag for grouping
option.
Syntax
<select>
<option>Text</option>
<option>Text</option>
</select >
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=)
sign, with the value surrounded by double-quotes.
There are 3 kinds of attributes that you can add to your
HTML tags: Element-specific, global, and event handler content attributes. The attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Attributes Introduced by
HTML5
Attributes | Description |
autofocus (New) | Automatically gives focusto this control when the page loads. This allows the user to start usingthe control without having to select it first. |
disabled | Disables the inputcontrol. The button won't accept changes from the user. |
multiple | When present, it specifiesthat multiple items can be selected at a time. |
Name | Defines a unique name forthe drop-down list. |
size | Defines the number ofvisible items in the drop-down list. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
HTML5Global Attributes |
accesskey | draggable | style |
class | hidden | tabindex |
dir | spellcheck | |
contenteditable | id | title |
contextmenu | lang | |
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
onabort | onerror* | onmousewheel |
onblur* | onfocus* | onpause |
oncanplay | onformchange | onplay |
oncanplaythrough | onforminput | onplaying |
onchange | oninput | onprogress |
onclick | oninvalid | onratechange |
oncontextmenu | onkeydown | onreadystatechange |
ondblclick | onkeypress | onscroll |
ondrag | onkeyup | onseeked |
ondragend | onload* | onseeking |
ondragenter | onloadeddata | onselect |
ondragleave | onloadedmetadata | onshow |
ondragover | onloadstart | onstalled |
ondragstart | onmousedown | onsubmit |
ondrop | onmousemove | onsuspend |
ondurationchange | onmouseout | ontimeupdate |
onemptied | onmouseover | onvolumechange |
onended | onmouseup | onwaiting |
autofocus (New)
This is a new
attribute in HTML5. This tag is used to
automatically gives focus to this control when the page loads.
Syntax
<select autofocus="autofocus">
For Example
- <select autofocus="autofocus">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
Disabled attribute
The disabled attribute specifies that a drop-down list
should be disabled. A disabled drop-down list is unusable and un-clickable.
Syntax
<select disabled="disabled">
For Example
- <select disabled ="disabled">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
Multiple Attribute
The multiple attribute specifies that multiple options
can be selected at the same time.
Syntax
<select multiple="multiple">
For Example
- <select multiple="multiple" name="D1">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
Size Attribute
The size attribute specifies the number of visible
options in a drop-down list.
Syntax
<select size="value">
For Example
- <select size="3">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
Using all Attribute
For Example
- <html>
- <body>
- <table style="width: 49%">
- <tr>
- <td>
- Disabled attribute
- </td>
- <td>
- <select disabled="disabled">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- AutoFocus Attribute
- </td>
- <td>
- <select autofocus="autofocus">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- Multiple Attribute
- </td>
- <td>
- <select multiple="multiple" name="D1">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
- Size Attribute
- </td>
- <td>
- <select size="3">
- <option value="volvo">-Select Color-</option>
- <option value="volvo">Red</option>
- <option value="saab">Green</option>
- <option value="opel">Pink</option>
- <option value="audi">Blue</option>
- </select>
- </td>
- </tr>
- </table>
- </body>
- </html>
Internet explorer
Fire Fox