EarthLink.net   Start Page   Web Mail   Biz Center   Support           Search   ................................................................................................................ Web Hosting Help | Control Panel   How to Create Forms in HTML This document will assist you in the creation of forms for use with cgiemail as well as other CGI programs. This document assumes a basic knowledge of HTML and a desire to learn more about using HTML forms. A FORM is an HTML element that is used to collect information from a user to be passed to a CGI process or script. On this page you will find the controls allowed in HTML FORMs, and how they are used to collect information. Common FORM controls: button checkbox file hidden image option password radio reset select submit text textarea HTML Syntax of a Form: <form action=url class=name enctype=encoding method=type name=name onreset=applet onsubmit=applet style=style target=name> [ADD FORM CONTROLS HERE] </form> NOTE: The form controls listed above are described in more detail below according to the following format: Control Name <format of command> option1 option2 option3 option4=value option5=value option6=value Any options that are bold are required or highly recommended. Example: A graphic example of what the control looks like in action The actual source code used in the graphical example. A brief synopsis of what the control is, what it does, how it should be used, and when. Tip: Tips from "one who's been there before" to save you time and make your forms look sharp! This section can also be called "common mistakes and how to avoid them." ;) Form Controls: button <input type="button"> name=name notab onclick=applet taborder=n value=string Example: <input type="button" name="button1" value="Do Nothing"> A button can be used to call a JavaScript or submit a form to a cgi script. This one isn't actually set-up to call a JavaScript, which is why there's no onclick option. checkbox <input type="checkbox" value="ON"> checked name=name notab onclick=applet taborder=n value=string Example: Life Liberty Pursuit of Happiness <input type="checkbox" name="checkbox1" value="Yes!"> Life <br> <input type="checkbox" name="checkbox2" value="Yes!" checked> Liberty <br> <input type="checkbox" name="checkbox3" value="Yes!"> Pursuit of Happiness</p> <p> "Please answer yes or no to each of the following." If the user selects one of the checkboxes, then its value is sent, otherwise no value is sent in conjunction with the checkbox name. Tip: Each checkbox gets it's own name. If you want to have a checkbox pre-selected, such as "Liberty", you can use the checked option. For value "yes" or "X" are commonly used, or you can be more descriptive, such as, "Give me Liberty." hidden name=name value=string Example: [] <-- Something hidden between the brackets. [] Usage: Used to send hidden values to the CGI process or script. A good way to send information that _you_ need, that doesn't have any interest to the user of the web form. With your MindSpring Web Hosting account, you can use it to send web server system environment variables! Tip: Don't forget that users can view the source code of your page. password <input type="password" size="20"> maxlength=n name=name notab onblur=applet onchange=applet onfocus=applet onselect=applet size=n taborder=n value=string Example: <-- type something and watch. <input type="password" name="password" size="8"> As you can see, what you type is replaced with asterisks or dots. Tip: This does not encrypt the password! It merely obstructs others from being able to read your password over your shoulder, but is still considered good design and style. radio <input type="radio"> checked name=name notab onclick=applet taborder=n value=string Example: The glass is: Half full Half empty at the 30cc mark <input type="radio" name="radio1" value="positive"> Half full<br> <input type="radio" name="radio1" value="negative"> Half empty<br> <input type="radio" name="radio1" value="realistic"> at the 30cc mark</p> </blockquote> <p> "Please select from one of the following." Allows you to force a selection of one items from a group of many. Tip: All selections of a group must have the same "name=" value, and should have different "value=" values. If you use different "name="'s, then you have created separate selection groups. Again - Each group has one "name=" value, yet each "value=" should be different within that group. reset <input type="reset"> notab onclick=applet taborder=n value=string Example: <-- Press me! <input type="reset" value="reset"> Reset is used to clear any selected or entered values (other then those that are preset by the form itself). While rarely used in actual practice it's considered good design to include the reset control beside the submit control (explained next), both of which should be located toward the end of your form. submit <input type="submit"> name=name notab onclick=applet taborder=n value=string Example: <-- Not yet... <input type="submit" value="Submit"> This is the magic button, the one that makes it all happen. When the end-user clicks on this button all selections and data are sent to the CGI script specified in the action line of the form. text <input type="text" size="20"> maxlength=n name=name notab onblur=applet onchange=applet onfocus=applet onselect=applet size=n taborder=n value=string Example: First Name: <input type="text" name="text1" size="30"></p> <p> The text control is used to collect short text entries from the user, such as their first name, their last name, their phone number, etc. To collect larger pieces of information, you would want to use "textarea" instead. Textarea is explained below. Tip: You can use the value field to pre-enter data into the text, field, like so: Example: <input type="text" name="text2" size="30" value="Voila!"> Avoid overusing this feature, as it can become tedious erasing pre-entered values to write in those of your own. Also, you may wish to limit the total number of characters that a person may enter into a given text field by using the maxlength option. select <select size="1"> </select>... class=name multiple name=name onblur=applet onchange=applet onclick=applet onfocus=applet size=n style=style Example: Operating System: Solaris UNIX Linux OpenDos other Operating System: <select name="select1" size="1"> <option>Solaris UNIX</option> <option>Linux</option> <option>OpenDos</option> <option>other</option> </select></p> <p> Select must be used with the option control. (The option control is explained below.) Select is best used where the end-user must select from a list of many entries, without cluttering the pages with all of the possible selections. Tip: You can allow for multiple selections using the multiple option, making select operate much like checkboxes. There aren't many occasions where this makes sense, and some people may be confused by such an interface. If you are going to use it, it is suggested to also use the size options to allow the user to see about five of the options at the same time. option <select size="1"> <option> ... </option> </select> class=name selected style=style> value=string Example: Inside <select> ... </select> you have to use option fields to provide the options available for selection. There must be an option field for each entry. Tip: You can pre-select a value using the selected option. If in your select control you are using the multiple option, then you can pre-select multiple entries. textarea <textarea rows="1" cols="20"> ... </textarea> class=name cols=n name=name onblur=applet onchange=applet onfocus=applet onselect=applet rows=n style=style wrap=type Example: <textarea name="textarea1" rows="10" cols="30"> </textarea><p> Textarea is used for collecting larger entries from the end-user. You should specify the number of rows and columns you want, by using the rows and cols options. Textarea is commonly used for a feedback section, or for collecting free-form information. Members and visitors to the EarthLink website agree to abide by our Member Policies. EarthLink Privacy Policy © 2002 EarthLink, Inc. Members and visitors to the EarthLink website agree to abide by our Member Policies. EarthLink Privacy Policy © 2002 EarthLink, Inc.