Form Tutor - Lesson 9

A Scrolling List is very similar in construction to a Pull Down List. Let's add a few more names first.

 
<form>
<select name="best friend">
<option value="ed">Ed
<option value="rick">Rick
<option value="tom">Tom
<option value="guido">Guido
<option value="horace">Horace
<option value="reggie">Reggie
<option value="myron">Myron
</select>
</form>


All we gotta do to turn it into a Scrolling List is add a size attribute to the <select> tag.

 
<form>
<select name="best friend" size="4">
<option value="ed">Ed
<option value="rick">Rick
<option value="tom">Tom
<option value="guido">Guido
<option value="horace">Horace
<option value="reggie">Reggie
<option value="myron">Myron
</select>
</form>

The size is simply how many options show in the window. Pretty simple, eh?


Again, the default value is the first <option>, and again we can change that by selecting one.

 
<form>
<select name="best friend" size="4">
<option value="ed">Ed
<option value="rick">Rick
<option value="tom" selected>Tom
<option value="guido">Guido
<option value="horace">Horace
<option value="reggie">Reggie
<option value="myron">Myron
</select>
</form>

I have no idea why you would use the selection feature for a Scrolling List but it's there and I just felt the need to tell you about it.

Actually, I'll take that back. Here is a perfectly good use for it :-)

   

 

(This effect is done using a combination of HTML and JavaScript with a little bit of CSS thrown in. If you're curious about how it was done, the source is here.)

<< BACK NEXT >>