Forms


Introduction to Forms

This section describes how to create forms within your HTML documents. Forms are used to gain information from the reader such as feedback, an on-line order for goods, database entry or subscription to a mailing list. We have divided the section between how to place a form on the page (the easy part) and how to get it to return some results (the not so easy part!).

If you can't get your head around writing forms, then trying visiting freedback.com. They are a FREE service and will generate the HTML for you as well as letting you use their scripts and their server, so you can easily add fill-out forms to your website.

Specific Markup

<FORM>, <INPUT>, <TEXTAREA>, <SELECT>, <OPTION>, MAILTO, METHOD

Go to ContentsGetting Started

The basic form and its elements

The basic form consists of the following code:

<FORM ACTION="...">
<INPUT TYPE="hidden" NAME="subject" VALUE="Title of Form">
 
form dialogs in here
 
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM>

There is a wide variety of dialog items available for you to place on your form. You must include the <FORM></FORM> tags or they will not show up. Dialog items are placed there using the <INPUT>, <SELECT> and <TEXTAREA> elements. Described in detail later, the dialog items are as follows:

Dialog Item<INPUT><SELECT><TEXTAREA>
Checkbox: *
Radio button: *
Text entry: *
Password: *
Image: *
File: *
Submit: *
Reset: *
Hidden:  *
Drop-down list:    *
Select box: *
Text Area: *

When a form is submitted, each form element defined with an <INPUT>, <SELECT> or <TEXTAREA> tag is sent to the server in the format name=value. The name comes from the tag's NAME attribute, and the value is the value of the form element when submitted, ie. the text input, radio button selected, etc.

Go to ContentsThe Details: <INPUT> dialog items

Single line text box: TYPE="text"

See <TEXTAREA> for multiple line text boxes.

Example of code

Just one line of text please:
<INPUT TYPE="text" NAME="My Single-Line Text Box" SIZE=50 MAXLENGTH=75 VALUE="default text">

How it renders

Just one line of text please:

Radio button group: TYPE="radio"

All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME.

Example of code

<INPUT TYPE="radio" NAME="Radio Button Group example" VALUE="yes" CHECKED> yup
<INPUT TYPE="radio" NAME="Radio Button Group example" VALUE="no"> nope

How it renders

yup nope

Checkbox group: TYPE="checkbox"

All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME.

Example of code

<INPUT TYPE="checkbox" NAME="CheckBox Button Group example" VALUE="1"> one
<INPUT TYPE="checkbox" NAME="CheckBox Button Group example" VALUE="2"> two
<INPUT TYPE="checkbox" NAME="CheckBox Button Group example" VALUE="3" CHECKED> three

How it renders

one two three

Password text box: TYPE="password"

A password text box is exactly the same as an ordinary text box except the text the user types does not show up on-screen; instead each character is usually rendered as an asterisk (*).

HTML itself cannot do intelligent things like interpreting passwords, it can only provide the interface to type them in. You will need to link (ACTION) the password form to a piece of programming, such as JavaScript or cgi-script (written in Visual Basic, C, Perl, etc.). Such scripts are beyond the scope of this Guide, however you should be able to find some scripts and relevant information in Matt's Script Archive external link. Also check out the FAQs.

Example of code

Please give the password:
<INPUT TYPE="password" NAME="Password Text Box" SIZE=50>

How it renders

Please give the password:

Image field: TYPE="image"

The whole form is sent when the user clicks on the graphic. The value from the image is in the form of pixel coordinates, taken from the top left of the graphic. They are returned in the form name.x and name.y, where x and y are the coordinates of the mouse-click and name is the value given in the NAME attribute.

Example of code

Submit a colour:
<INPUT TYPE="image" NAME="My ColoursImageField" SRC="graphics/colours.gif" ALIGN="absmiddle" WIDTH=100 HEIGHT=34>

How it renders

Submit a colour:

File attach: TYPE="file"

Netscape Navigator 3 and MS Internet Explorer 3 beta 2 upwards only. This input type enables the user to send a file and should bring up a text box and browse button (no browse button appears with Internet Explorer 3).

Example of code

Send your file:
<INPUT TYPE="file" NAME="The users file" SIZE=35 ACCEPT="image/*" MAXLENGTH=50>

How it renders

Send your file:

Submit and reset buttons: TYPE="submit" TYPE="reset"

Respectively used to send and clear (reset defaults) the form. Reset and Submit buttons normally have default text associated with them, although you can redefine this yourself using the VALUE attribute

Example of code

<INPUT TYPE="submit" VALUE="Yes! I want a copy">
<INPUT TYPE="reset">

How it renders


Plain buttons: TYPE="button"

Used to a put a button on the screen. Unfortunately, without the power of JavaScript functions added in, the button cannot actually do anything.

Example of code

<INPUT TYPE="button" VALUE="Press me for groovy stuff">

How it renders


Hidden fields: TYPE="hidden"

