RichInStyle.com HTML 4 guide - Forms

Contents

Introduction to forms

Forms are required for any kind of interaction between the user and the page. HTML is used to specify the form element only - it is necessary to use a programming language such as Javascript or Perl to make any sense of forms. However, HTML's role is essential as enabler. Here is a form:

The FORM element

The <FORM> element is the container for form content. In addition, it provides information about what to do with information generated by a form.

Here is the code for the form above:

<form action="">
<input type="radio" name="x">Yes
<input type="radio" name="x">No<br>
<input type="button" value="Submit">
</form>

Although this is just about the most simple form you can get, it doesn't actually get much more complicated than this.

On the <FORM> tag the following attributes are valid:

1. action; this specifies the location of the form processor. For example, <FORM action="http://www.foo.com/form.pl">. Another example: <FORM action="mailto: foo@foo.com"> - this would e-mail the FORM.
2. method; this specifies the HTTP method that will be used. It can be set to get (implied) or post. For example, <FORM action="http://www.foo.com/form" method="get">
3. enctype; this specifies the content type of the form when sent. It is only relevant when the method is set to post. E.g., <FORM action="http://www.foo.com/form.pl" method="post" enctype="multipart/form-data">
4. accept; this specifies the content types that the form processor can handle. This is used so that user agents do not have to send files that the form processor cannot handle (i.e., when INPUT type="file" is used)

Form controls

Form controls are simply the form elements with which the user interacts with the page.

Here's some form elements:

The INPUT element

The most important of all form elements is the INPUT element - all of the examples above are INPUT elements.

Specifying the type of an INPUT element

Since INPUT allows you to choose between many different types of form control, it is important to select the one that you want. Here is a list of available options:

1. <INPUT type="text"> - A control that allows you to type in text
2. <INPUT type="password"> - A control that allows you to type in text but that is hidden by asterisks
3. <INPUT type="checkbox"> - A checkbox - ticked or not ticked
4. <INPUT type="radio"> - A radio button; only one of a set of related radio button can be selected at once
5. <INPUT type="submit"> - A submit button. When clicked on, a submit button sends the form data
6. <INPUT type="button"> - A push button.
7. <INPUT type="hidden"> - A hidden control.
8. <INPUT type="file"> - A file upload control.
9. <INPUT alt="Image button" type="image"> - An image button. Note that if you use image buttons, you should use the alt attribute for browsers that don't support images.

Specifying the name and value of form elements

There are two important aspects to form elements: naming them and giving them a value.

The purpose of the name is to allow it to be referenced; e.g., so that a form processor can decide to do on the basis of the value of a form control of a given name. Secondly, it allows radio buttons to be associated with one another.

For example:

<INPUT name="album" type="radio">
<INPUT name="album" type="radio">

This would associate the three radio buttons so that when one was selected, the others would be deselected.

The purpose of the value is twofold. Firstly, on some elements it states the text that is the default value for that element. These elements are:

1. <INPUT value="Default content" type="text">
2. <INPUT value="Default content" type="password">
3. <INPUT value="Default content" type="file">

And on others it states the text rendered for that element:

1. <INPUT value="Default content" type="button">

Finally, on radio buttons it allows you to associate a value with each selection for processing purposes:

• <INPUT type="radio" value="Yes">Yes<br>
  <INPUT type="radio" value="No">No
  Yes
  No

• <INPUT type="checkbox" value="Cool">Cool
  Cool

Setting the size or length of form controls

It is clearly desirable to be able to set the width of form controls. This is done using the size attribute.

When specified on a text or password box, the size refers to a number of characters <INPUT type="text" size="10">

Note that the size is not a limit on the amount of content - if content is wider than the box, it will scroll across.

And if specified on other INPUT types, it is a number of pixels <INPUT type="checkbox" size="10">

To limit the maximum length of content typed into a text or password box, you use the maxlength attribute <INPUT type="text" maxlength="5" size="10">

Preselecting form controls

In order to preselect checkboxes and radio buttons, you use the checked attribute:

<INPUT type="radio" name="radiobutton">
<INPUT type="radio" checked name="radiobutton">

