|
Are
you confused about web page design and don't
know where to start? Feel free to learn HTML
and how to design your very own web site by
using our FREE Online HTML Tutorial.
HTML Tutorial Part 14:
Web Page 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>
</SELECT>
Don't forget to give it a name.
<SELECT NAME="POSITION">
</SELECT>
Next 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.
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.
<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 again 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>
Textarea
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, 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 NAME="COMMENTS" ROWS=3 COLS=30
WRAP=VIRTUAL>
</TEXTAREA>
WRAP=VIRTUAL means that the text
in the box wraps, but it 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 it is sent
that way too.
<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 it is sent
exactly the way it was typed in (like the little
man a few textareas back).
Your own HTML page...
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>
.
.
</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.
Go To The Nexxt Page
|
Learn about Web Design. Check out our 
Download Sample Web Templates - Test Your Skills
Before You Buy!! 
