<select> and <option> are used to make menus. There are two ways that menus can be displayed as a pull-down menu or a scrollable menu.
The way it is displayed depends on whether <select> has a size attribute or not. If it has one, it will be a pull-down menu. If it has a size attribute with a numerical value, the menu will be scrollable and display the number of items you have for value. The second menu above shows three items, the code for it is: <select name="x" size="3">
Like other form elements, menus have a name attribute. For menus, the name attribute goes with <select> and the value attribute goes with <option>. The value is what is submitted to the form for the variable name. The text between <option> and </option> is what the user sees.
<form>
<select name="select_name">
<option value="val_1">Name 1</option>
<option value="val_2">Name 2</option>
<option value="val_3">Name 3</option>
<option value="val_4">Name 4</option>
<option value="val_5">Name 5</option>
<option value="val_6">Name 6</option>
</select>
</form>
If you want a to have an item other than the one on top to be pre-selected by default, you can add the attribute, selected to that <option>.
<form>
<select name="select_name">
<option value="val_1">Name 1</option>
<option value="val_2">Name 2</option>
<option value="val_3">Name 3</option>
<option value="val_4" selected>Name 4</option>
<option value="val_5">Name 5</option>
<option value="val_6">Name 6</option>
</select>
</form>
To make a functional example, I'll use a redirection script for the form's action, URL's for the values and link names for the part between <option> and </option>:
<form action="http://eclecticdjs.com/mike/wtv/tools/redirect.php">
<center>
<select name="url">
<option value="http://eclecticdjs.com/mike/tutorials/index.html">Tutorial Index</option>
<option value="http://eclecticdjs.com/mike/tutorials/html/forms/index.php">Forms Tutorial</option>
<option value="http://eclecticdjs.com/mike/tutorials/php/">PHP Tutorial</option>
<option value="http://eclecticdjs.com/mike/tutorials/transparent.html">Make transparent .gifs</option>
<option value="http://eclecticdjs.com/mike/tutorials/banner.html">Make an Oval Bannor</option>
<option value="http://eclecticdjs.com/mike/tutorials/stonewall.html">Make A Stone Wall</option>
<option value="http://eclecticdjs.com/mike/tutorials/button.html">Making 3D Buttons</option>
<option value="http://eclecticdjs.com/mike/tutorials/noise.html">Make Some Noise</option>
<option value="http://eclecticdjs.com/mike/tutorials/snow.html">Make Snow</option>
<option value="http://eclecticdjs.com/mike/tutorials/snowflake.html">Make Glitter & Snowflakes</option>
<option value="http://eclecticdjs.com/mike/tutorials/annotate.html">Simple Annotation</option>
<option value="http://eclecticdjs.com/mike/tutorials/emboss.html">Making 3D Text, Embossing</option>
<option value="http://eclecticdjs.com/mike/tutorials/glow.html">Make glowing text</option>
<option value="http://eclecticdjs.com/mike/tutorials/glow-animated.html">Make Animated Glowing Text</option>
<option value="http://eclecticdjs.com/mike/tutorials/fireworks.html">Make Fireworks</option>
<option value="http://eclecticdjs.com/mike/tutorials/font.php">CSS Font Effects</option>
<option value="http://eclecticdjs.com/mike/tutorials/paragraph.html">Styling Paragraphs</option>
</select>
<input type="submit"></td>
</center>
</form>
By adding a size attribute to the <select>, <select name="url" size="6">, I change it to a scroll menu showing six options at a time:
A menu can be styled for both webtv and computer users but the coding is quite different.
Webtv |
Computers |
|---|---|
| <font>, <b>, <i> | |
|
Font effects can be used by adding the attribute |
Font effects can be used by using CSS on individual |
| background | |
The background of a menu cannot be changed. |
Using CSS, you can change the background color or use an image |
 |
|
 |