The <form> Tag

Topics on This Page

The <form> Tag
The method Attribute
The enctype Attribute
The target Attribute
The name Attribute
The action Attribute
Example — A mailto: Form

The <form> Tag

<form>...</form>

Required attributes:

  action="action"

Optional attributes:

  method="get|post"
  enctype="EncodingType"
  target="target"
  name="name"

The <form>...</form> tag indicates the beginning and end of a form, and tells the browser how to handle a submitted form. Within the form, you will include form gadgets: text boxes, textareas, radio buttons, checkboxes, select boxes and/or hidden fields. You can also include text and other tags. You can include things like tables or lists for formatting the form layout.

The method Attribute

method is an optional attribute, and defaults to method="get". The two methods get and post are simply two different methods by which the browser can send the form data. The server-side program that receives the form data will dictate which method you can use. Some programs are coded to accept data in either format, while others can only accept one or the other.

The enctype Attribute

enctype is an optional attribute that specifies how the form data is encoded. Most of the time, you will omit this attribute. Special encoding types are used in unusual cases. For example, if you allow the user to send a file as part of the form, you may need to use a special enctype that allows that (I'm not discussing how to send files here).

The target Attribute

target can be used in a frames site to have the server-side program respond in a different frame than the one that contains the form. target="_blank" can be used in any site to have the server-side program respond in a new window rather than in the window that contains the form.

The name Attribute

name can be used to give the form a name. You only need to name a form if you're using a client-side scripting language such as JavaScript to work with the form.

The action Attribute

The action attribute tells the browser what to do when the form is submitted.

A "mailto:" form uses action="mailto:emailAddress". The results of the form are emailed to the specified email address. mailto: forms are useful for learning to code forms, but they're not useful on "real" web sites. Many IE and AOL users cannot submit mailto: forms, and Netscape users can only submit mailto: forms if they've configured the browser for sending email — which they usually won't have done if they're using an email client other than the Netscape one, or if they're using an online email system such as Hotmail or Yahoo mail. When you do use a mailto: form, you'll probably find that you want to include enctype="text/plain" so that the form data arrives in a format that's easier to read. Always specify method="post" for mailto: forms.

Most of the time, you'll want your form data sent to a server-side program. CGI programs are frequently used for this purpose. CGI programs can be written in Perl, C++, Java, or any of a number of other languages. Perl is the language most frequently used for CGI programs, and many people incorrectly think of CGI and Perl as being equivalent. Besides CGI, there are many other types of server-side programs: ASP, JSP, and many, many others.

To invoke a server-side program, the action attribute specifies the URL of the program: action="http://www.yourdomain.com/cgi-bin/myprogram.pl", for example. The server-side program receives the data that the user has entered into the form, and can do whatever is needed with the form. It can forward it on to an email address, or it can update a database, for example. The program also sends back the next page to display to your user — often, a page that thanks the user for filling out the form.

When invoking a server-side program, that program will dictate whether you should use the get or post method. You will usually omit enctype unless the program requires some special enctype.

Example — A mailto: Form

The form in this example is a mailto: form. Put your own email address into the action attribute of the <form> tag. When you submit the form, the form data will be emailed to you — provided your browser will let you submit the form. If you're using IE, it's quite possible that your browser will bring up a blank email dialog rather than submitting the form.

Try adding some additional gadgets such as textareas, radio buttons and checkboxes.