Fill-out Forms and Input fields

Forms are composed by placing input fields within paragraphs, preformatted/literal text, lists and tables. This gives considerable scope in designing the layout of forms.

Elements

The form features use the following elements which are all known as HTML level 2 elements.

FORM: a form within a document.
INPUT: one input field of one of a variety of typed
TEXTAREA: a multline input field
SELECT: A selection from a finite set of options
OPTION: one option within a SELECT
Proposed Elements
HTEXTAREA: an input field for hypertext.

Each variable field is defined by an INPUT , TEXTAREA, or OPTION element and must have an NAME attribute which uniquely names the field in the document. Additional optional attributes can be used to specify the type of the field (defaults to free text), its size/precision, its initial value and whether the field is currently disabled or in error:

Example

<FORM ACTION="mailto:www_admin@info.cern.ch">
<MH HIDDEN>Subject: WWW Questionaire</MH>
Please help up to improve the World Wide Web by filling in the
following questionaire:
<P>Your organization? <INPUT NAME="org" SIZE="48">
<P>Commercial? <INPUT NAME="commerce" TYPE=checkbox>
How many users? <INPUT NAME="users" TYPE=int>
<P>Which browsers do you use?
<UL>
<LI>X Mosaic <INPUT NAME="browsers" TYPE=checkbox VALUE="xmosaic">
<LI>Cello <INPUT NAME="browsers" TYPE=checkbox VALUE="cello">
<LI>Others <TEXTAREA NAME="others" COLS=48 ROWS=4></TEXTAREA>
</UL>
A contact point for your site: <INPUT NAME="contact" SIZE="42">
<P>Many thanks on behalf of the WWW central support team.
<P ALIGN=CENTER><INPUT TYPE=submit> <INPUT TYPE=reset>
</FORM>

This fictitious example is a questionnaire that will be emailed to www_admin@info.cern.ch .

Servers can disable forms by sending an appropriate header or by an attribute on the optional HTMLPLUS element at the very start of the document, e.g. <htmlplus forms=off> .

Here, the <P> and <UL> elements have been used to lay out the text (and input fields. The browser has changed the background color within the FORM element to distinguish the form from other parts of the document. The browser is responsible for handling the input focus, i.e. which field will currently get keyboard input.

For many platforms there will be existing conventions for forms, e.g. "tab" and "shift-tab" keys to move the keyboard focus forwards and backwards between fields, while an "Enter" key submits 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 the "reset" button 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.

Representing choices

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.