Forms
If you want some kind of input from your users you should take a look at forms. Forms let you get input through several different form elements.
- Text entry fields
- Checkboxes and radio buttons
- Individual or multiple select menus
- Submit and clear buttons
Forms are initiated as usual HTML tags with a opening and a closing tag.
<FORM>
</FORM>
How do they work?
The most important thing of a form is how it should send the inputted information to the server. As you probably can figure out yourself it is quite useless to request input if you can't do anything with it. The two methods available to send information to the server is the GET and POST methods.
METHOD="GET"
Most documents are retrieved from the server by requesting a single URL. With the GET method all information seeded is appended onto the end of the URL.
METHOD="POST"
The POST method is better because it will tell the server to wait for information. Then the sever will continue to wait for the information until it's finished. This method will let you send more information than the GET method.
Ok, now the server now how it should retrieve the information, now we have to set where to send the information. This is done with the ACTION tag, it will almost always point to a CGI script. If we want to send our inputted information to a CGI program called feedback.pl in the cgi-bin path we will enter the following line.
ACTION="/cgi-bin/feedback.pl"
Both METHOD (how) and ACTION (where) should be in the <FORM> tag.
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Now you're ready to go. Between the <FORM> tags you enter the tags for the different input fields you want. Every field should have it's own unique name, this is why you can have more fields of the same type in the same form.
Lets take a look at the different input tags with some examples.
Text Entry Field
This is the simplest input form, just a plain text box which you can enter text in. This field may have some different options.
You can specify some text to appear in the text entry field immediately when the form is loaded. For example, if the user should enter an URL it may be a good idea to specify http:// first, because quite a lot of people forget about it.
VALUE="http://"
The displayed size of the text entry field may also be changed. If the users input is longer than the field the text will only scroll.
SIZE="20"
If you want to set a max length of the input you'll use this tag:
MAXLENGTH="35">
A working form with only a simple text entry field doesn't need any submit button. Pressing the return button in the text entry field is the same thing as pressing the submit button (only if the text entry field is the only field you have in your frame). When choosing a name you should avoid using spaces, stick to usual characters to avoid problems.
Here is the simple form and how it will look like (this example doesn't work because it's not directed to any existing cgi program). If you want usual text in your forms, you just enter it where you want it as if it were a standard HTML document.
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Homepage:
<INPUT TYPE="text" NAME="url" VALUE="http://" SIZE="30" MAXLENGTH="45">
</FORM>
You can also use text entry fields to get passwords. This is done with the password type. It works exactly like the previous text entry field. The value attribute may be useful if you have some kind of group-password.
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Password:
<INPUT TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</FORM>
Textarea
This tag will allow you to input multiply lines of input, it's very useful if you want the user to write a little bit more than just a couple of words. The <TEXTAREA> tag is a little bit different compared to the other form tags, because it does not use the input type="text" as the others. Unlike the other form tags it's using an opening tag, <TEXTAREA>, and a closing tag, </TEXTAREA>. It has the following options.
The number of rows.
ROWS="10"
Number of columns.
COLS="20"
If you want any default text in the textarea, you simply type it in between the opening and closing tag.
Here is some example code and it's output.
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Description:<BR>
<TEXTAREA NAME="desc" ROWS="5" COLS="25">
This is the default text...
</TEXTAREA>
</FORM>
Menus
Menus works the same way as the textarea did. Here is the options for the <SELECT> tag.
The different options that should be selectable are set with this tag. This tag is not optional as the others, because a menu without any item to select wouldn't really be a menu at all.
OPTION
You can specify a value that should be sent to the server if an option is selected. If no value is specified it will send the name of the option instead.
VALUE="software"
This tag sets the default item to be selected in the menu. If no default item is specified the first item in the menu will be selected as default.
SELECTED
It may be a little hard to understand how menus are working, but take a look at the example and experiment a little with the different values and you'll soon know how to do it all yourself.
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
What is your most used program?
<SELECT NAME="most_used">
<OPTION>Adobe Photoshop
<OPTION SELECTED>Quake
<OPTION VALUE="webbrowser">Netscape or MS IExplorer
<OPTION>Notepad
<OPTION>Other
</SELECT>
</FORM>
It's also possible to have a menu that allows multiple items to selected. It works the same way as the previous menu, but to add this feature you have two attributes to the <SELECT> which should be specified.
First you have to tell the menu tag that you want this kind of menu, this is done with:
MULTIPLE
Then you have to define how many rows that should be displayed in the scrollbox:
SIZE="5"
Example:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Select your favorite scene legends?<BR>
<SELECT NAME="favorite" MULTIPLE SIZE=6>
<OPTION>TRSI
<OPTION>Bamiga Sector One
<OPTION SELECTED>Jormas
<OPTION>Majic 12
<OPTION>Kefrens
<OPTION>X-Trade
<OPTION>Andromeda
<OPTION>Limited Edition
<OPTION>Spaceballs
<OPTION>Suburban Base
<OPTION>Rebels
</SELECT>
</FORM>
With some browsers you have to use the Shift and/or Control key to select more than one item.
Checkboxes
Checkboxes are best used when you want the user to toggle between two choices, often true or false. Options:
Default the value on is sent to the server, you may change this value.
VALUE="yes"
If you want the checkbox checked by default, you add the CHECKED option.
Example:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
<INPUT TYPE="checkbox" NAME="alien" CHECKED>Yes, I am an alien.
<BR>
<INPUT TYPE="checkbox" NAME="xfiles">Yes, I have featured in X-Files.
</FORM>
Radio Buttons
Radio buttons are similar to checkboxes, but only one option may be selected. Options:
If you want to change the default value (on) which is sent to the server.
VALUE="true"
It's recommended that you choose one of the radio buttons as a default one, it's done by adding the CHECKED attribute.
Example:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Web browser:<BR>
<INPUT TYPE="RADIO" NAME="browser" value="ie">Internet Explorer<BR>
<INPUT TYPE="RADIO" NAME="browser" value="ns">Netscape<BR>
<INPUT TYPE="RADIO" NAME="browser" value="voy">Voyager<BR>
<INPUT TYPE="RADIO" NAME="browser" value="ib">IBrowse<BR>
<INPUT TYPE="RADIO" NAME="browser" value="flt" CHECKED>FairligHTML<BR><BR>
System:<BR>
<INPUT TYPE="RADIO" NAME="system" value="win95">Windows 95<BR>
<INPUT TYPE="RADIO" NAME="system" value="win3">Windows 3.11<BR>
<INPUT TYPE="RADIO" NAME="system" value="amiga">Amiga OS<BR>
<INPUT TYPE="RADIO" NAME="system" value="c64" CHECKED>Commodore 64
</FORM>
Reset and Submit
Alright, now we're getting closer to the end. When the user is finished with your form and wants to send it he/she will use the SUBMIT button. The submit button will transfer all the inputted data to the URL specified in the ACTION tag.
Another useful button is also available, it's the RESET button. Instead of having a user erasing all the fields he/she could just click the reset button to clear everything instead.
These two buttons has two optional settings:
You may change the text that is displayed on the buttons. Default are "Reset" and "Submit Query".
VALUE="Clear"
If you want you can also change the name of the each button, therefore it's possible to have different submit buttons. If you're doing your own CGI program this can be useful in some special cases.
NAME="first_submit"
Example:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
<INPUT TYPE="checkbox">Yes (or no)?<BR>
<INPUT TYPE="reset" VALUE="Reset Form">
<INPUT TYPE="submit" VALUE="Submit Info">
</FORM>
Image Submit Button
A special feature of the submit button is that you can use an image instead. This kind of submit button is also able to send where on the image the user clicked (the x and y coordinates). The code looks like this:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
Click the image:
<INPUT TYPE="image" SRC="gfx/image.gif">
</FORM>
The coordinates will be sent with the names X and Y, you may use the NAME tag to change these names. Then they will be sent as your_new_name.x and your_new_name.y
Hidden Values
You may also send HIDDEN values. You set these values as usual except that no button or nothing will displayed, but your value will be sent anyway. The use of hidden values may be very useful if you, for example, has a form which input you send to a search engine and you want to send some values without asking the user. Example:
<FORM METHOD="POST" ACTION="/cgi-bin/feedback.pl">
<INPUT TYPE="hidden" NAME="language" VALUE="swedish">
</FORM>
If you want to see an example of a form in action, check out my guestbook entry. Choose 'View source' in your browser to see how it's done.
Last updated 970701