|
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.
<FORM>, <INPUT>, <TEXTAREA>, <SELECT>, <OPTION>, MAILTO, METHOD
Getting StartedThe 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:
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.
The Details: <INPUT> dialog itemsSee <TEXTAREA> for multiple line text boxes.
This assigns a label to the text submitted by the user, thus identifying what the user was responding to when they filled in the text box.
Specify the width of the text box in characters.
Specify the maximum number of characters that can be written in the text box. If this is greater than can be displayed (as defined by the SIZE attribute, then the field will scroll.
Specify some default text for the text box.
Just one line of text please:
<INPUT TYPE="text" NAME="My Single-Line Text Box" SIZE=50 MAXLENGTH=75 VALUE="default text">
All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME.
Tells the browser which radio button group the radio button belongs to. Also serves to assign a label to the radio button group, thus identifying what the user was responding to when they selected a radio button.
The text that accompanies the radio button if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form; see "Making a form work".
Specifies the default radio button.
<INPUT TYPE="radio" NAME="Radio Button Group example" VALUE="yes" CHECKED> yup
<INPUT TYPE="radio" NAME="Radio Button Group example" VALUE="no"> nope
All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME.
Tells the browser which check box group the check box belongs to. Also serves to assign a label to the check box group, thus identifying what the user was responding to when they selected a check box.
The text that accompanies the check box if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form; see "Making a form work".
Pre-select the check box.
<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
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 
. Also check out the FAQs.
This assigns a label to the password submitted by the user, thus identifying what the user was responding to when they filled in the password box.
Specify the width of the password box in characters.
Specify some default text for the password box.
Please give the password:
<INPUT TYPE="password" NAME="Password Text Box" SIZE=50>
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.
This assigns a label to the image clicked by the user, thus identifying what the user was responding to when they clicked the image.
Specify the location of the graphic in the same way as you would with the <IMG> tag.
Specify the alignment of the graphic in the same way as you would with the <IMG> tag.
Specify the border width of the graphic in the same way as you would with the <IMG> tag.
Specify the height and width of the graphic in the same way as you would with the <IMG> tag.
Specify the vertical and horizontal space around the graphic in the same way as you would with the <IMG> tag.
Submit a colour:
<INPUT TYPE="image" NAME="My ColoursImageField" SRC="graphics/colours.gif" ALIGN="absmiddle" WIDTH=100 HEIGHT=34>
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).
Provides a descriptive name for the file being sent.
Specifies the size of the text box in characters.
Specifies a maximum length for the filename in characters.
Send your file:
<INPUT TYPE="file" NAME="The users file" SIZE=35 ACCEPT="image/*" MAXLENGTH=50>
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
Specify the button text.
<INPUT TYPE="submit" VALUE="Yes! I want a copy">
<INPUT TYPE="reset">
Used to a put a button on the screen. Unfortunately, without the power of JavaScript functions added in, the button cannot actually do anything.
This assigns a label to the button, thus identifying what the user was responding to when they clicked the button.
Specify the button text.
<INPUT TYPE="button" VALUE="Press me for groovy stuff">
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.
<INPUT TYPE="hidden" NAME="subject" VALUE="Title of Form">
The Details: <SELECT> dialog itemsThe <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.
This assigns a label to the item selected by the user, thus identifying what the user was responding to.
Specifies the number of list items shown at any one time. If this attribute is left out, the list box defaults to a drop-down list.
Allows the user to make more than one selection from the same list. If this attribute is left out the user can only select a single item from the list.
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.
This specifies what text is returned in the e-mail when a specific item is selected. The text between the opening and closing option tags is what appears in the list box.
Sets a list item to be pre-selected.
<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>
The Details: <TEXTAREA> dialog itemsThe <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.
This assigns a label to the text input by the user, thus identifying what the user was responding to.
Specify the width of the text entry area in characters.
Specify the height of the text entry area in rows.
Netscape Navigator 2 and Microsoft Internet Explorer 3 upwards. Specifies how the text input should wrap. Setting WRAP="off" means no wrapping will occur - text is sent exactly as typed. Setting WRAP="soft" means the display wraps but the text is sent as typed. Setting WRAP="hard" means the display wraps and text is sent with line breaks at all wrap points. The values virtual and physical are the same as soft and hard respectively but have fallen out of use with recent browsers. The default for Netscape browsers is off, for Internet Explorer it is soft.
<TEXTAREA COLS=50 ROWS=10 WRAP="hard" NAME="Feedback text area">
Here's what I want to tell you about:
</TEXTAREA>
The Details: Getting replies from a formHTML 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:
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 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.
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:
<FORM METHOD="post" ACTION="/cgi-bin/cgi.pl">
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 forms.
The following is an example of a form processed by a fictional JavaScript program called 'form check':
<FORM METHOD="post" onSubmit="return form_check()">
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.
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':
<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 for the Mac and Informatik for the PC, which will parse the returned e-mails and present them in a more useable way.
Putting it all together: an example formThe following example form uses many of the afore mentioned dialog items and returns a simple e-mail using the mailto action.
<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>
Example Reply Form
Frequently Asked QuestionsHow 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 Yahoo and Matt's Script Archive 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 Library has a password script 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 program 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.
Useful References   |  |     |
