|
Basically, a form has this format:
<FORM METHOD=post ACTION=url>
Text fields, menus, etc (see below)
<INPUT TYPE=reset VALUE="Clear Form">
<INPUT TYPE=submit VALUE="Submit Form">
</FORM>
Below you will find more explanation and examples of the various buttons, text fields and menus you can include in a form, as well as the submit and reset buttons
The METHOD and ACTION attributes in the <FORM> tag tell the browser how to handle the form. The easiest one is <FORM METHOD=post ACTION=mailto:name@domain> which will mail the user input in the form to the e-mail address you specify. A more complicated -but more sophisticated- way of handling forms is through CGI scripts. There is a separate chapter that covers basic CGI scripting using Perl.
Within a form you can use paragraphs, line breaks, styles and headers to format it. You can also use images within a form. The exact appearance of elements of forms varies between browsers but even more between platform. For example, for a Macintosh user, radio buttons will like standard Mac radio buttons. You cannot influence this.
A text field is the most basic form of input. You can set the size of the field and give it a default value. For example:
<FORM>
You e-mail address:
<INPUT NAME=email TYPE=text SIZE=30 MAXLENGTH=70 [email protected]>
</FORM>
The NAME attribute is essential for reading the results of the form. Every <INPUT> has a name, with the exception of radio buttons (see below) where all buttons in a series have the same name. The TYPE attribute specifies that this is a text field. The SIZE attribute defines the size (width) of the text field as it is displayed on the screen. If you set SIZE very high, most browsers will not wrap your text field. The MAXLENGTH attribute sets the maximum length of the user input. MAXLENGTH can be lower than SIZE, but what would be the point? Without a MAXLENGTH attribute, the user of your form can theoretically type a whole novel in your text field, no matter what SIZE attribute you have used. Finally, the VALUE attribute sets a default value for the text field. If the user does not edit this value, it will be returned to you. You do not have to specify a default value.
In a text fields, most standard editing features are available, including cut, copy and paste. The exact editing features may differ between platforms (ie. Mac and Windows) and browsers.
If the form was submitted, the text field returns "&[email protected]" (for example). You can use JavaScript to make VALUE disappear when the field is selected.
A Password field is essentially identical to a text field, with the exception that the return on the screen cannot be read. For example:
<FORM> Password: <INPUT NAME=passw TYPE=password> </FORM>
If you try typing a password, you can see that it is shown on the screen as bullets. This is to avoid that anyone 'looking over the shoulder' of a user can see the password. When the form is returned to you -the owner of the page- it will of course show the password that was typed and not the bullets.
A text area is used for larger size input. It is done like this:
<FORM>
Your comments:
<TEXTAREA COLS=50 ROWS=3 NAME=comments>Any suggestions are welcome!</TEXTAREA>
</FORM>
The COLS and ROWS attribute set the number of columns and rows respectively. This refers only to the size of the text area on the screen, and not to the maximum size of the input. The NAME attribute has the same purpose as always. The default text is framed between the <TEXTAREA> and </TEXTAREA> tags. If you do not want to use a default text, don't put anything between the two tags.
The textarea returns something like "&comments=I+love+the+work+you+did+here!".
Radio buttons are used to present several options of which one can be selected. This is how it looks:
<FORM>
This guide is
<INPUT NAME=guide TYPE=radio VALUE=good>Good
<INPUT NAME=guide TYPE=radio VALUE=average CHECKED>Average
<INPUT NAME=guide TYPE=radio VALUE=bad>Bad
</FORM>
As you can see, there are three <INPUT> tags, which all have the same NAME and TYPE attribute. The TYPE="radio" and the identical names tell the browser that this is a set of 3 radio buttons that belong together. Therefore the user will be able to select only one button of this set of three. The CHECKED attribute makes the middle button the default, it will be select when the user opens this page. The VALUE attribute specifies what each button returns when it is selected.
The radio button returns "&guide=good" (for example).
Checkboxes are not unlike radio buttons. The only difference is that out of a series of radio buttons the user has to select one while out of a series of checkboxes the user can select anything from none to all of the options. For example:
<FORM>
The good things are:<BR>
<INPUT NAME=like TYPE=checkbox VALUE=graphics>The Graphics<BR>
<INPUT NAME=like TYPE=checkbox VALUE=layout CHECKED>The Layout<BR>
<INPUT NAME=like TYPE=checkbox VALUE=contents>The Contents<BR>
<INPUT NAME=like TYPE=checkbox VALUE=errorfree CHECKED>The Errorfreeness<BR>
<INPUT NAME=like TYPE=checkbox VALUE=colours>The Colours
</FORM>
As you can see, there is one <INPUT> tag for each of the checkboxes. A checkbox can be selected and deselected. The NAME attribute is the same for all the boxes in this example, but in fact you can also use different names as there is no link between the checkboxes. The TYPE specifies that these are checkboxes. The VALUE attribute specifies what you get returned if the user checks the box concerned. The CHECKED attribute makes the box selected by default.
These checkboxes return "&like=layout&like=errorfree" (for example).
Forms can contain pop-up menus that allow the user to select one option.
<FORM>
Did you come by
<SELECT NAME=cameby>
<OPTION>Plane
<OPTION SELECTED>Train
<OPTION>Automobile
</SELECT>
</FORM>
The <SELECT> and </SELECT> tags enclose the entire pop-up menu. Each item of the menu is preceded by an <OPTION> tag. The SELECTED attribute defines the default, which in this case is "train".
This pop-up menu returns, for example, "&cameby=train" if the form is submitted.
A variation of the pop-up menu above is the list to select items from.
<FORM>
Which languages do you speak
<SELECT NAME=languages SIZE=5 MULTIPLE>
<OPTION>Dutch
<OPTION SELECTED>English
<OPTION>French
<OPTION>German
<OPTION>Russian
<OPTION SELECTED>Spanish
<OPTION>Swedish
<OPTION>Welsh
</SELECT>
</FORM>
The SIZE attribute defines how many lines are shown in the list. If you want to have a useable scroll bar you should have a SIZE of 4 or 5 minimum. The MULTIPLE attribute means that the user can select more than one option. The SELECTED attribute in the <OPTION> tag means this option is selected by default.
This list will return "&languages=Russian&languages=Spanish" (for example)
Hidden input can be used to include information in the form as it is returned to you, which the user does not need to see. It is done like this:
<INPUT TYPE=hidden NAME=from VALUE="Bill Clinton">
In this case, it will be returned as "&from=Bill+Clinton" together with whatever else the user put in the form.
You will often see hidden input is also used by some CGI scripts that handle forms and in that case usually contain instructions for the script.
A reset button allows the user to reset all the elements of the form to their default values. For example:
<FORM>
<INPUT NAME=test TYPE=text SIZE=50>
<INPUT TYPE=reset VALUE="Clear Form">
</FORM>
The TYPE attribute is reset, which defines the kind of button. The VALUE attribute sets the text that will show on the button. You can type anything in the text field.
Pressing the reset button will clear the text field. Along the same lines, the reset button will also clear text areas and reset checkboxes, pop-up menus, etc. to their original values (either clear or any defaults you specified). Obviously, the reset button returns nothing to you.
|
A submit button is used to tell the browser that you are done filling out the form. If the submit button is pressed, the browser will do whatever is specified in the ACTION attribute of the <FORM> tag, usually either running a CGI script or mailing the user input to a specified address.
The TYPE attribute is submit. The VALUE attribute sets the text that will show on the button. You can type anything in the text field:
<CENTER><FORM METHOD=post>
<INPUT NAME=testing TYPE=text SIZE=30>
<INPUT TYPE=submit VALUE="Send Form">
</FORM></CENTER>
Obviously, the submit button as such returns nothing. It just makes the browser send all the other input to the url you specified in the ACTION attribute.
|