The only purpose for the hidden field is to store values that need to be sent to the server along with the form submission, but shouldn't be displayed by the web browser. In particular they are used to provide a title for the form, as in the example. They can also be used by JavaScript to store values for calculations without using variables and cookies.

Example of code

<INPUT TYPE="hidden" NAME="subject" VALUE="Title of Form">

Go to ContentsThe Details: <SELECT> dialog items

The <SELECT></SELECT> element is used to place drop-down or scrolling list boxes. An <OPTION></OPTION> element is also required to define each items in the list. The dialog item defaults to a drop-down list unless a SIZE attribute is included in the <SELECT> tag.

You may have seen list boxes used as hyperlinks to other locations. This is JavaScript at work and will be covered in the Tips n' Tricks section in due course.

Attributes of <SELECT>

<OPTION>

Each item you require in the list must be enclosed in a pair of <OPTION></OPTION> tags. The closing </OPTION> tag is 'optional' (no pun intended). To my mind this means that it is safer to use the closing tag, in case some older or more obscure browser require its presence. It also makes it more consistent with HTML as a whole.

Example of code

<P>Pick one:
<SELECT NAME="Single-line ListBox example">
<OPTION VALUE="1">choice 1</OPTION>
<OPTION SELECTED VALUE="2">choice 2</OPTION>
<OPTION VALUE="3">choice 3</OPTION>
<OPTION VALUE="4">choice 4</OPTION>
</SELECT</P>
 
<P>Pick some:
<SELECT NAME="Multi-line, multi-selection Listbox example" SIZE=3 MULTIPLE>
<OPTION VALUE="1">choice 1</OPTION>
<OPTION SELECTED VALUE="2">choice 2</OPTION>
<OPTION VALUE="3">choice 3</OPTION>
<OPTION VALUE="4">choice 4</OPTION>
</SELECT></P>

How it renders

Pick one:

Pick some:


Go to ContentsThe Details: <TEXTAREA> dialog items

The <TEXTAREA></TEXTAREA> element is used to provide a editable text input area for the user. Any default text you wish to give the text area should be placed between the two tags. You must include the end tag even if you don't want to provide any default text. You can specify the width and height of the text area and, for some browsers, the type of wrapping to apply to the input text.

Example of code

<TEXTAREA COLS=50 ROWS=10 WRAP="hard" NAME="Feedback text area">
Here's what I want to tell you about:
</TEXTAREA>

How it renders


Go to ContentsThe Details: Getting replies from a form

HTML forms collect data, but they do not usually process it. In order for a form to be processed, ie. do something, it must go somewhere. To enable this you need to include two attributes in the <FORM> tag, namely METHOD and ACTION.

The METHOD attribute takes the values post or get. Indicating post saves the information somewhere and may elicit a response, and get retrieves information, possibly based on a query. In most cases (feedback forms for example) you will need to set the METHOD to post. The value for Action is simply the address of the application which processes the information, often the URL of a cgi-script.

There are essentially four basic ways to process a form:

  1. Submit the form to a program stored on a web server.
  2. Process the form with JavaScript.
  3. Send the form to a database.
  4. E-mail the results of the form using mailto.

Submit the form to a program stored on a web server.

To process a form, you can submit the data to a program stored on a web server. The form and the server-side program should be designed together so that the program can process the form data being sent.

Traditionally the program would be a CGI-script (Common Gateway Interface). In most cases this would be written to process the form and send the results to an e-mail address in a nice legible manner; a process called form-to-mail. In order to have such an executable program you must have direct access to a server computer, along with the disk space and CPU time to spare. Many Internet service providers (ISPs) explicitly prohibit the use of subscribers' scripts external link on their computers because it slows the response time on the server and could present a security risk. For these reasons, many ISPs will have their own cgi-script available: check with your ISP. If they don't allow you to host your own scripts and do not have any form-to-mail software that you can use, ask them why not and consider moving somewhere that does.

Freedback.com If your ISP does not have its own form-to-mail script then, don't worry, you still have an alternative. I've recently come across freedback.com who will let you use their scripts and their server, so you can add cgi based fill-out forms to your website for FREE.

The following is an example of a form processed by a Perl CGI-script:

Example of code

<FORM METHOD="post" ACTION="/cgi-bin/cgi.pl">

Process the form with JavaScript.

One of the beauties of using JavaScript to process your form is that all the work is done by the browser itself meaning no connection to the server is made and things are generally quicker. JavaScript is often used as a method of checking the input by users - making sure all the fields are filled in and so on. Of course there are some downsides of using JavaScript. If you require an e-mail response to the form then the JavaScript program will almost always still have to access an application on the server to ellicit an action. More importantly, not all browsers and platforms support JavaScript. You can find out more about processing forms with JavaScript from one of NetscapeWorld's excellent pages, Do-it-yourself JavaScript formsexternal link.

The following is an example of a form processed by a fictional JavaScript program called 'form check':

Example of code

