Home > HTML > Basics of HTML > Here

FORMS in HTML
Version 1.3 - July 4, 2005


(This page presumes familiarity with basic HTML. If you wish to refresh the basics, or do not yet have the basics, please see the Basics in HTML page, then click back here for instruction in Forms.)

FORMS are an important part of many web sites. Especially in the area of e-commerce, they are a staple. They are also quite easy to implement, since often only a few commands are needed and one then relies on the visitor’s browser to do the real magic that makes the form look impressive. The one somewhat complicated issue is “shipping” the data once it is collected — so most of the details on that subject are reserved for the end of the article.

As with all of these HTML instruction pages, you may sometimes want to see more details of examples that are given and how they are coded. Feel free to examine the source code of this page. You can do this by right-clicking on the page and selecting View Source. You can then use the Find feature of the text editor (or whatever program you have opening the source code) to jump right to the section you want to examine.


THE <form> TAG

<form> ... </form>
FORM tags. These are the base tags that mark the beginning and end of the form. Everything else on your page pertaining to the form goes between these tags.


THE <input> TAG

<input>
The INPUT tag, which goes inside the FORM tags, is the primary component of forms. There can be, and usually will be, multiple INPUT tags in a given form. These tags provide the familiar input fields of a form, whether they be text boxes, checkboxes, radio buttons, or other input elements. The INPUT tag has a number of important attributes (which, as appropriate, can be combined into a single tag, but are listed separately here for sake of discussion):


OTHER TAGS THAT GO INSIDE A FORM

<textarea> ... </textarea>
TEXTAREA tags go inside the FORM tags. They are an alternative to the index options above, forming a bigger (multiline) text-box. Use a name=x attribute to name it, and rows=n and cols=n to specify the size of the box in lines down and characters across. Text within the TEXTAREA tags (between the opening and closing tags) will prepopulate the field (so VALUE is not used). Maximum size is 215 (32,768) characters. You also can use the attributes disabled and readonly. Here is a sample of a prepopulated box 40 characters across and 5 lines deep:

<button> ... </button>
BUTTON tags go inside the FORM tags. They are an alternative to using a BUTTON option in a TYPE= attribute. Between the opening and the closing tags, you can put pretty much anything you want to appear on the button, much as if you were putting them in a paragraph: Text, images, sounds, etc. Use the type= attribute to specify button, reset, or submit types. Use the value= attribute to specify the initial value of the button.

<select> ... </select>
SELECT tags go inside the FORM tags. This is what you use to make a drop-down selection box. In addition to general attributes such as disabled and name, the following attributes can be used:


THE <fieldset> TAG

<fieldset> ... </fieldset>
FIELDSET tags. Optional tags that may be used to visually organize forms or other page content. FIELDSET draws a box around a form or other page content, and puts a stylish LEGEND in it. However, it only works on newer browsers (IE 4.0 or later, or Netscape 6). Also, as with most HTML formatting commands, ultimately it is up to the browser how to render this, and for FIELDSET there is considerable difference in how the encompassing box is drawn by different browsers.

NOTE: This present page is a really good example of how different browsers display content differently. View this page in, say, IE 6 and Netscape 6, and you will see quite a number of things displayed very differently, from spacing and sizing to form objects.

Within the FIELDSET tags, use <legend> ... </legend> tags to enclose the text you want to use to label the box. FIELDSET tags are only recommended for use with forms, but they do provide a nice layout option that may be used occasionally for other page composition purposes; for an example, see the Microsoft Knowledge Base Links portal on this site.

Search This Site
Search for:  
Show:   results  summaries

HINT: The LEGEND can be formatted with the style attribute, or by other formatting tags applied to the text within the legend, to give more control over the appearance of the fieldset. In the example above, the text has been bolded.


SHIPPING DATA TO ITS DESTINATION

Having addressed the, uh, form of a FORM, we return to the important question of how to make it practical; that is, how to ship the gathered data (specifically, the name and value information and free-entry text for each field) somewhere so that you actually get to use it!

Your basic tools for this purpose are the action and method attributes of the FORM tag as discussed in more detail above. Using the action attribute, you control where the collected data is sent. Using the method attribute, you control how it is sent there. To review, the main “places” that the data can be routed are:

Most often you will route it to an email address or a CGI script. Each of these has special considerations:

I recommend using CGI when possible. It’s the better approach both now and for future development. Nonetheless, both methods are given here out of consideration for the different levels of technical comfort and technical sophistication of people accessing this page.

Using the email address approach is simple and straightforward. Examples are given above with the initial discussion of the action attribute. For email submissions you will always use method="post".

Regarding CGI scripts, I think the best approach will be to give several examples. Below are samples taken from different pages on the present site. For each one, I provide a link to the page where it actually is used, and then the relevant line from the form’s code that pertains to how the data is transmitted. To see this in a larger context, click the link to visit the page where it is actually used, and use your browser’s View Source feature to examine the complete code. (In the examples, I give below only the line that actually indicates where the data is to be sent for processing. In many cases, a script also requires that specific data fields, hidden or otherwise, be passed to it.) The web page creator who is coding the form usually doesn’t need to know anything further than what is required to be sent, and where to send it — the script takes it from there.

Example No. 1: SIGNING THE GUEST BOOK. www.aumha.org/addguest.htm
This employs a PERL script titled guestbook.pl stored on my web server, called by:

	<form action="guestbook.pl" method=post>

Example No. 2: PAYPAL SUBMISSIONS. www.aumha.org/donate.htm
This employs a CGI script on PayPal’s server titled webscr, called by:

	<form action="https://www.paypal.com/cgi-bin/webscr" method=post>

Example No. 3: WHOIS SEARCH. www.aumha.org/search.htm
This employs a CGI script titled whois stored on my web server:

	<form action="/cgi-sys/whois" method=post>

Example No. 4: LOCKERGNOME SUBSCRIPTION. www.aumha.org/support.htm
For comparison, here is an example of shipping instructions using a web page URL. Something on the page must then know how to receive this and act on it.

	<form action="http://subscribe.pirillo.com/" method=post>
Visit Microsoft.com

  Top of Page   Home   Site Map   Search   Forums   Feedback   Donate