Level: 2
Forms are composed by placing input fields within paragraphs, preformatted/literal text, lists and tables. This gives considerable flexibility in designing the layout of forms.
The form features use the following elements which are all known as HTML level 2 elements.
A form within a document.
One input field.
One option within a
select.
A selection from a finite set of options.
A multi-line input field.
Each variable field is defined by an
input,
textarea, or
option
element and must have an
name to identify its value in the data
returned when the form is submitted.
This fictitious example is a questionnaire:
<title>Sample Questionaire</title>
<h1>Sample Questionaire</h1>
Please fill out this questionaire:
<form method="post" action="http://www.hal.com/sample">
<p>Your name: <input name="name" size="48">
<p>Male <input name="male" type=radio>
<p>Female <input name="female" type=radio>
Number in family: <input name="family" type=int>
<p>Cities in whicy you maintain a residence:
<ul>
<li>Kent <input name="city" type=checkbox value="kent">
<li>Miami <input name="city" type=checkbox value="miami">
<li>Other <textarea name="other" cols=48 rows=4></textarea>
</ul>
Nickname: <input name="nickname" size ="42">
<p>Thank you for responding to this questionaire.
<p align=center><input type=submit> <input type=reset>
</form>
Here, the
<p> and
<ul> elements have been used to lay out the text
(and input fields). The browser is responsible for handling the
input focus, i.e. which field will currently get keyboard input.
Many platforms have existing conventions for forms, for
example, using
Tab and
Shift keys to move the keyboard focus
forwards and backwards between fields, and using the
Enter key
to submit the form. In the example, the
Submit and
Reset buttons
are specified explicitly with special purpose fields. The
Submit
button is used to email the form or send its contents to the server
as specified by the
action attribute, while
Reset resets the fields to
their initial values. When the form consists of a single text field,
it may be appropriate to leave such buttons out and rely on the
Enter key.
The input element is used for a large variety of typed of input fields.
When you need to let users enter more than one line of text, you should use the textarea element.
The radio and checkbox types of input field can be used to specify multiple choice forms in which every alternative is visible as part of the form. An alternative is to use the select element which is generally rendered in a more compact fashion as a pull down combo list.