<FORM METHOD="post" onSubmit="return form_check()">

Send the form to a database.

This use of forms is becoming more and more common on corporate Intranets as a way of querying databases. If you're at the stage where you wish to create such a form then the chances are you already know more about it than me.

E-mail the results of the form to an e-mail account.

This is the simplest way of processing a form and results in the form data being sent as an e-mail to a specified address. The process involved uses the mailto ACTION to send the form. Being the simplest method it produces only crude results (but they do the job!). It must be noted that the mailto ACTION only works with Netscape browsers and therefore you should tell your readers such. For most people the most effective use of forms is through the use of CGI-script, be it your own, your ISP's or through a service such as the excellent freedback.com, who will use their own cgi-script to process your forms for free.

The following is an example of a form using the mailto to send the input data as an e-mail to user@provider.com, with the subject line 'feedback':

Example of code

<FORM METHOD="post" ACTION="mailto:user@provider.com?subject=feedback" ENCTYPE="text/plain">

On inspection of the example above, you will notice the addition of an ENCTYPE attribute. Without this attribute you would receive an e-mail with data in a contiguous stream. For example:

subject=Example+Form&age=under+18&name=Nigel+Tufnell
&email=ntufnell@spinaltap.com&details=This+is+a+test
+and+only+a+test.&opinion=great

Including the ENCTYPE="text/plain" makes the result much more readable:

subject=Example Form
age=over 40
name=Nigel Tufnell
email=ntufnell@spinaltap.com
details=This+is+a+test+and+only+a+test.
opinion=great

There is software available, such as that from Nisseb external link for the Mac and Informatik external link for the PC, which will parse the returned e-mails and present them in a more useable way.

Go to ContentsPutting it all together: an example form

The following example form uses many of the afore mentioned dialog items and returns a simple e-mail using the mailto action.

Example of code

<H3>Example Reply Form</H3>
<FORM ACTION="mailto:user@provider.com" METHOD="POST" ENCTYPE="text/plain">
<P>
<INPUT TYPE="hidden" NAME="subject" VALUE="Example Form">
<SELECT NAME="age">
<OPTION VALUE="under 18">under 18 </OPTION>
<OPTION SELECTED VALUE="18 to 25">18 to 25 </OPTION>
<OPTION VALUE="25 to 30">25 to 30 </OPTION>
<OPTION VALUE="30 to 40">30 to 40 </OPTION>
<OPTION VALUE="over 40">over 40 </OPTION>
</SELECT> Your age<BR>
<INPUT TYPE="text" NAME="name" size=40> Your name<BR>
<INPUT TYPE="text" NAME="email" size=40> Your e-mail
</P>
<P>
<TEXTAREA NAME="details" COLS=50 ROWS=10 WRAP="physical">Something about yourself</TEXTAREA>
</P>
<P>
I think this guide is
<INPUT TYPE="radio" NAME="opinion" VALUE="great" checked> great
<INPUT TYPE="radio" NAME="opinion" VALUE="middling"> middling
<INPUT TYPE="radio" NAME="opinion" VALUE="very poor"> very poor
</P>
<P>
<INPUT TYPE="submit" VALUE="Process Data">
<INPUT TYPE="reset" VALUE="Clear Data">
</P>
</FORM>

How it renders

Example Reply Form

Your age
Your name
Your e-mail

I think this guide is great middling very poor

Go to ContentsFrequently Asked Questions

How do I password protect a web page?
Firstly, HTML cannot check passwords and allow the user entry - HTML is not an intelligent language and is only really designed for displaying documents on-screen and linking to other pages. The procedure therefore is to use HTML to create a password form which allows the user to type the password. The form is then directed (with the ACTION attribute) to some cgi-script, JavaScript or similar, which processes the password. Such scripts are outside the scope of Sizzling HTML Jalfrezi, however Yahooexternal link and Matt's Script Archiveexternal link are good sources for further information, as are newsgroups such as comp.infosystems.www.authoring.cgi.

Selena Sol's Public Domain CGI Script Archive and Resource Libraryexternal link has a password scriptexternal link complete with instructions which you can freely download and install on your site, if your ISP allows cgi-scripts.

Internet Magazine's expert help pages demonstrate a small JavaScript programexternal link to password protect your pages. It wouldn't stop somebody determined from accessing the page, but it would stop a casual reader from going any further.

How can I check that all required form fields are completed and correct before sending the results?
This cannot be done by HTML alone, but can be performed by a JavaScript code. I will be addressing this problem in Jalfrezi later, but in the meantime try Do-it-yourself JavaScript forms.

How do change the size of the text on a button?
The easiest way to change button text size is to surround the button with suitable <FONT SIZE="x"> tags The effect only works with Netscape Navigator 4 and Microsoft Internet Explorer 4 upwards.

Go to ContentsUseful References


Sizzling HTML Jalfrezi
ContactPurchase
Page Contents
Previous pageJalfrezi ContentsNext page

Click Here!