Solid HTML That's As Simple As It Gets: FormsOct 31 '01 Write an essay on this topic.
Popular Products in Books
The Bottom Line Forms care contained within FORM tags. Form elements exist only within FORM tags, but forms can contain HTML formatting tags. Forms can be long, but they are repetitious.
Forms are common on the World Wide Web; just go to any search engine. Message boards, bulletin boards, classifieds, shopping carts, e-mail, polls, product reviews-- all of these things and many more make use of HTML forms. For those things to work the information entered into these forms must be processed by a script or program so that the results of the processing can be given to the person filling out the form. After all, what good is a search engine if it won't show search results? HTML alone is not enough to make forms work as intended. Use of additional scripting or programming is required, and this can take as much time to make as the web page containing the form. Forms processing is beyond the scope of this HTML guide, so I will focus just on the HTML needed to produce the actual form. HTML forms are easy to make, and there are a number of elements which can be included inside a form. The contents of a form are placed within <FORM>...</FORM> container tags. Because of the nature of forms, form elements are used only within FORM tags. Other HTML tags can be used within a form, but form-related tags are limited in scope to the form containing them. What elements can be included in a form? • The FORM container tags • Input fields and buttons • Checkboxes • Radio buttons • Single-line text fields • Multi-line text fields • Selection lists • Buttons __________________________________________________ The FORM Container Tags Just as TABLE tags contain the elements of a table, FORM tags contain the elements of a form. A number of attributes are used inside the FORM tag: NAME, METHOD, ACTION, ENCTYPE, and TARGET. The NAME attribute is an ID. Even if only one form is on a web page, the NAME attribute should be used so that scripts or programs using the form can function properly. Web pages can contain two or more forms on them, though, so in that case the NAME attribute is necessary. Here is a sample FORM with the NAME attribute: ========== <FORM NAME="TestForm"> Form elements go here </FORM> ========== Any ID can be used by the NAME attribute. For forms, it's a good idea to choose a name related to the function of the form. -------------------------------------------------- The METHOD attribute specifies how the form data is to be transmitted to the processing script or program. There are two acceptable values used by the METHOD attribute: GET and POST. If (METHOD="GET"), then data is stored in a systems environment variable called QUERY_STRING; whatever is in this special variable will be taken by the form processor. However, only 1024 bytes (1 Kilobyte) of data can be stored in the QUERY_STRING variable; forms which don't contain much data can use (METHOD="GET"). (METHOD="GET") is the default setting. However, if (METHOD="POST"), then the data is sent to the form processing script or program by the server. Long forms need to use (METHOD="POST") since 1 Megabyte (well over 1 million bytes) of data can be sent. If (METHOD="POST"), then the size of the data stream needs to be sent also; the size is contained by the variable CONTENT_LENGTH. Here is a FORM tag with the METHOD attribute: ========== <FORM NAME="TestForm" METHOD="POST"> Form elements go here </FORM> ========== -------------------------------------------------- The ACTION attribute is required-- this specifies the location of the form processing script or program. The ACTION attribute needs a URL or address. Most of the time the ACTION Attribute is in the form of (ACTION="http://ABC.websitename.XYZ/folder/filename.qqq") or (ACTION="filename.qqq"). As long as the location of the script or program processing the form data is specified as a valid URL, it doesn't matter how it is expressed. If form data is being sent by e-mail, then (ACTION="mailto:e-mailaddress@computer.xyz") is used. The e-mail address receiving the form data is written after the protocol prefix mailto:. WARNING: an e-mail message containing data sent by using (ACTION="mailto:e-mailaddress@computer.xyz") will appear as a series of characters separated by codes starting with the percent symbol. Spaces, punctuation marks, and strange characters will be represented by these percentage codes, and plus symbols will be littered throughout the "e-mail message" sent by the form. (This is one reason why scripts or programs are used to send data via e-mail instead of the "mailto:" URL.) My limited form knowledge features this hideous experience. Below is the FORM tag with the ACTION attribute: ========== <FORM NAME="TestForm" METHOD="POST" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Form elements go here </FORM> ========== -------------------------------------------------- The ENCTYPE attribute specifies one of two encoding methods for sending the data to the script or program specified by the ACTION attribute. The default is (ENCTYPE="application/x-www-form-urlencoded"). (ENCTYPE="multipart/form-data") is also used. Whichever ENCTYPE value is used, the value is case-sensitive-- to be safe, use lower case letters. Here is the FORM tag with the ACTION attribute: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Form elements go here </FORM> ========== -------------------------------------------------- The TARGET attribute specifies where the processed data will appear. If the TARGET attribute is omitted, then the output will be shown in the window containing the form. Otherwise, the output will be shown in a different window or a specific frame is a web page uses frames. Below is the FORM tag with a specified TARGET ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Form elements go here </FORM> ========== This is the FORM tag in action. It is shown here for instructional purposes only, so don't try using it. However, this is the hardest part of using forms. The easy aspects are coming up now. __________________________________________________ Checkboxes Checkboxes are usually rendered as squares which are empty or which have check marks inside them indicating selection. Text-only web browsers will simulate checkboxes with text characters, but there will be space for checking the checkbox. Here is a form containing checkboxes: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> More form elements go here </FORM> ========== More than one checkbox can be selected, so the choices are not mutually exclusive. (TYPE="checkbox") is required to indicate that the form element is a cehckbox. (NAME="name of the checkbox") is required for form processing purposes. The VALUE attribute shows if the checkbox is selected or not; if the VALUE attribute is omitted, then by default it is considered "on" (but the on/off state of the checkbox can be changed by the person filling out the form). CHECKED is optional, but it shows that the checkbox appears on the form already checked. __________________________________________________ Radio buttons Radio buttons do the same thing as checkboxes, but the choices are mutually exclusive-- no one is both a teenager and old enough to run for mayor. Instead of squares, circles are used to represent radio buttons. Below is the form with radio buttons: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> <P> What is your age range:<BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> Under 21<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 21 or Over<BR> More form elements go here </FORM> ========== If a series of radio buttons are related, they can be made part of a group by assigning them the same NAME. __________________________________________________ Single-line text fields Text fields are used for entering data needed by a form. Address information is an example of data which is good for a single-line text field. Below is a form with single-line text fields: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> <P> What is your age range:<BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> Under 21<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 21 or Over<BR> <P> <PRE> First Name<INPUT TYPE="text" NAME="fname" SIZE="15"><BR> Last Name<INPUT TYPE="text" NAME="lname" SIZE="15"><BR> Street Address<INPUT TYPE="text" NAME="saddr" SIZE="30"><BR> City<INPUT TYPE="text" NAME="city" SIZE="30"><BR> Country<INPUT TYPE="text" NAME="country" SIZE="20" VALUE="CANADA"><BR> </PRE> More form elements go here </FORM> ========== (TYPE="text") is needed to make the form element a single-line text field. The NAME attribute is used to give a name to the text field; this name is used for form processing purposes. The SIZE attribute specifies the length of the text field as it appears on screen; data exceeding this length can be entered into the text field, but after a point the field stops accepting data. If the VALUE attribute is used, whatever value is specified will appear inside the rendered text field. Sometimes single-line text fields need to be arranged so that as a group they are readable and easy on the eye. HTML tables can help make the text fields look organized. Another way of making text fields look organized is by using PRE tags. PRE tags force the web browser to display whatever is between them exactly as coded in the web page file. The contents appear pre-formatted. PRE tags make text fields easy to align; however, the font face is usually limited to a fixed-width font such as Courier New. The saving grace of the PRE tag is how it allows spaces to be recognized (without the PRE tags, the extra spaces are simply ignored). A later HTML guide will show some other HTML tags which can be used for formatting text. While most single-line text fields will be set to (TYPE="text"), there will be times when very specialized text fields need to be used. For forms which require passwords fields, (TYPE="password") so that whatever is entered is hidden by asterisks or other characters depending on the web browser. While a person completes a form, the form itself can contain pre-set single-line text fields which help make form processing easier; for this purpose (TYPE="hidden"). Otherwise, single-line text fields are set to (TYPE="text"). __________________________________________________ Multi-line text fields Some forms are made so that data can be sent via e-mail to the web site administrator. Some forms provide a feedback mechanism for the web site visitor. Some forms provide a means of entering "descriptive" information about an item which other form elements won't allow. Each of these forms and many more make use of multi-line text fields. Below is a form with a multi-line text field: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> <P> What is your age range:<BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> Under 21<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 21 or Over<BR> <PRE> First Name<INPUT TYPE="text" NAME="fname" SIZE="15"><BR> Last Name<INPUT TYPE="text" NAME="lname" SIZE="15"><BR> Street Address<INPUT TYPE="text" NAME="saddr" SIZE="30"><BR> City<INPUT TYPE="text" NAME="city" SIZE="30"><BR> Country<INPUT TYPE="text" NAME="country" SIZE="20" VALUE="CANADA"><BR> </PRE> Comments? Feedback? Sugegstions?<BR> <TEXTAREA NAME="comments" ROWS="25" COLS="70" WRAP="physical"> Enter comments or feedback or suggestions here. </TEXTAREA> </FORM> ========== The INPUT tag is used to specify a single-line text field. However, the multi-line text field is specified by using TEXTAREA tags. Because it can contain text which will appear on screen, there is a closing tag. Since a multi-line text field can be any size, row size and column size are specified by the ROWS and COLS attributes respectively. The NAME attribute specifies the name of the form element, and it is used for form processing purposes. The WRAP attribute is used to indicate how text is displayed and transmitted: (WRAP="off") specifies that word-wrap during data entry is off; (WRAP="virtual") specifies that word-wrap is visible on screen but won't be present during data transmission; (WRAP="physical") specifies that word-wrap is visible on screen and the transmitted data will have line breaks where appropriate. __________________________________________________ Selection lists Selection lists are similar in function to checkboxes and radio buttons. However, selection lists are made to provide lots of choices in a small space. Pull-down lists show one selection, yet they contain numerous options or selections. Some selection lists can show the first few of dozens of options or selections. Most selection lists permit only one choice to be made (like radio buttons), but once in a while there will be a selection list which which permits multiple selections (like checkboxes). Below is a form containing a selection list which permits multiple selections to be made: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> <P> What is your age range:<BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> Under 21<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 21 or Over<BR> <PRE> First Name<INPUT TYPE="text" NAME="fname" SIZE="15"><BR> Last Name<INPUT TYPE="text" NAME="lname" SIZE="15"><BR> Street Address<INPUT TYPE="text" NAME="saddr" SIZE="30"><BR> City<INPUT TYPE="text" NAME="city" SIZE="30"><BR> Country<INPUT TYPE="text" NAME="country" SIZE="20" VALUE="CANADA"><BR> </PRE> Comments? Feedback? Sugegstions?<BR> <TEXTAREA NAME="comments" ROWS="25" COLS="70" WRAP="physical"> Enter comments or feedback or suggestions here. </TEXTAREA> <SELECT NAME="List" SIZE="3" MULTIPLE> <OPTION VALUE="0" SELECTED>Life <OPTION VALUE="1">Liberty <OPTION VALUE="2">The Pursuit of Happiness <OPTION VALUE="3">Equality <OPTION VALUE="4">Liberty <OPTION VALUE="5">Fraternity <OPTION VALUE="6">Shopping <OPTION VALUE="7">Spending <OPTION VALUE="8">Saving </SELECT> </FORM> ========== The SELECT tags indicate the presence of a selection list. The NAME attribute gives a name to the selection list, and this name is used for form processing purposes. The SIZE attribute shows how many selections appear on screen; if the SIZE attribute is omitted, then it is set to 1 by default. So that more than one item from the selection list can be chosen, the MULTIPLE attribute is added. In the example selection list items were chosen which would appeal to many people, and most people want to have more than one of them. For that reason MULTIPLE was included in the SELECT tag. However, if the selection list contained a list of states or provinces-- we are present in only one at any point in time-- then the MULTIPLE attribute is omitted. Each option of the selection list is specified by OPTION tags. VALUE attributes in each option tag assign a value to a choice, and these values are used for form processing purposes. These VALUES can be anything, but there are times when it is best to use numbers. Whether these VALUE attributes are numbers or text will depend on who writes the form processing script or program. __________________________________________________ Buttons When the form is completed and ready to be sent, there must be a way to send the form. Also, if the form needs to be cleared so that it appears clean before proceeding with data entry, then the form needs to be reset. Below is the form with buttons: ========== <FORM NAME="TestForm" METHOD="POST" ENCTYPE="multipart/form-data" TARGET="DoorNumberThree" ACTION="http://www.website.net/cgi-bin/filename.cgi"> Check the box or boxes which show your favorite colors<BR> <INPUT TYPE="checkbox" NAME="Red" VALUE="off"> Red<BR> <INPUT TYPE="checkbox" NAME="Green" VALUE="off"> Green<BR> <INPUT TYPE="checkbox" NAME="Blue" VALUE="on" CHECKED> Blue<BR> <P> What is your age range:<BR> <INPUT TYPE="radio" NAME="age" VALUE="0"> Under 21<BR> <INPUT TYPE="radio" NAME="age" VALUE="1"> 21 or Over<BR> <PRE> First Name<INPUT TYPE="text" NAME="fname" SIZE="15"><BR> Last Name<INPUT TYPE="text" NAME="lname" SIZE="15"><BR> Street Address<INPUT TYPE="text" NAME="saddr" SIZE="30"><BR> City<INPUT TYPE="text" NAME="city" SIZE="30"><BR> Country<INPUT TYPE="text" NAME="country" SIZE="20" VALUE="CANADA"><BR> </PRE> Comments? Feedback? Sugegstions?<BR> <TEXTAREA NAME="comments" ROWS="25" COLS="70" WRAP="physical"> Enter comments or feedback or suggestions here. </TEXTAREA> <SELECT NAME="List" SIZE="3" MULTIPLE> <OPTION VALUE="0" SELECTED>Life <OPTION VALUE="1">Liberty <OPTION VALUE="2">The Pursuit of Happiness <OPTION VALUE="3">Equality <OPTION VALUE="4">Liberty <OPTION VALUE="5">Fraternity <OPTION VALUE="6">Shopping <OPTION VALUE="7">Spending <OPTION VALUE="8">Saving </SELECT><BR> <INPUT TYPE="submit" NAME="Submit" VALUE="Send the Data"> <INPUT TYPE="reset" NAME="Reset" VALUE="Clear the Form"> <INPUT TYPE="button" NAME="Other" VALUE="Do Something Else"> </FORM> ========== Form buttons can be one of three types: Submit buttons, Reset buttons, and Functional buttons. Submit and Reset buttons have pre-defined web browser actions associated with them. If (TYPE="submit"), then a submit button is created and used to submit a completed form. If (TYPE="reset"), then a Reset button is created and used to wipe a form clean. However, if (TYPE="button"), then a user-defined button is created. This button will perform an action specified by the web page creator, and an association has to be made between the button and the action. This is beyond the scope of the HTML guide since these actions tend to be scripts written in some other language. However, Submit and Reset buttons tend to be enough. In all cases, the VALUE attribute of a button specifies the text which appears on the button itself. The text "Send the Data" is used for the Submit button, while the text "Clear the Form" is used for the Reset button. While the VALUE attributes can be set to any text desired, usually the text is written to reflect the purpose of the button. ("Clear the Form" could be rewritten as either "Wax the Car" or "Engage." and "Clear the Form" could be rewritten as either "Sand the Floor" or "D'Oh!"; however, those descriptions don't help the person filling out the form.) __________________________________________________ This HTML guide covered the basics of form creation. The HTML tags used to make forms can appear intimidating, but the reality is that much of the form is repetitious (especially selection lists, checkboxes, radio buttons, and single-line text fields). Form elements are contained within FORM tags, but they don't work outside FORM tags. Other HTML tags can be placed inside forms for formatting purposes. FORM tags need METHOD and ACTION attributes so that the form can work as expected, and there must be a script or program elsewhere which will process the form data so that desired output is given to the person who submitted the form. The next HTML guide will cover frames. If you know how to handle tables, then frames will be easy. Frames are actually simpler, but they still require effort to work properly.  |
| Write the first comment on this review! |
|
Ads by Google
|
