XHTML and CSS - Drop Down Lists
Drop Down Lists
In this tutorial we're going to be looking at HTML drop down lists, you might think why would I want to use a list over radio buttons, if you had say choice of country's you don't really want to have a radio button for every country. The first thing we need to create a drop down list is to create a select tag, every option that's in our drop down list will go between the select tags, the select tag takes one attribute and that is name, this is so we identify it wherever we submit the form to.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> <select name="activities"> </select> </form> </body> </html>
The next tag we need to look at is the option tag, the option tag takes one attribute and that is the value, this is the pieces of data that will be submitted just like with check boxes and radio boxes, I'm going to create a few options in this drop down menu for some activities.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> <select name="activities"> <option value="play">Play the guitar<option> <option value="ride">Ride a motorbike<option> <option value="drive">Drive a go cart<option> </select> </form> </body> </html>
When you view this in your browser you'll see a list of activities, a useful attribute for the option tags is selected, this will be the default option.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <form> <select name="activities"> <option value="play">Play the guitar<option> <option value="ride" selected="selected">Ride a motorbike<option> <option value="drive">Drive a go cart<option> </select> </form> </body> </html>
Now you'll see that the Ride a motorbike option is the default option on our drop down menu.

Page generated in 0.015 seconds.