Specifying the type of an INPUT element
Specifying the name and value of form elements
Setting the size or length of form controls
Disabling form elements and/or making them read-only
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:
<input type="radio" name="x">Yes
<input type="radio" name="x">No<br>
<input type="button" value="Submit">
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:
Form controls are simply the form elements with which the user interacts with the page.
Here's some form elements:
The most important of all form elements is the INPUT element - all of the examples above are INPUT elements.
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:
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.
<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:
And on others it states the text rendered for that element:
Finally, on radio buttons it allows you to associate a value with each selection for processing purposes:
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">
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.
Aside from those elements already described, also useful are menus. These are created using the SELECT, OPTION and OPTGROUP elements.
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.
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">.
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.
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:
<OPTGROUP label="The Stingray">
<OPTGROUP label="The Barracuda">
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.
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:
And here's the code that produced it:
<TEXTAREA rows="3" cols="50" name="mytextarea">
Some content that can be changed
Thus the TEXTAREA element is defined by:
Note that the content inside the TEXTAREA can only be characters and character references - never other elements.
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 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:
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.