W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

select ... ⁄select

Share it

select intro select browser display select parents - children select Placeholder Label Optionselect Constraintsselect Exampleselect syntaxselect autofocus attributeselect disabled attributeselect multiple attributeselect required attributeselect size attribute

HTML5 select element

The select element, a control which allows you to select one or multiple options from a predefined set of options. »video

About select

Display & support select

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children select

Attributes select

If required attribute present, multiple absent, and size attribute also absent or has the value="1", then a placeholder label option is required. »video



Syntax select

1<select> ... </select> »video

Attributes and Values select (comma separated)

<selectattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.autofocus="",  , autofocus»video<select autofocus> ... <⁄select>
2.disabled= "",  , disabled»video<select disabled> ... <⁄select>
3.form=form_id-<select form="form_id"> ... <⁄select>
4.multiple= "",  , multiple»video<select multiple> ... <⁄select>
5.name=string (element_name)-<select name="element_name"> ... <⁄select>
6.required="",  , required»video<select required> ... <⁄select>
7.size=number»video<select size="3"> ... <⁄select>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<select accesskey="h"> ... </select>
2.class=class name»html »img<select class="class_name"> ... </select>
3.contenteditable="",  , true, false »html<select contenteditable="true"> ... </select>
4.contextmenu=menu id value»html<select contextmenu="menu_id_value"> ... </select>
5.data-*= value -<select data-http-error="404"> ... </select>
6.dir=ltr, rtl, auto»html<select dir="ltr"> ... </select>
7.draggable= true,  , false»img<select draggable="false"> ... </select>
8.dropzone= copy, move, link, string:, file: -<select dropzone="copy"> ... </select>
9.hidden= "",  , hidden»html »img<select hidden="hidden"> ... </select>
10.id=id name»html »img<select id="unique_id_name"> ... </select>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<select lang="en"> ... </select>
17.spellcheck="",  , true, false»html<select spellcheck="true"> ... </select>
18.style=CSS property:value»html »img<select style="color:red"> ... </select>
19.tabindex= integer »img<select tabindex="3"> ... </select>
20.title=text»html »link»style »abbr»dfn
»img »meter
<select title="html page"> ... </select>
21.translate="", yes, no»html »img<select translate="yes"> ... </select>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration select element

HTML5 select element: mark up a drop-down list of options

min video details
00:00 video tutorial: select tag
00:05 select element represents a control which allows you to select one or multiple options from a given set of options
00:14 the select control displaying in browser but with no option inside it → nothing to select
00:18 adding the set of options inside select element, set from which we are able to select one option by default or multiple options IF the attribute 'multiple' is specified on select element
00:22 1. the set of options in this case is composed by option elements, children of select element

(2. the set of options, IF GROUPED, is composed by option element(s) children of optgroup element inside select element)
00:27 example1: selecting an option: GMT+1
00:31 this option has been selected
00:34 example2: selecting another option: GMT+10
00:38 another example

For more information about the select element, please see the specs: W3CWHATWG