MCPS Website Development CPD Course

Select Menu

The code

HTML


<form action="someScript" method="post">
	<fieldset>
		<legend>Cars</legend>
		<p>
			<label for="make">Make</label>
			<select name="make">
				<option value="chevrolet">Chevrolet</option>
				<option value="chrysler">Chrysler</option>
				<option value="ford">Ford</option>
				<option value="gm">General Motors</option>
				<option value="pontiac">Pontiac</option>
			</select>
		</p>                                    
		<p>
			<label for="type">Type</label>
			<select name="type">
				<option value="convertible">Convertible</option>
				<option value="luxury">Luxury Vehicle</option>
				<option value="minivan">Mini Van</option>
			</select>                                    
		</p>                                    
		<p>
			<label for="min">Price</label>
			<select name="min">
				<option value="none">No Min</option>
				<option value="15000">$15,000</option>
				<option value="30000">$30,000</option>
			</select>                                    
			<select name="max">
				<option value="none">No Max</option>
				<option value="45000">$45,000</option>
				<option value="60000">$60,000</option>
			</select>                                    
		</p>                                    
		<input type="submit" value="Submit">
		<input type="reset" value="Clear">
	</fieldset>
</form>

What is a select menu

A method of selecting one option from many. Similar to a radio button in concept but different in aesthetics, the user cannot see all of the options.

Select

The select tag holds all of the options. This tag holds the name attrubute.

Option

The option tag holds the options within the select tag. Option holds the value attribute.

Example

Cars

Make

Type

Price

Creative Styling

The code

HTML


<form action="someScript" method="post">
	<fieldset>
		<legend>Cars</legend>
		<p>
			<label for="make">Make</label>
			<select name="make">
				<option value="chevrolet">Chevrolet</option>
				<option value="chrysler">Chrysler</option>
				<option value="ford">Ford</option>
				<option value="gm">General Motors</option>
				<option value="pontiac">Pontiac</option>
			</select>
		</p>                                    
		<p>
			<label for="type">Type</label>
			<select name="type">
				<option value="convertible">Convertible</option>
				<option value="luxury">Luxury Vehicle</option>
				<option value="minivan">Mini Van</option>
			</select>                                    
		</p>                                    
		<p>
			<label for="min">Price</label>
			<select name="min">
				<option value="none">No Min</option>
				<option value="15000">$15,000</option>
				<option value="30000">$30,000</option>
			</select>                                    
			<select name="max">
				<option value="none">No Max</option>
				<option value="45000">$45,000</option>
				<option value="60000">$60,000</option>
			</select>                                    
		</p>                                    
		<input type="submit" value="Submit">
		<input type="reset" value="Clear">
	</fieldset>
</form>

CSS


select{
	font-size:25px;
	color:#333;
	font-family:arial;
}

Example

More Form Elements

Text
- One Line
- Multiple Lines
Boolean
- Checkbox
Multiple Choice
- Radio Buttons
- Select Menu
Submitting
- Submit Buttons
- Buttons
Accessibility
- Tab Index
Client-side Validation
- JavaScript