webdevlinux - logo Web Dev Linux

Select & options

Select options are used to select one or more options from a list. In this chapter, you will learn the different ways to use select options in an HTML form.

Select options HTML select options

Try the example below.

FILE : select.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Select</title>
</head>
<body>
<form>
<p>Select your birthday : 
	<select>
		<option>yyyy</option>
		<option>1988</option>
		<option>1989</option>
		<option>1990</option>
	</select>
	<select>
		<option>mm</option>	
		<option>Jan</option>	
		<option>Feb</option>	
	</select>
	<select>
		<option>dd</option>	
		<option>1</option>	
		<option>2</option>	
	</select>
</p>
<p>Select your gender : 
	<select size="2">
		<option>Female</option>	
		<option selected>Male</option>	
	</select>
</p>
<p>Social networks you use :
	<select multiple>
		<option>Google+</option>	
		<option>Facebook</option>	
		<option>Twitter</option>	
		<option>Linked In</option>	
	</select>
</p>
</form>
</body>
</html>

Explanation

Take a look at the explanation of elements & attributes used in the example.

<select>
The select element represents a selectable set of options.
<option></option>
The option element represents a single option of the set.
selected
The selected attribute represents the default selected value of the set.
size=2
The size attribute represents the number of options to display. Default size value is 1 on select elements when the multiple attribute is not specified.
multiple
With the multiple attribute, it is possible to select multiple options. Use the control key to select more options. When this is specified the default display size of the element is 4.