teach yourself HTML! Chapter 14

Chapter 14

Forms Continued

Pull Down and Scrolling Lists

The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag.

</SELECT>

Don't forget to give it a name.

</SELECT>

Next add a few options.

<OPTION>Powerbuilder Developer

<OPTION>Database Administrator

<OPTION>None of the above

</SELECT>

And give each <OPTION> a VALUE.

<OPTION VALUE="PB">Powerbuilder Developer

<OPTION VALUE="DBA">Database Administrator

<OPTION VALUE="NOTA">None of the above

</SELECT>

The default option is the one that is listed first.

We can specify a default other than the first option in the list.

<OPTION VALUE="PB">Powerbuilder Developer

<OPTION VALUE="DBA" SELECTED>Database Administrator

<OPTION VALUE="NOTA">None of the above

</SELECT>

A Scrolling List is very similar in construction to a Pull Down List. We'll add a few more options first. Then, all we do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.

<OPTION VALUE="PB">Powerbuilder Developer

<OPTION VALUE="DBA">Database Administrator

<OPTION VALUE="VB">Visual Basic Developer

<OPTION VALUE="ADMIN">Administration staff

<OPTION VALUE="JANITOR">Janitor

<OPTION VALUE="NOTA">None of the above

</SELECT>

The SIZE is simply how many options show in the window.

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

<OPTION VALUE="PB">Powerbuilder Developer

<OPTION VALUE="DBA" SELECTED>Database Administrator

<OPTION VALUE="VB">Visual Basic Developer

<OPTION VALUE="ADMIN">Administration staff

<OPTION VALUE="JANITOR">Janitor

<OPTION VALUE="NOTA">None of the above

</SELECT>

Text Area

A very useful type of input is <TEXTAREA>.

</TEXTAREA>

You control the size of the box like so...

</TEXTAREA>

ROWS is the height, COLS is the width.

A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it.

Go ahead and type in the boxes...

</TEXTAREA>

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.

</TEXTAREA>

WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.

</TEXTAREA>

This is the default.

WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).

Your own HTML page

WHAT TO TYPE

(The blue is the new!)

Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).

<html>

<body background="bgnd.gif">

<center><h1>Feedback Form</h1></center>

<br>

<form>

<b>My name is: </b><input type=text name="name">

<p>

<b>I work as a:</b><br>

<input type=radio name="position" value="Developer" checked>Developer<br>

<input type=radio name="position" value="ProjMan">Project Manager<br>

<input type=radio name="position" value="TechMan">Technical Manager<br>

<input type=radio name="position" value="NOTA">None of the above

</p>

<p>

<b>When it comes to web browsers:</b><br>

<input type=checkbox name="Netscape" checked>I use Netscape Navigator<br>

  <input type=radio name="NetscapeVer" value="2.0">version 2.0<br>

  <input type=radio name="NetscapeVer" value="3.0" checked>version 3.0<br>

<input type=checkbox name="IExplorer">I use Microsoft Internet Explorer<br>

  <input type=radio name="IEVer" value="2.0">version 2.0<br>

  <input type=radio name="IEVer" value="3.0">version 3.0<br>

</p>

<b>I rate your site as:</b><br>

<select name="Rating">

<option value="Wow">Wow! How did you do it?

<option value="good">Really good

<option value="interesting">Interesting

<option value="hmmm">Hmmm - seen better

<option value="tryagain">Try again, bud!

</select>

</p>

<p>

<b>Comments:</b><br>

<textarea name="comments" rows="6" cols="50" wrap="physical">

</textarea>

</p>

</body>

</html>

Save it.

Go back Go to chapter fifteen!!!!!!!!!!