HTML Forms How do I use forms?
How do I get form data emailed to me?
How can I use tables to structure forms?
How do I make a form so it can be submitted by hitting ENTER?
How do I set the focus to the first form field?
How can I make a form with custom buttons?
Can I have two or more Submit buttons in the same form?
Can I have two or more actions in the same form?
Can I require that some fields be filled in?
How can I allow file uploads to my web site?
How can I use forms for pull-down navigation menus?

Section 8: HTML Forms

8.1. How do I use forms?

The basic syntax for a form is: <FORM ACTION="<var>[URL]</var>">...</FORM>

When the form is submitted, the form data is sent to the URL specified in the ACTION attribute. This URL should refer to a server-side (e.g., CGI) program that will process the form data. The form itself should contain

  • at least one submit button (i.e., an <INPUT TYPE="submit" ...> element),
  • form data elements (e.g., <INPUT>, <TEXTAREA>, and <SELECT>) as needed, and
  • additional markup (e.g., identifying data elements, presenting instructions) as needed.

A more detailed explanation of the use of forms is available at URL: http://mirror.subotnik.net/jkorpela/forms/. If you want to install CGI programs on your server, the following are useful resources:

8.2. How do I get form data emailed to me?

The only reliable mechanism for processing form submissions is with a server-side (e.g., CGI) program. To send form data to yourself via email, you should use a server-side program that processes the form submission and sends the data to your email address.

Some web service providers make standard form-to-email programs available to their customers. Check with your service provider for details.

If you can install CGI programs on your own server, see the answer to the previous question for a list of useful resources.

If you can't run CGI programs on your own server, you can use a remotely hosted form-to-email services. A list of such services can be found at URL: http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/. Note that the provider of a remotely hosted service will have access to any data submitted via the service.

Forms that use ACTION="mailto:..." are unreliable. They may work for some of your users, but they will fail for others who have different software configurations.

8.3. How can I use tables to structure forms?

Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.

To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.

<FORM ACTION="<var>[URL]</var>">

   <TABLE BORDER="0">
      <TR>
         <TH>Account:</TH>
         <TD><INPUT TYPE="text" NAME="account"></TD>
      </TR>

      <TR>
         <TH>Password:</TH>
         <TD><INPUT TYPE="password" NAME="password"></TD>
      </TR>
      <TR>

         <TD> </TD>
         <TD><INPUT TYPE="submit" NAME="Log On"></TD>
      </TR>
   </TABLE>
</FORM>

8.4. How do I make a form so it can be submitted by hitting ENTER?

The short answer is that the form should just have one <INPUT TYPE=TEXT> and no TEXTAREA, though it can have other form elements like checkboxes and radio buttons. For a more detailed answer, see URL: http://ppewww.ph.gla.ac.uk/%7Eflavell/www/formquestion.html.

8.5. How do I set the focus to the first form field?

You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this:

<FORM ID="<var>myform</var>" NAME="<var>myform</var>" ACTION=...>
    <INPUT TYPE="text" ID="<var>myinput</var>" NAME="<var>myinput</var>" ...>

</FORM>

<script type="text/javascript"><!--
document.<var>myform</var>.<var>myinput</var>.focus();
//--></script>

A similar approach uses <BODY ONLOAD=...> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.

8.6. How can I make a form with custom buttons?

Rather than a normal submit button (<INPUT TYPE=submit ...>), you can use an image of a custom submit button. Use <INPUT NAME=Send TYPE=image SRC="http://url.to/image.gif" ALT="Send" VALUE="Send">. Most browsers will also send the x and y coordinates of the location where the user clicked on the image to the server. They are available as "Send.x=000&Send.y=000" in the CGI input. For more information, see URL: http://ppewww.ph.gla.ac.uk/%7eflavell/www/trysub.html.

For the reset button, one could use <BUTTON TYPE=reset ...>, JavaScript, and/or style sheets, although none of these mechanisms work universally. For more information, see URL: http://mirror.subotnik.net/jkorpela/forms/imagereset.html.

8.7. Can I have two or more Submit buttons in the same form?

Sure. This is part of HTML 2.0 Forms support (some early browsers did not support it, but browser coverage is now excellent).

You will need to give your Submit buttons a Name attribute, and, optionally, a Value attribute. In order to determine which button was used, you will want to use distinctive Names, or Values, or both. Browsers will display the Value, in addition to sending it to the server, so choose something that's meaningful to the user as in the following example:

<INPUT TYPE=SUBMIT NAME=join VALUE="I want to join now"> -or-
<INPUT TYPE=SUBMIT NAME=info VALUE="Please send full details">

Note that if you are using image submit buttons, you need to provide different Value attributes for them too.

If you're unsure what results you're going to get when you submit your form, TipJar has a standard script which you can use. Code this, for example (assuming method "post"):

<FORM METHOD="POST" ACTION="http://www.tipjar.com/cgi-bin/test">

and then go through the motions of submitting your form. The TipJar server decodes the form input, and displays the result to you.

8.8. Can I have two or more actions in the same form?

No. A form must have exactly one action. However, the server-side (e.g., CGI) program that processes your form submissions can perform any number of tasks (e.g., updating a database, sending email, logging a transaction) in response to a single form submission.

8.9. Can I require that some fields be filled in?

Yes. Have the server-side (e.g., CGI) program that processes the form submission send an error message if the field is not filled in properly. Ideally, this error message should include a copy of the original form with the original (incomplete) data filled in as the default values for the form fields.

In addition, you could use JavaScript in the form's ONSUBMIT attribute to check the form for those who have JavaScript enabled. If the form is incomplete, have the ONSUBMIT event handler inform the user of the problem and return false. Note that the server-side program should not rely upon the checking done by the client-side script.

8.10. How can I allow file uploads to my web site?

First of all, the RFC for this is located at URL: http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt.

File upload is handled by the CGI.pm Perl5 library available from URL: http://stein.cshl.org/WWW/software/CGI/cgi_docs.html. The most recent versions of the cgi-lib.pl library also support file upload.

These things are necessary for Web-based uploads:

  • An HTTP server that accepts uploads.
  • Access to the /cgi-bin/ to put the receiving script.
  • A form implemented something like this:

    <FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="fup.cgi">
    File to upload: <INPUT TYPE=file NAME=upfile><br><br> Notes about the file: <INPUT TYPE=text NAME=note><br><br> <INPUT TYPE=submit VALUE=Press> to upload the file!<br> </FORM>

Not all browsers support form-based file upload, so try to give alternatives where possible. Also, if you need to do file upload in conjunction with form-to-email, the Perl package MIME::Lite handles email attachments.

8.11. How can I use forms for pull-down navigation menus?

There is no way to do this in HTML only; something else must process the form. JavaScript processing will work only for readers with JavaScript-enabled browsers. CGI and other server-side processing is reliable for human readers, but search engines have problems following any form-based navigation.

See http://mirror.subotnik.net/jkorpela/forms/navmenu.html, which explains how to create pull-down menus, as well as some better navigation alternatives.