Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


<FORM>

The <FORM> Tag is a fill-out input form that allows the data to be handled in many ways, typically a CGI script. I'll explain this one myself since the RFC specs are even over my head. A form is most often used as a mailto Guestbook, although there are many different things you're able to do with the data. For this example, I'll use part of my old Feedback Form and explain along the way.

Remember, this is just the elements of the <FORM> Tag, it isn't a "How To Add a Guestbook" or CGI Tutorial.

htmlcode.gif (606 bytes)

<form
action="http://www2.fwi.com/cgi-bin/vaimail.pl" 
method="post">

The ACTION command is a URL of the script that handles the submitted data. The script, among other things, E-Mails me the information you submitted, stripping the unnecessary code so it's in a readable format.

In a Form, the ACTION acts as a "what" and the METHOD acts as a "how". The METHOD command can be POST (to put) or GET (to gather). It's very difficult to understand without knowing how CGI interfaces with form input, but 99% of the times you use the METHOD="POST" when you're sending data into a script.

hr1.gif (724 bytes)

Next is part of INPUT, hidden fields, which is a field than can't be edited by the person who's filling the form out. These are script-specific and most of the time contains data that doesn't change. Also check out the <INPUT> Tag for a more in-depth explanation.

htmlcode.gif (606 bytes)

<input type="hidden" 
	name="nexturl"
	value="http://www.quadzilla.com/reply.htm">
<input type="hidden" 
	name="subject" 
	value="HTML Site Guestbook">
<input type="hidden" 
	name="to"
	value="djquad@quadzilla.com">

The TYPE=HIDDEN is passed along to the form ACTION, without being visible on the form itself. The NAME command is what the script uses as a "what to do with it". Hidden fields are different depending on what CGI script you're using, so this example may only show you an example, and no real significance beyond that.

hr1.gif (724 bytes)

example.gif (544 bytes)

Enter Your Name:

htmlcode.gif (606 bytes)

Enter Your Name: 
<input type="text"
	size="33" 
	maxlength="256" 
	name="name">

The TEXT is used for a single line text fields. This is used with SIZE, the visible width in characters, MAXLENGTH, the allowed width in characters of the field, and NAME, the identifier the script uses.

hr1.gif (724 bytes)

example.gif (544 bytes)

Enter Your Home Page Address:

htmlcode.gif (606 bytes)

Enter Your Home Page Address:
<input type="text" 
	size="33" 
	maxlength="256" 
	name="url"
	value="http://">

This is the same as the "Enter Your Name" example, but with a value command, which sets the initial value for that input field.

hr1.gif (724 bytes)

The <OPTION> command is a pull-down list of choices. The SELECT NAME command is part of the form which tells it what is reported to the script.

example.gif (544 bytes)

Where did you first hear about this site:

htmlcode.gif (606 bytes)

<select name="Heard_About_From">
	<option value="newsgroup">Newsgroup</option>
	<option value="personal_bookmark">
	A Bookmark on a Personal Page</option>
	<option value="com_bookmark">
	A Bookmark on a CommercialPage</option>
</select>

Here is another effect you can do by specifying a larger SIZE.

example.gif (544 bytes)

htmlcode.gif (606 bytes)

<select name="Heard_About_From" size="3">
	<option value="newsgroup">Newsgroup</option>
	<option value="personal_bookmark">A Bookmark on a Personal Page</option>
	<option value="com_bookmark">A Bookmark on a Commercial Page</option>
</select>

hr1.gif (724 bytes)

There are other common commands which I didn't use on this particular form, such as:

Checkboxes, which allow multiple choices

example.gif (544 bytes)

WWW
FTP
Usenet
IRC
Telnet

htmlcode.gif (606 bytes)

<input type="checkbox" name="WWW"
	value="WWW">WWW<br>
<input type="checkbox" name="FTP"
	value="FTP">FTP<br>
<input type="checkbox" name="Usenet"
	value="Usenet">Usenet<br>
<input type="checkbox" name="IRC"
	value="IRC">IRC<br>
<input type="checkbox" name="Telnet"
	value="Telnet">Telnet

hr1.gif (724 bytes)

Radio-Buttons, which allow one choice. These are basically the same as Checkboxes, but are grouped using the same name.

example.gif (544 bytes)

WWW
FTP
Usenet
IRC
Telnet

htmlcode.gif (606 bytes)

<input type="radio" name="heard_from" 
	value="WWW">WWW<br>
<input type="radio" name="heard_from"
	value="FTP">FTP<br>
<input type="radio" name="heard_from"
	value="Usenet">Usenet<br>
<input type="radio" name="heard_from"
	value="IRC">IRC<br>
<input type="radio" name="heard_from"
	value="Telnet">Telnet

hr1.gif (724 bytes)

And a Text Entry Box, with scroll bars, if needed

example.gif (544 bytes)

htmlcode.gif (606 bytes)

<textarea name="Comments" rows="3"
cols="50"></textarea>

hr1.gif (724 bytes)

At the end of a form, There should be a SUBMIT Button, and an optional RESET button, followed by the closing </FORM> Tag.

htmlcode.gif (606 bytes)

<input type="submit" name="Submit"
	value="Submit this here form">
<input type="reset" name="Reset" value="Reset this here form">
</form>

hr1.gif (724 bytes)

Feel free to put your Form inside a <TABLE> for better design. Also check out the <INPUT> Tag for a more in-depth explanation . These are just the basics of the <FORM> Tag, it's up to you to decide what to do with it (the CGI magic part of it). smiley.gif (177 bytes)



Up to => Home / Quadzilla / Tag_Ref




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers