Back to home

HTML select element test

Test

Example

Code sample

<form method="get" action="#">
	<div>
		<label for="a">Favourite fruit</label>
		<select id="a" name="a">
			<option value="" selected>Choose an option</option>
			<option value="apple">Apple</option>
			<option value="pear">Pear</option>
			<option value="banana">Banana</option>
		</select>
	</div>
	<div>
		<label for="b">Favourite meat</label>
		<select id="b" name="b" required>
			<option value="">Choose an option</option>
			<option value="beef">Beef</option>
			<option value="chicken">Chicken</option>
			<option value="pork">Pork</option>
		</select>
	</div>
	<div>
		<label for="c">Favourite color</label>
		<select id="c" name="c" required aria-required="true">
			<option value="">Choose an option</option>
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</select>
	</div>
	<div class="row-form">
		<label for="d">Favourite city</label>
		<select id="d" name="d" aria-required="true">
			<option value="">Choose an option</option>
			<option value="Sydney">Sydney</option>
			<option value="Melbourne">Melbourne</option>
			<option value="Canberra">Canberra</option>
		</select>
	</div>
</form>
Support chart
OS Browser NVDA 2014.4 JAWS 16 VoiceOver
Windows 7 IE 11 Example 1:
Favourite fruit. combo box. Choose an option. collapsed

Example 2:
Favourite meat. combo box. Choose an option. collapsed
no required announced

Example 3:
Favourite color. combo box. Choose an option. collapsed. required

Example 4:
Favourite city. combo box. Choose an option. collapsed. required
Example 1:
Favourite fruit. combo box. Choose an option. To change the selection use the arrow key

Example 2:
Favourite meat. combo box. Choose an option. To change the selection use the arrow key
no required announced

Example 3:
Favourite color. combo box. Choose an option. To change the selection use the arrow key
no required announced

Example 4:
Favourite city. combo box. Choose an option. To change the selection use the arrow key
no required announced
Windows 7 IE 8 x x
Windows 7 Chrome 39 Example 1:
Favourite fruit. combo box. Choose an option. collapsed

Example 2:
Favourite meat. combo box. Choose an option. collapsed. required

Example 3:
Favourite color. combo box. Choose an option. collapsed. required

Example 4:
Favourite city. combo box. Choose an option. collapsed. required
Example 1:
Favourite fruit. combo box. Choose an option. To change the selection use the arrow key

Example 2:
Favourite meat. combo box. required. Choose an option. To change the selection use the arrow key

Example 3:
Favourite color. combo box. required. Choose an option. To change the selection use the arrow key

Example 4:
Favourite city. combo box. required. Choose an option. To change the selection use the arrow key
Windows 7 Firefox 34 Example 1:
Favourite fruit. combo box. Choose an option. collapsed

Example 2:
Favourite meat. combo box. Choose an option. collapsed. invalid entry. required

Example 3:
Favourite color. combo box. Choose an option. collapsed. invalid entry. required

Example 4:
Favourite city. combo box. Choose an option. collapsed. required
Example 1:
Favourite fruit. combo box. Choose an option. To change the selection use the arrow key

Example 2:
Favourite meat. combo box. required. invalid entry. Choose an option. To change the selection use the arrow key

Example 3:
Favourite color. combo box. required. invalid entry. Choose an option. To change the selection use the arrow key

Example 4:
Favourite city. combo box. required. Choose an option. To change the selection use the arrow key
OSX 10.9 Chrome 39 Example 1:
Choose an option. Favourite fruit. collapsed popup button

Example 2:
Choose an option. Favourite meat. collapsed popup button
no required announced

Example 3:
Choose an option. Favourite color. collapsed popup button
no required announced

Example 4:
Choose an option. Favourite city. collapsed popup button
no required announced
OSX 10.9 Firefox 34 Example 1:
Choose an option. Favourite fruit. popup button

Example 2:
Choose an option. Favourite meat. popup button
no required announced

Example 3:
Choose an option. Favourite color. popup button
no required announced

Example 4:
Choose an option. Favourite city. popup button
no required announced
OSX 10.9 Safari 7 Example 1:
Choose an option. Favourite fruit. popup button

Example 2:
Choose an option. Favourite meat. popup button
no required announced

Example 3:
Choose an option. Favourite color. popup button
no required announced

Example 4:
Choose an option. Favourite city. popup button
no required announced

Bottom of page - Back to home