|
|
The Online Promoters
HTML Tutorial
Chapter 14: More Forms
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>
</SELECT>
Give it a name:
<SELECT NAME="POSITION">
</SELECT>
Add a few options:
<SELECT NAME="POSITION">
<OPTION>Powerbuilder Developer
<OPTION>Database Administrator
<OPTION>None of the above
</SELECT>
And give each <OPTION> a VALUE.
<SELECT NAME="POSITION">
<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.
<SELECT NAME="POSITION">
<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. To turn it into a scrolling list is add a SIZE attribute to the <SELECT> tag.
<SELECT NAME="POSITION" SIZE=4>
<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 we can change that by selecting one.
<SELECT NAME="POSITION" SIZE=4>
<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 NAME="COMMENTS">
</TEXTAREA>
You control the size of the box like so:
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>
ROWS is the height and 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.
Type in the following:
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>
WRAP=VIRTUAL means that the text in the box wraps but is sent as one long continuous string.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>
WRAP=PHYSICAL means that the text in the box wraps and is sent that way.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>
This is the default.
WRAP=OFF means that the text in the box does not wrap but is sent exactly the way it was typed in.
Your Own HTML Page
Open the page "feedback.html" and add the following: (the red 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>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><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 the file.
|
|