15.1. The Basic Form ElementThe form element is used to designate an area of a web page as a form.
<form> ... </form> Attributes
The form may contain any web content (text, images, tables, and so on), but its function is to be a container for a number of controls (checkboxes, menus, text-entry fields, buttons, and the like) used for entering information. It also has the attributes necessary for interacting with the form-processing program. You can have several forms within a single document, but they cannot be nested, and you must be careful they do not overlap. When the user completes the form and presses the "submit" button, the browser takes the information, arranges it into name/value pairs, encodes the information for transfer, and then sends it off to the server. Figure 15-1 shows the form resulting from this simple form markup example. <h2>Sign the Guestbook:</h2> <form action="/cgi-bin/guestbook.pl" method="get"> <p> First Name: 15.1.1. The action AttributeThe action attribute in the form element provides the URL of the program to be used for processing the form. In the example in Figure 15-1, the form information is going to a Perl script called guestbook.pl, which resides in the cgi-bin directory of the current server (by convention, CGI programs are usually kept in a directory called cgi-bin). Figure 15-1. A simple form15.1.2. The method AttributeThe method attribute specifies one of two methods, either get or post, for submitting the form information to the server. Form information is typically transferred in a series of variables with their respective content, separated by the ampersand (&), as shown here: variable1=content1&variable2=content2&variable3=content3 The name attributes of form control elements provide the variable names. The content the user enters makes up the content assigned to the variable. Using the form in Figure 15-1 as an example, if a user entered "Josephine" next to "First Name" and "Josie" next to "Nickname," the form passes the variables on in this format: name=Josephine&nickname=Josie With the get method, the browser transfers the data from the form as part of the URL itself (appended to the end and separated by a question mark) in a single transmission. The information gathered from the nickname example would be transferred via the get method as follows: get http://www.domainname.com/cgi-bin/guestbook.pl?name= Josephine&nickname=Josie The post method transmits the form input information separated from the URL, in essentially a two-part message. The first part of the message is simply the special header sent by the browser with each request. This header contains the URL from the form element, combined with a statement that this is a post request, plus some other headers we won't discuss here. This is followed by the actual form data. When the server sees the word "post" at the beginning of the message, it stays tuned for the data. The information gathered with the name and nickname form would read as follows using the post method: post http://www.domainname.com/cgi-bin/guestbook.pl HTTP1.0 ... [more headers here] name=Josephine&nickname=Josie Whether you should use post or get may depend on the requirements of your server. In general, if you have a short form with a few short fields, use the get method. Conversely, long, complex forms are best sent via post. If security is an issue (such as when using the input type="password" element), use post, because it offers an opportunity for encryption rather than sending the form data straight away tacked onto the URL. One advantage of get is that the request can be bookmarked, because everything in the request is in the URL. This isn't true with post.
15.1.3. EncodingAnother behind-the-scenes step that happens in the transaction is that the data gets encoded using standard URL encoding . This is a method for translating spaces and other characters not permitted in URLs (such as slashes) into their hexadecimal equivalents. For example, the space character translates to %20, and the slash character is transferred as %2F. The default encoding format, the Internet Media Type (application/x-www-form-urlencoded), will suffice for most forms. If your form includes a file input type (for uploading documents to the server), you should use the enctype attribute to set the encoding to its alternate setting, multipart/form-data. |