Hoover Web Templates 100's of professional business and personal web templates  
  Web Design Templates Learn about Web Design. Check out our Web Design Article Archive.
 
Hoover Web TemplatesContact UsReturn to HomeView PayPal Shopping CartView Credit Card Shopping Cart
 
        Download Sample Website Templates Download Sample Web Templates - Test Your Skills Before You Buy!! CLICK TO DOWNLOAD
  Hoover Web Templates Beginner HTML Website Templates  
Free Downloads
Free Web Templates Free Business Forms Free Web Templates Free Website Design Articles
Website Extras
Web Template Search:
exact match    contains all keywords
 
HTML Tutorial - Learn Web Page Design Step By Step!
   

 

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

Didn't see anything you like?
Customize any of our Web Templates or view Premium Website Templates with PSD Source Files!
More website products: Flash Photo Galleries, Flash MP3 Music Players and Royalty Free Stock Photos.
Free Web Templates: Hoover Free Templates, A Free Web Template, Free Clipart Web Templates
Professional Web Site Design & Web Templates NewsletterJoin our eMail list to get sales announcements and discounts on your next web template purchase!

2000-2008 Hoover Web Design. All Rights Reserved.
No part of this website may be downloaded, copied or reproduced without the written permission of Hoover Web Design.