William M. PegramRevised: March 19, 2012
Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me
FormsHTML is almost exclusively oriented toward the presentation of information. The primary exception is forms -- the primary purpose of a form is to obtain information from the user. A form typically consists of several form elements. The principal form elements which can be put on a web page are listed shown below. In each instance, I have shown the name of the object, what it looks like, and then the HTML required to produce the object shown.
Text field:<input type="file" name="upload" />This displays a "Browse" button which permits the user to select a file to be uploaded to the server when the form is submitted. Depending on the server, it may be necessary to specify enctype ="multipart/form-data" within the <form> tag.
Hidden Form Field
Not surprisingly, a hidden form field does not display in the browser to the user. The syntax is
<input type="hidden" name="somename" value="somevalue" />
The hidden form field is generally used where the information on the form is being submitted to a general form-processing program. For example, suppose the information entered on the form is submitted to a program which formats the information and sends it to the webmaster of the webpage. This form-processing program obviously needs to know the email address of the webmaster so that it can send the webmaster the information. If the webmaster has the ability to edit the program, he can "hard code" the address right into the program. However, where there is no such ability or desire to edit the program, another approach is to pass this information to the program as a parameter. Hidden form fields are the most common technique to do this, and there will be one hidden field for each parameter that is passed. A related example would be a Paypal shopping cart button such as the following:
Member Advance Ticket - $20:
The code for this is as follows (PayPal may now be using somewhat different code):
Member Advance Ticket - $20:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="firstname.lastname@example.org">
<input type="hidden" name="item_name"
value="Member Advance Ticket - WDCSA Holiday Party - Sunday December 12 6-9PM">
<input type="hidden" name="item_number" value="Holiday Party Member Advance Ticket">
<input type="hidden" name="amount" value="20.00">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit"
alt="Make payments with PayPal - it's fast, free and secure!" width="87" height="23">
<input type="hidden" name="add" value="1">
The hidden form fields tell the PayPal server the name of the item and its price so it can be displayed correctly in the shopping cart as well as the business who is to receive the money (identified by email address).
Submitting and Processing Form InformationOne can put as many form elements within one set of <form</form> tags as desired. Unfortunately there is no simple and universal way for the information entered on a form to be submitted and processed. There are three alternatives:
For the first alternative, one specifies action="mailto:email address" where email address is the email address where the information should be sent. For the second alternative, the ACTION attribute of the FORM tag is used to specify the address of the page to receive the information, which is sometimes the same as the page containing the form (termed a "postback" in ASP.NET). For the last alternative, no ACTION attribute is needed.
- The information can be emailed to an email address using the mailto: attribute. One must specify method=post. If the enctype attribute isn't included, the form information becomes an attachment to an email and there is encoding of special characters and spaces. Including enctype="text/plain" eliminates the encoding and puts the name=value pairs in the body of the email, each on a new line. However, just like the use of mailto: in connection with links, using mailto with forms will not work if the browser has not been configured to send email. This occurs for the home user if they haven't set up their browser for this feature or in computer lab settings at universities and elsewhere. As a result, this option is rarely used.
- The form information can be sent to the server hosting the web site or to another server. There are a variety of ways the server can process the information, including CGI scripts, Active Server Pages, Cold Fusion, PHP, ASP.NET,and Java Server Pages. These technologies can enter the information into a database and format the form information before emailing it to the recipient and they do not depend on the browser being configured to send email. In addition, they can also automatically take the user to a designated page following submission of the information which is particularly useful where the user needs to enter form information on more than one page.
The METHOD attribute of the form tag controls how the form information is transmitted. If method="get", the information is transmitted as part of the URL; if method="post", it is not. The default method is "get". Using the GET method is useful when developing the form since one can look at the URL and see what information is transmitted, however POST is more commonly used since it can transmit more information and the information submitted is not visible in the URL.
The ENCTYPE attribute of the form tag specifies how the form data is to be encoded. The default is enctype="application/x-www-form-urlencoded", which converts spaces in the form values to a plus sign, and nonalphanumeric characters into a percent sign followed by the hexadecimal digits that are the code for the character. If you are using the mailto attribute, you can specify enctype="text/plain" so that these conversions do not occur and each name=value pair is shown on a new line. If you are uploading a file using <input type="file">, you must specify enctype="multi-part/form-data"
Text and Formatting Considerations
A form generally consists of form elements and text that tells the user what information is sought in the particular form element. In some cases, the form element itself displays what information is being sought, typically through the VALUE attribute.
It is often useful to put the text and form elements into a table for alignment purposes. For example, the words accompanying the form element can be in one column and the form elements in another. Put the table element inside the form rather than the other way around.
Additional Form Elements
Several form elements are only supported in recent versions of browsers. These are discussed below:
The purpose of this tag is to explicitly link a label to a form element as opposed to the implicit linking provided by placing the label next to the form element. To do this, one gives the form element a unique id and then references this id in the for attribute of the label tag. For example,