select ... ⁄select

Share it

select intro select browser display select parents - children select Placeholder Label Option select Constraints select Example select syntax select autofocus attribute select disabled attribute select multiple attribute select required attribute select 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

is an optional element
multiple select elements allowed per HTML5 document

Display & support select

display in browser »video
display type: inline

Parents, children select

select nested within elements »select parents
elements nested within select »select children
»examples

Attributes select

required: none
optional: specific attributes, global attributes, event attributes

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

Constraints:

Find out when you can select:
- any option
- only 1 option
- multiple options
- at least 1 option
- or have pre-selected option(s) »video

Example

<select autofocus name="options_group" required multiple size="6"> ... <⁄select>
Example interpreted and demonstrated on this »video

Syntax select

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

Attributes and Values select (comma separated)

<select	attribute	=	"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: W3C ⁄ WHATWG