<select>

A "select box" is a very compact form field that's used extensively on the Web. Here's an example:

Notice how much stuff this one little box holds when you click the downward pointing arrow on the right? That's the real strength of this type of form field. It can pack a lot of choices in a small visual area on the screen.

We begin making a select box by making a form and using <select> tags.

<form name="form1">

<select name="browserbox">

</select>

</form>

<option>s

Once you've got your select box set up, you have to add the clickable options using the <option> tag. There is a closing </option> tag, but it's rarely used.

<form name="form1">

<select name="browserbox">

<option>-- Pick Your Favorite Browser
<option>Microsoft Internet Explorer
<option>Netscape 4.x
<option>Netscape 6+

...

</select>
</form>

Notice that we haven't put any attributes in the <option> tag. You'll almost always code a VALUE here in actual practice. You do not have to NAME the individual options like with radio buttons and checkboxes. You should, however, name the <select> for future reference by JavaScript and other backend coding.

Also note that I did not have to code any line breaks. Each <option> is put on its own line. You can code blank lines for extra vertical space in the box by using "blank" <option>s:

<select name="browserbox">

<option>Choice #1
<option>
<option>Choice #2

</select>

The above would put a blank line between "Choice #1" and "Choice #2". It's just an <option> tag with no text associated with it.

Sizing The <select> Box

The width of a select box is determined by the width of the longest line of text beside an <option>. I used a "title line" -- "Pick Your Favorite Browser" -- to make wide box. Of course, "Microsoft Internet Explorer" would have sized the box pretty wide had I left off the title line.

There is no way to set the width of select boxes except by manipulating the text tags associated with <option>s. You can add a margin by beginning and ending your option's text with a &nbsp;.

If you have a really long line of text that makes your select box too wide for your page's layout, you can break the text up by using multiple option tags and blank option tags for vertical spacing:

<select name="browserbox">

<option>Microsoft
<option>Internet
<option>Explorer
<option>
<option>Netscape 4.x

...

</select>

This would break up "Microsoft Internet Explorer" and put it on three lines with a blank line beneath.

You can directly control the height of the select box by using the SIZE attribute in the <select> tag. By default, most browsers will show only one line of the select box making it a "drop-down" box or "drop-down" menu. You can have more than one line visible in a scrolling box:

The above is a select box just like the first example. It displays four lines in a scrolling box instead of one line and a drop down box. This is done easily by adding a SIZE attribute to the <select> tag.

<select name="browserbox" size=4>

You'd use SIZE=1 to make a drop down select box that initially displays a single line -- like in our first example at the top of the page.

Summary & Exercises

A select box is a form field made by using <select> tags in a <form>.

The <select> tag makes the box and <option> tags make the options available in the box.

Options can be given margin from the left and right edges of the box with &nbsp;s. Vertical space between options can be made with blank <option> tags.

You can size the height of the select box using the SIZE attribute in the <select> tag. A size of "1" would make a single line, drop-down menu. A larger size would present the given number of lines in a scrolling box.

You can't hardly beat drop down boxes for putting a lot of options in a very small space on the screen. Add a couple of select boxes to your current form as in this updated example.

To Next Advanced HTML Lesson

Back To Advanced HTML Index