Forms and Input fields

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="">
<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:
<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>
Nickname: <input name="nickname" size ="42">
<p>Thank you for responding to this questionaire.
<p align=center><input type=submit> <input type=reset>

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.

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.

Preceding Section: Preformatted Text
Following Section: form
Parent Section: Working with Structured Text
Contents of HyperText Markup Language