Since radio buttons are mutually exclusive, you should avoid preselecting more than one.

Creating menus with forms

Aside from those elements already described, also useful are menus. These are created using the SELECT, OPTION and OPTGROUP elements.

For example:

<SELECT name="myselect">
<OPTION value="1">10</OPTION>
<OPTION value="2">20</OPTION>
<OPTION value="3">30</OPTION>
</SELECT>

As you can probably see, there are two essential points concerning creating form elements. The first of these is the SELECT element. This acts as the container for the menu and gives the whole thing a name (required if you are to refer to the value of the SELECT later on).

Secondly, there is the elements of the menu - these are the OPTION elements. Each OPTION should be given a value if it is to be referred to.

In between the opening and closing tag (the closing tag is optional) comes the content, which is what will be rendered.

Advanced SELECT topics

The example above will satisfy 99% of requirements. However, as always, there are more options.

On SELECT, you may also specify that multiple selections may be made. This is done using the multiple attribute. For example, <SELECT multiple>. Secondly, you may choose to specify the number of options that should be on screen at once (only relevant if the user agent displays the menu as a scrolling list). This is done using the size attribute. E.g., <SELECT size="3">.

Preselecting OPTIONs

In order to preselect OPTIONs, you add the selected attribute to its opening tag. E.g., <OPTION selected>. You may preselect multiple OPTIONs if SELECT itself is set to multiple.

Grouping options

It is possible to group options using the OPTGROUP element. Say you have a model of car that is sold according to engine capacity but where the higher capacity ones have a different name:

<SELECT name="myselect">
<OPTGROUP label="The Stingray">
<OPTION value="1600">1600</OPTION>
<OPTION value="1800">1800</OPTION>
<OPTION value="2000">2000</OPTION>
</OPTGROUP>
<OPTGROUP label="The Barracuda">
<OPTION value="2500">2500</OPTION>
<OPTION value="3000">3000</OPTION>
<OPTION value="4000">4000</OPTION>
</OPTGROUP>
</SELECT>

In theory, that example should have made some visual distinction (that is the only purpose of OPTGROUP - it does not have any affect on the value passed to the form processor) between the Stingray and the Barracuda. In practice, however, it is likely that your browser doesn't support this.

TEXTAREA

The TEXTAREA is very similar to the INPUT type="text" element, which we have already met. It differs, however, in being suitable for larger quantities of text - it is provided with a scrollbar and can span several lines.

Here's a TEXTAREA element: Some content that can be changed

And here's the code that produced it:

<TEXTAREA rows="3" cols="50" name="mytextarea">
Some content that can be changed
</TEXTAREA>

Thus the TEXTAREA element is defined by:

1. the rows attribute (required) - this specifies the number of rows
2. the cols attribute (required) - this specifies the width of each row in characters
3. its name - used for form processing purposes

Note that the content inside the TEXTAREA can only be characters and character references - never other elements.

Disabling form elements and/or making them read-only

All form elements may be disabled by addition of the disabled attribute. For example, <TEXTAREA disabled>. In addition, where elements have content that can be changed, they can be set to read-only with the addition of the readonly attribute. E.g., <TEXTAREA readonly>.

The data that is submitted

The data submitted as a result of submitting a form is simply the name and value of each 'successful' control. Successful controls are simply those that have a name and that are not disabled. For 'on/off' buttons, the value passed is only that of those that are 'on'.

The data will then be encoded. This is done according to the enctype attribute of the FORM element. The two principal enctypes are:

1. application/x-www-form-urlencoded; this replaces all non-alphanumeric characters with escapes. In addition, control names are separate from their values by '=' and names are separated by '&'. Note that if method="get", this will ALWAYS be used.
2. multipart/form-data; this should be used for forms that include files (i.e., by INPUT type="file") or large quantities of data

Form submission

The way that form data is sent is determined by the method attribute of FORM.

The default method, get, is only useful for small quantities of data. The way that this is sent is by taking the location specified by action, adding a '?' and then putting the form data on the end of that. This is most often used for search engines.

With post, the form data is included as the body of an HTTP post to the uri specified by action.

The next section of this HTML tutorial deals with language support.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.