HTML-Forms

Forms are the most popular way to make web pages interactive. Like forms on paper, a form on a web page allows the user to enter requested information and submit it for processing. (Fortunately, forms on a web page are processed much faster.)
Forms are used for all of the following: Order forms Email subscriptions Contest registrations Databases Autoresponders User identifications and passwords Feedback.

Your first step in creating a form will be to get a good form script. This script will reside on your server within your CGI-bin and will be used to process your form's information. To insert a form on your web page, we will begin with <FORM> and end with </FORM>. All of the FORM elements will be placed between the FORM tags. In order for a form to function, it first needs to know how to send the information to the server. There are two methods, GET and POST. METHOD="GET" - This method will append all of the information from a form on to the end of the URL being requested. METHOD="POST" - This method will transmit all of the information from a form immediately after the requested URL. This is the preferred method. In addition to a form needing to know how to send the information, it also needs to know where to send the information to be processed. The ACTION attribute will contain the URL to the form processing script or it may contain an email address. Example Form: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" size="10"> <type="Submit" VALUE="Submit"> </FORM> Example Email Form: <FORM ACTION="mailto:you@yourdomain.com"> Name: <INPUT name="Name" value="" size="10"> Email: <INPUT name="Email" value="" size="10"> <INPUT type="submit" value="Submit"> </FORM> The email form will simply process the information that is placed within your form and send it to your email address. A CGI script is not required.

Notice when the ACTION attribute references an email address, you don't have to include the METHOD attribute. Form Element Attributes Method - Determines which http method will be used to send the form's information to the web server. Action - The URL of the form processing script that resides on the server. This script will process the form's information. Enctype - Determines the method used to encode the form's information. This attribute may be left blank (default) unless you're using a file upload field. Target - Specifies the target frame or window for the response page. Form Element Properties Text boxes Hidden Password Checkbox Radio button Submit Image submit Reset

These properties are specified by using the TYPE attribute within the form's INPUT element. INPUT <INPUT TYPE="?"> Input Attributes TYPE - Type of input field NAME - Variable name sent to the form processing script. VALUE - Information associated with the variable name to be sent to the form processing script. MAXLENGTH - Maximum number of characters that may be placed within an input area. SIZE - The size of the input text area. CHECKED - Default button or box selection. TEXT BOXES <INPUT TYPE="text"> Enables users to input text such as an email address. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="TEXT" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Text Box Attributes TYPE - Text SIZE - The size of the text box specified in characters. NAME - Name of the variable to be processed by the form processing script.

VALUE - Will display a default value within the text box. MAXLENGTH - Maximum number of characters that may be placed within the text box. HIDDEN <INPUT TYPE="hidden"> Used to send information to the form processing script that you don't want your visitors to see. Nothing will show through the browser. <INPUT type="hidden" name="redirect" value="http://www.yourdomain.com/"> Hidden Attributes TYPE - Hidden NAME - Name of the variable to be processed by the form processing script. VALUE - The value of the hidden name expected by the form processing script. PASSWORD <INPUT TYPE="password"> Used to enable users to enter a password. When a password is typed in, asterisks will appear instead of text. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="password" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Password Attributes TYPE - Password NAME - Name of the variable to be processed by the form processing script. VALUE - Usually blank. SIZE - The size of the text box specified in characters. MAXLENGTH - Maximum number of characters that may be placed within the text box. CHECKBOX <INPUT TYPE="checkbox"> Enables the user to select multiple options. Check Box Attributes TYPE - Checkbox CHECKED - Specifies a default selection. NAME - Name of the variable to be processed by the form processing script. VALUE - The value of the selected check box.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="CHECKBOX" name="selection1"> Selection 1

<INPUT type="CHECKBOX" name="selection2"> Selection 2 <INPUT type="CHECKBOX" name="selection3"> Selection 3 <INPUT type="Submit" value="Submit"> </FORM> RADIO BUTTON <INPUT type="radio"> Enables the user to select multiple options. FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="RADIO" name="selection1"> Selection 1 <INPUT type="RADIO" name="selection2"> Selection 2 <INPUT type="RADIO" name="selection3"> Selection 3 <INPUT type="Submit" value="Submit"> </FORM> Radio Button Attributes TYPE - Radio CHECKED - Specifies a default selection. NAME - Name of the variable to be processed by the form processing script. VALUE - The value of the selected radio button. SUBMIT <INPUT type="submit"> Enables users to submit the form information to the form processing script. Submit Attributes TYPE - Submit NAME - Name of the variable to be processed by the form processing script. VALUE - Specifies the text to be displayed on the submit button. IMAGE SUBMIT BUTTON <INPUT type="image" SRC="url"> Enables users to submit the form information to the form processing script. Instead of the regular submit button, an image submit button will be displayed. <INPUT type="image" name="submit" SRC="image.gif"> mage Submit Attributes TYPE - Image NAME - Name of the variable to be processed by the form processing script. SRC - Image URL. RESET

