HTML Form Tutorial, Part II
By Will Bontrager2005-03-22
A Complete Example
|
|
Forms collect information and/or present it. When the submit button is clicked, information is sent somewhere. Once the information is sent somewhere, the form has done its job.
Here is an example form using all of the tags mentioned in this tutorial:
<form method="POST"
action="/cgi-bin/formupload/handler.cgi"
enctype="multipart/form-data">
<input type="hidden"
name="something"
value="A line of content">
<p>
What is your home page URL?<br>
<input type="text" name="url" size="17" maxlength="44">
</p>
<p>
What is your password?<br>
<input type="password" name="P" size="9" maxlength="20">
</p>
<p>
Select one or more colors that you like:<br>
<input type="checkbox" name="c_blue" value="yes">
<input type="checkbox" name="c_red" value="yes" CHECKED>
<input type="checkbox" name="c_pink" value="yes" CHECKED>
<input type="checkbox" name="c_yellow" value="yes">
</p>
<p>
What is your favorite color?<br>
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="red" CHECKED>
<input type="radio" name="color" value="pink">
</p>
<p>
Upload any type of file:<br>
<input type="file" name="upfile">
</p>
<p>
<input type="button"
value="Give me a message"
onClick="return alert('a message')">
<!-- Note: onClick works only with JavaScript
enabled browsers. -->
</p>
<p>
Tell me why you are here!<br>
<textarea name="message" cols="20" rows="5"></textarea>
</p>
<p>
What is your most <b><u>un</u></b>favorite color:<br>
<select name="s_unfav">
<option value="green">Green</option>
<option value="red">Red</option>
<option value="blue" SELECTED>Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</p>
<p>
Select one or more colors you do not like:<br>
<select name="s_like" size="4" MULTIPLE>
<option value="green">Green</option>
<option value="red" SELECTED>Red</option>
<option value="blue" SELECTED>Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</p>
<p>
<input type="image"
name="imageclick"
src="myimage.gif"
border="0">
</p>
<p>
<input type="reset" value="Erase Everything!">
</p>
<p>
<input type="submit"
name="1"
value="This is my first visit">
</p>
<p>
<input type="submit"
name="2"
value="I've been here before">
</p>
</form>
A web page with the above form, along with a script written especially to handle the form's information, can be download at http://willmaster.com/master/cgi-bin/arts/pl.pl?formtutDecompress the downloaded ZIP file.
Once decompressed, there will be four files: form.html, myimage.gif, handler.cgi, and readme.txt.
File form.html is the web page with the form. File myimage.gif is an image used by the form. File handler.cgi is the script to handle the information submitted by the form. And file readme.txt has preparation and installation instructions.
Installation is easy. Just a few simple steps.
When the form is used, the script will display a page with the form field information you supplied. It will also upload any file you specify into the same directory where the script is installed -- the script does not check for the "accept" attribute.
Forms can be fun :)
With a little practice, you can be an expert.
Tutorial Pages:
» The <textarea> Tag
» The <select> Tag
» A Complete Example
Copyright 2004 Bontrager Connection, LLC
|
