<html>

<head>
<title>Example Form 2</title>
</head>

<body bgcolor="#3c8484">

<!-- You are free to use this example to learn from if you want to. It may not be -->
<!-- absolutely perfect code but it renders correctly in the big two browsers and -->
<!-- should work in any browser adhering to the W3C's guidelines. Comment tags -->
<!-- (while annoying) are provided everywhere something new is introduced -->
<!-- if you want to use this as the basis of your project you should strip out anything -->
<!-- between the starting and ending comment tags (that's why each line has a start -->
<!-- and an end tag and no comments exist on lines with HTML that will render, this should -->
<!-- make it simple to remove all comments quickly.) Good luck and enjoy your experience! -->
<!-- Be sure to tell all of your friends about our free web sites -->
<!-- If you are developing pages for business reasons use our free hosting services as -->
<!-- often as you need, that's why we are here. -->
<!-- We would love a reciprocal link to us if you think it doesn't detract from your content. -->
<!-- Honestly a link can help keep us indexed in the search engines which help people find us. -->
<!-- Help us to continue making your life easier by providing you with free hosting, free tools, free examples, -->
<!-- and free information all designed to assist your efforts, we appreciate the opportunity to help you. -->
<!-- Thanks very much for your visit. -->

<center>
<img src="/fs_img/help/cgiemail_title.gif" border=0>
</center>

<p align="center">
<b><font size="4">Personal Interests Form</font></b><br>
</p>

<form action="/cgi-bin/cgiemail" method="post">
<!-- This line starts the Form E-mailer utility when the user presses the submit button -->
<!-- It also tells the browser how to format the information sent to the Form E-mailer, use "post" rather than "get" -->

<input type="hidden" name="cgiemail_html" value="thank_you.html">
<!-- HTML Template used for the page after successful submission -->

<input type="hidden" name="cgiemail_error" value="error.html">
<!-- HTML Template used in case an error occurs -->

<input type="hidden" name="cgiemail_invalid" value="You typed your email wrong.">
<!-- Customized Error message for bad Email addresses -->

<input type="hidden" name="cgiemail_username" value="webmaster">
<!-- Sent this email to webmaster -->

<input type="hidden" name="cgiemail_subject" value="WEB SITE SURVEY SUBMISSION">
<!-- The Subject line in the email -->

<input type="hidden" name="cgiemail_order" value="TIME:full_name:company:email:color:interests:music:comments">
<!-- The order in which to show the values in the body of the email -->

<input type="hidden" name="cgiemail_timezone" value="PST">
<!-- I prefer the date for this email to be sent in Pacific Standard Time -->

<input type="hidden" name="cgiemail_timeformat" value="%A, %B %e, %Y %T">
<!-- TIME Shown in the form "Wednesday, February 17, 1999 18:46:41" -->

<input type="hidden" name="delim_interests" value=", ">
<!-- Delimitor to be used for the "interests" variable below -->

<input type="hidden" name="delim_color" value=", ">
<!-- Delimitor to be used for the "color" variable below -->

<input type="hidden" name="delim_music" value=", ">
<!-- Delimitor to be used for the "music" variable below -->

<input type="hidden" name="cgiemail_required" value="full_name:Please supply your full name.">
<!-- Require that full_name control have data before accepting submission -->

<input type="hidden" name="cgiemail_required" value="email:You forgot to put your email address.">
<!-- Require that email control have data before accepting submission -->

<input type="hidden" name="cgiemail_required" value="color:You must choose the color you like most!">
<!-- Require that color control have data before accepting submission -->

<table border=1 cellspacing=0 cellpadding=2 align=center>
<!-- Note: "border=1" causes a border the width of 1 line (though the whole border is wider) -->
<!-- to be drawn around the table including each row and column. -->
<!-- "cellspacing=0" causes each row and column to be drawn right next to each other, if you -->
<!-- increase this value to "1" for example then one pixel of empty space will surround each -->
<!-- cell in the table cause it to be more widely separated from the other cells. -->
<!-- "cellpadding=2" causes two pixels of empty space to separate the contents of a cell -->
<!-- from the border of the cell. "align=center" causes the whole table to be centered on the page. -->

<tr>
<td><b>Full Name:</b></td>
<td>

<input name="full_name" size=46 maxlength=80>
<!-- Note: Notice the properties of size and maxlength don't require being surrounded by "" -->
<!-- they can be though, ie. size="42" and size=42 with both work, this is true of many controls -->
<!-- but do yourself a favor, strive for consistancy so you use the same method each time, it's -->
<!-- an issue of good style. --></td>

</tr>
<tr bgcolor="#33cc33">
<!-- Note: You can choose a background color for an individual row within a table by -->
<!-- including a "bgcolor=" property in the <tr> tag. Note that if you do not the row -->
<!-- simply "inherits" the color from the parental tag preceding it, Ie. the <table> -->
<!-- tag in the case of a <tr> because a <table> tag must precede a <tr> tag. -->

<td><b>Company:</b></td>
<td>