<INPUT type="reset"> Enables users to clear a form if necessary. <INPUT type="RESET" value="Reset"> Reset Submit Attributes TYPE - Reset VALUE - Specifies the text to be displayed on the reset button. SELECT <select></select> Surrounds the code for a selection drop down menu. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <SELECT SIZE="5"> <OPTION>option 1 <OPTION>option 2 <OPTION>option 3 </SELECT> <INPUT type="Submit" value="Submit"> </FORM> Select Attributes NAME - Name of the variable to be processed by the form processing script. SIZE - Specifies the number of visible selections. MULTIPLE - Enables users to select multiple selections. OPTION <option> Used with the SELECT element to display the options. Option Attributes SELECTED - Specifies a default selection. VALUE - Specifies the value of the variable in the select element. TEXTAREA <textarea></textarea> Specifies an open text area. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Enter Your Comments:<BR> <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100>

</TEXTAREA><BR> <INPUT type="Submit" VALUE="Submit"> <INPUT type="Reset" VALUE="Clear"> </FORM> Textarea Attributes NAME - Name of the variable to be processed by the form processing script. COLS - The number of columns within the text area. ROWS - The number of rows within the text area. WRAP - Specifies the text wrap. The default setting is off. The WRAP can be set to "VIRTUAL" or "PHYSICAL" and will wrap the text as the user types. Tip: In order to properly format your form, you may want to place it within a table. Here is a basic email form set up within a table: <FORM action="mailto:you@yourdomain.com"> <TABLE BORDER="0" CELLPADDING="2"> <TR> <TD><FONT face="Verdana" size=2>Name:</FONT></TD> <TD><INPUT name="Name" value="" size="10"></TD> </TR> <TR> <TD><FONT face="Verdana" size=2>Email:</FONT></TD> <TD><INPUT name="Email" value="" size="10"></TD> </TR> <TR> <TD></TD> <TD><INPUT type="submit" value="Submit"></TD> </TR> </TABLE> </FORM>Advanced Forms If you have a good form processing script, you will have the option to create highly technical forms with additional options: Multi-page Forms Provides you with the ability to create a form that spans more than one page. The data you specify will be collected on the first form page and will be transferred to the second page. You can have as many pages as you need and the data will continue to be passed through each page until the final submission. Placeholders are used within each form page to collect and pass the data. Customized Confirmation Page Enables you to create a customized confirmation page that may contain your visitor's name and any other information you've collected. In addition, you can even include the date, time and your visitor's IP address (Internet Provider). Printable Confirmation Page

Enables you to provide your customers with a printable confirmation page for data such as order receipts. Templates Provides you with the ability to completely customize the information your form processes. You can use a template to specify how your data will be displayed when it is sent to your email address, and even use a template to set up a database in a specific format. Database Enables you to collect your form's data and stores it within a database.

Form Tips and Tricks Now that you have a basic understanding of forms and how you can place them within your website, we'll now focus on a few "tips & tricks" you can use to spice up your forms. Creating A Default Form Option The OPTION tag is used to create options listed in a drop down box of a form. You can select a default option, by adding the word "selected" within your OPTION tag. <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT>Customizing Your Input Boxes You can specify the size of your INPUT box by changing the SIZE value. In addition, you can change the amount of text input by changing the MAXLENGTH value. When specifying the MAXLENGTH value, make sure you provide your visitors with enough space to type in the necessary information. <INPUT type="text" SIZE="10" MAXLENGTH="40"> Adding Color to Your Input Boxes (IE) The INPUT tag is used to create input fields within a web page form. You can change the font, input text color, input text size and the background color of your INPUT box by using STYLE tags. <FORM> <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30"> </FORM> Disappearing Form Text

