Understanding the Tags and Attributes Used to Create a Form
As mentioned previously, in addition to text fields, radio buttons, and check boxes used to prompt visitors for input, you can include pushbuttons, text, graphics images, and other Web page objects on a form. The HTML start and end form tags (<form></form>) tell the Web browser which portion of an HTML file to include in the form. Remember, a Web page form is a “container” not unlike an HTML table. You use a set of start and end table tags (<table></table>) to enclose the content you want the Web browser to place within a table. Similarly, you use a set of start and end form tags (<form></form>) to tell the Web browser which part of the Web page content is part of a form. The main difference between forms and tables is that the browser simply displays the data within an HTML table, but the Web browser not only displays a form, but also accepts input into the form’s elements and sends the form results to the Web server for processing. (Moreover, you can place multiple tables and multiple forms on a single Web page; however, although you can nest one table within another, you cannot nest forms.)
For example, you will learn how to replace the following placeholders for input fields and pushbuttons between a set of start and end form tags (<form></form>) to create forms that let you collect the information you want from your site visitors:
<form name="ExampleForm" action="http://www.NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" method="POST" title="Form ToolTip"
enctype="application/x-www-form-urlencoded">
<p>Form input fields & misc. pushbuttons</p>
<p>Form RESET and SUBMIT pushbuttons</p>
</form>
As shown in the current example, <form> tags typically include the following attributes:
• action: The uniform resource locator (URL) or Web address to which the Web browser sends the visitor’s form responses after the visitor clicks the form’s Submit button. For example, to send the form results (that is, the information entered and selections made on a form) as an e-mail message, you might set the value of the action attribute to a text string consisting of the keyword mailto: and an e-mail address. Similarly, to forward the form results to a program for further processing, set the value of the action attribute to the URL of the script responsible for sending the form results on their way.
• enctype: Tells the Web browser the encoding method to use for passing form data to the CGI script on the server. Normally, you will set the value of the enctype attribute to “application/x-www-form-urlencoded”.
• id: Used to give the form a unique name by which you can refer to the form in a script. If you do not “name” the form (by providing an id or a name attribute value), you must refer to the form by number. For example, in JavaScript, you would refer to the first form on the Web page as document.forms[0], the second form as document.forms[1], the third form as document.forms[2], and so on. Conversely, if you give each form on the Web page a unique ID, your script could refer to the form as document.formID (or simply as formID).
• method: Specifies the way in which the browser is to send the form results to the URL specified in the action attribute. The value of the method attribute will be either POST or GET. If you set the value of method to GET, the Web browser sends the form data to the Web server at the end of the URL given by the action attribute in the <form> tag. Conversely, if you set the value of the method attribute to POST, the Web browser sends the form data to the Web server in a separate HTTP message. According to HTML standards, you should use the GET method when the form is idempotent, that is, when the script processing the form makes no changes to data stored on the Web server. For example, forms used to search a database would use the GET method. Conversely, if processing form results causes side effects, such as changing the data stored in a DBMS, for example, you should use the POST method.
Never use the GET method to submit form results from a form that asks for a password. If you do so, you will expose the password the visitor enters as part of a URL stored in several locations including the Web browser’s history file and the Web server’s log file.
• name: Text string you can use to refer to the form by name in a script included within the Web page HTML. If you do not “name” the form (by providing a name or id attribute value), you must refer to the form by number. For example, if you give each form on the Web page a name or unique ID, your script could refer to the form as document.formname (or document.formID).
• onReset: The name of a function (that is, a script within the Web page HTML) the Web browser is to execute if the visitor clicks the form’s Reset button. The function will return a value of either True or False. If the function returns True, the Web browser will remove the visitor’s input and reset the form’s elements to their original, default values. Conversely, if the function returns a value of False, the Web browser will not reset the form field values.
• onSubmit: The name of a function (that is, a script within the Web page HTML) the Web browser is to execute when the visitor clicks the form’s Submit button. Normally you use an onSubmit function to validate form results prior to sending them to the Web server for processing. If the function returns a value of False, the Web browser will not send the form results to the Web server. Conversely, if the function returns a value of True, the Web browser sends the form results on to the Web server for processing by the CGI script or other program named in the action attribute in the <form> tag.
• target: The name of the window in which you want the Web browser to display the form’s confirmation page.
• title: Text (such as the name or description of the form) you want the Web browser to display when the site visitor lets the mouse pointer hover over any one spot within the form for several seconds.
For now, the important thing to understand is that you place the objects you want on the form (that is, you place the form’s elements on the form) by inserting the HTML tag(s) for each element between the form’s start and end form tags(<form></form>). Moreover, every form must have some type of a “submit” button that, when clicked, tells the Web browser to send the form results (that is, the form’s data) to a URL specified by the action attribute in the form’s <form> tag.