<input name="company" size="46" maxlength="80">
<!-- a continued illustration of the example above. -->
<!-- you can also surround values with "" --></td>

</tr>
<tr>
<td><b>Email:</b></td>
<td>
<input name="email" size=46 maxlength=80></td>
</tr>
<tr valign=top>

<td><b>Interests:</b></td>
<td>

<input type="checkbox" name="interests" value="Sports">&nbsp;&nbsp;Sports<br>
<!-- Note: "&nbsp;" forces a space to be drawn by the browser, these are used when -->
<!-- you want more than one space because if you just enter " " (2 spaces) the browser considers it as only one. -->

<input type="checkbox" name="interests" value="TV">&nbsp;&nbsp;TV<br>
<input type="checkbox" name="interests" value="Dancing">&nbsp;&nbsp;Dancing<br>
<input type="checkbox" name="interests" value="Fishing">&nbsp;&nbsp;Fishing<br>
<input type="checkbox" name="interests" value="Internet">&nbsp;&nbsp;Internet</td>
</tr>
<tr>

<td bgcolor=#cccc00><b>Favorite Color(s):</b></td>
<!-- Note: You can choose a background color for each column (cell) within a table by -->
<!-- including a "bgcolor=" property in the <td> tag. Note that if you do not the column -->
<!-- simply "inherits" the color from the parental tag preceding it, Ie. either -->
<!-- a <tr> or a <table> tag in the case of a <td> because both must precede a <td> tag. -->

<td>
<select name="color">

<option value="">------------------ Please select only one option ---------------</option>
<!-- Note: Because the <select> control does NOT have a property which -->
<!-- allows you to control its horizontal size you must use a creative -->
<!-- approach if you want to control how wide the box will appear. We are doing -->
<!-- that here by putting an item in the list which is meets two conditions -->
<!-- (1) if your type="text" controls are set to size="50" then make an entry here that is fifty characters in length -->
<!-- (2) the entry should be longer or as long as the longest string will be in order to set the size of the control. -->

<option selected value="red">red</option>
<!-- Note: "selected" is a keyword that means this option will be the default -->

<option value="yellow">yellow</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
<option value="pink">pink</option>
<option value="black">black</option>
<option value="white">white</option>
<option value="aqua">aqua</option>
<option value="forest green">forest green</option>
<option value="puke green">puke green</option>
<option value="transparent">transparent</option>
</select></td>
</tr>
<tr valign=top>

<td><b>Musical Preference:</b></td>
<td>

<select multiple name="music" size="3">
<!-- Note: "multiple" is a keyword that means more than one item can be selected -->
<!-- Note: "size=3" causes "3" options to be shown at once. -->

<option value="">------------ Please select all that apply an option -----------</option>
<option value="Classical">Alternative</option>
<option value="Classical">Classical</option>
<option value="Rock">Rock</option>
<option value="Pop">Pop</option>
<option value="Jazz">Jazz</option>
<option value="Voice">Voice</option>
</select></td>
</tr>

<tr valign=bottom>
<!-- Note: "valign=bottom" aligns text vertically with the bottom of the row. -->

<td><b>Additional Comments:</b></td>
<td><textarea rows="3" cols="40" name="comments"></textarea></td>
<!-- Note: "rows=3" causes three rows to be displayed, and "cols=40" causes -->
<!-- forty horizontal columns to be displayed. These are designed to format the -->
<!-- control to fit in with your page content. -->

</tr>

<tr valign=middle>
<!-- Note: "valign=middle" aligns text vertically with the middle of the row. -->

<td colspan="2" align="center">
<!-- Note: "colspan=2" (with or without "" around the "2") causes this column to span 2 columns. -->
<!-- Note: "align=center" causes the contents of this column to be centered. -->

<input type="submit" value="Inform the world about me!">
<!-- Button text can be changed to anything you want, but this is still a "submit" button -->

<input type="reset" value="Wait! Erase this form!"></td>
<!-- Button text can be changed to anything you want, but this is still a "reset" button -->

</tr>
</table>
</form>

<table width=80% border=0 cellspacing=0 cellpadding=0 align=center>
<tr><td align=left>
<font size=-1>
Note: This HTML is designed to be developer friendly. View the "source" HTML for
more information which is contained in comment tags designed not to interfere
with the visual presentation of this page but is present to help you.<br><br>
</font></td></tr>
</table>

<!-- Note: You may have noticed the strange location of the </td> tags. From a strictly -->
<!-- aesthetic viewpoint it would seem to make more sense to locate the </td> tag on a -->
<!-- separate line and align it horizontally with the <td> tag right? I think so too -->
<!-- !BUT! if you do some browsers will put a little bit of empty space between the last -->
<!-- line of column content and the actual end of the column. Not all browsers do this but -->
<!-- when one does and your are wanting to control how the page lays out this can be an -->
<!-- aggravating circumstance.... so here is a solution for you. Locate your </td> tags -->
<!-- at the end of the last line of content within the column instead of allowing a carriage -->
<!-- return between the last line and the ending tag. It works beautifully. (Your welcome.) -->

</body>
</html>