You can display default text within your text input boxes that magically disappears when you click inside the box. This will enable you to provide your visitors with an example of text they should place within your text box. <INPUT type="text" name="url" value="http://www.yourdomain.com" size="30" onfocus=value=''"> Change the "value="http://www.yourdomain.com" text to the default text you would like to be displayed within your text box. Flashing Cursor in Form on Load You can set up your forms so that when the page loads your visitor's cursor will be flashing within your text box. Place the following code witin your <BODY> tag. This code tells the browser to place the cursor within the "customer" form in the "email" text box. <body onLoad="focus();customer.email.focus()"> The "customer" text represents the name of your form. The name attribute should be added to your form like this: <form name="customer"> You can change the name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same. The "email" text represents the name of your form element. The <input> attribute should be written like this: <input type="text" name="email"> You can change the "email" name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same. Tabbing Through Forms You can enable your visitors to tab through your form fields simply by adding "tabindex" to your INPUT tags. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" name="name" size="20" maxlength="30" tabindex="1"> <INPUT type="text" name="address" size="20" maxlength="30" tabindex="2"> <INPUT type="text" name="email" size="20" maxlength="30" tabindex="3"> <INPUT type="text" name="url" size="20" maxlength="30" tabindex="4"> <INPUT type="Submit" VALUE="Submit"> </FORM> The "tabindex" value determines the order in which you will tab through the text boxes. If you would like the tab order to skip a certain area, such as check boxes and radio buttons, simply use a negative value beginning with "-1" then "-2" and so on. Each negative value will be bypassed when tabbing through your form. Customizing Form Colors

You can completely customize the look of your forms simply by using STYLE tags. Each of the following examples will enable you to customize your forms in specific colors. You can change the colors by changing the hexadecimal color codes. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <TEXTAREA wrap="virtual" name="comments" rows=6 cols=20 STYLE="scrollbar-face-color: #317B9C; scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">This example displays the scrollbars in an alternative color. You can change these colors to whatever you'd like simply by changing the hexadecimal color codes. </TEXTAREA> <INPUT type="Submit" VALUE="Submit" STYLE="color:#FFFFFF; background: #317B9C; font-weight: bold"> <INPUT type="Reset" VALUE="Reset" STYLE="color:#FFFFFF; background: #317B9C; font-weight: bold"> </FORM>The following example displays a form with colored scrollbars and text. The text is displayed in a specific font and the face of the button displays an image background. This example will require you to include an image. Simply create a small patterned 2x2 .gif image and upload it to your server. You will need to replace the (yourimage.gif) text within the "Submit" and "Reset" background values to the URL of your image. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <TEXTAREA wrap="virtual" name="comments" rows=6 cols=20 STYLE="scrollbar-face-color: #317B9C; scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">This example displays the scrollbars in an alternative color. The text is displayed in a specific font and the face of the button displays an image background. </TEXTAREA> <INPUT type="Submit" VALUE="Submit" STYLE="color: #FFFFFF; background: url(yourimage.gif); font-family: Verdana, Helvetica; font-weight: bold"> <INPUT type="Reset" VALUE="Reset" STYLE="color: #FFFFFF; background: url(yourimage.gif); font-family: Verdana, Helvetica; font-weight: bold"> </FORM> The following example displays a form with a colored background, scrollbars and text. The text is displayed in a specific font and the face of the button displays an image background. You will need to replace the (yourimage.gif) text within the "Submit" and "Reset" background values to the URL of your image. <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <TEXTAREA wrap="virtual" name="comments" rows=6 cols=20 STYLE="background:#EAE8E8; scrollbar-face-color: #317B9C;

scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">This example displays a form with a colored background, scrollbars and text. The text is displayed in a specific font and the face of the button displays an image background. </TEXTAREA> <INPUT type="Submit" VALUE="Submit" STYLE="color: #FFFFFF; background: url(yourimage.gif); font-family: Verdana, Helvetica; font-weight: bold"> <INPUT type="Reset" VALUE="Reset" STYLE="color: #FFFFFF; background: url(yourimage.gif); font-family: Verdana, Helvetica; font-weight: bold"> </FORM>Keep in mind, if you change the colors of your scrollbars and buttons, make sure your selected colors match your website's color scheme. In addition, always make sure your text is clearly visible through your background colors. Forms provide you with an excellent alternative to snail mail. Your visitor's information can be instantly processed right over the Internet. This information might include taking orders, collecting customer information, or even allowing your visitors to provide you with feedback. The possibilities are endless.