This is the first paragraph within the form element. Note that the form uses the "GET" method, so when the form is submitted, the current values of the named form components (there are about 10 on the page) should be added to the URL. The "accept-charset" is "iso-8859-1", so if a User Agent has a way of entering other characters, they should be rejected. The "accept" is "text/plain", so only text files should be allowed for the FileUpload controls.

17.4 The INPUT Element

17.4.1 Control Types created with INPUT

Text

Text inputs should only be one line, but it should be possible to scroll with arrow keys, etc. to see all the text.

Size=10, letting type default:

Size=20, type specified:

Size=20, maxlength=10 (should be like the last one, but cut off so that it doesn't fill the box):

Size Tests

For text and password fields, the size is a number of characters instead of a number of pixels, so optimally, the browser should provide room for that many copies of wide characters in variable-width fonts, such as the upper case "M". Providing enough room for copies of an average-width character like "x" is a common alternative.

Password

Similar to the "Text" inputs, only with type set to "password". Should draw all characters alike (usually with asterisks).

Size=20:

Size=20, maxlength=10 (should be like the last one, but cut off so that it doesn't fill the box):

Checkbox

Checkbox, no check

Checkbox, checked

Radio

Solo radio button named "r1", not specified as checked (but if RFC1866 Section 8.1.2.4 is used, it will be checked).

Radio button in group "r2", initially specified as checked.

Radio button in group "r2", not checked.

Radio button in group "r2", also specified as checked (only one should be displayed as checked)

Submit

The buttons below should submit the form, and add some of the values of the form to the end of the url shown, since the form is declared with action=get.

Normal Submit button:

Submit button with value:

Image

Simple:

Reset

A reset button on a form fills all the fields with the default values.

Normal Reset button:

Reset button with value:

Button

Unlabeled:

Labeled:

Hidden

This should not appear in the document, but should be included if the form is submitted. It is just before the period at the end of this sentence.

File

Size=10:

Size=20:

Size=20, default value given (but may be rejected by User Agent):

17.5 The BUTTON Element:

If no type is specified, the type of a button defaults to "submit", so the buttons below should behave similarly to the "submit" buttons.

Simple Text: Simple Text on a Button

Preformatted Text (should be one word on each line, with enough spaces on the lower lines so that the left side of each word lines up with the right side of the word above):

Preformatted
            text
                on
                  a
                   Button

Here is what it looks like when not actually on a button (the button above and the text below should line up identically):

Preformatted
            text
                on
                  a
                   Button

Table:

Table Row 1 Column 1 on Button	Table Row 1 Column 2 on Button
Table Row 2 Column 1 on Button	Table Row 2 Column 2 on Button

17.6 The SELECT, OPTGROUP, and OPTION Elements

17.6.1 Pre-selected options

In all of the Selects in the table below, the options should show up as "Option 1", "Option 2", etc. If any of them appear as "xxxx", the browser is failing to use the "label" attribute when specified (ignoring the "label" attribute indicates parsing the OPTION element using HTML 3.2 syntax). In the Selects below, Option 3 is initially selected (or Options 3 and 4 for Multiple Selects), Option 2 is disabled (so it shouldn't be possible to select it), and Option 4 has no label.

17.7 The TEXTAREA Element

Simple, rows=5, cols=30: This is the text in the TEXTAREA element.

17.9 Labels

Some of the labels below have accesskeys which will be underlined in the content if CSS is supported, and if the access keys are supported, they will select the associated element, rather than the label itself. It should be possible to use some modifier key (such as Alt) in combination with the underlined

17.9.1 The LABEL Element

Label referring to a separate input element (both access keys I and L should select Text Input #1):

Label containing an input element (access key 3 should select the left text input, and access key 4 should select the right text input):
Text Input 3 Text Input 4

17.10 Adding Structure to Forms: The FIELDSET and LEGEND Elements

Simple Example:

17.11 Giving Focus to an Element

17.11.1 Tabbing navigation

The following text inputs have default values to reflect their tab indexes, so the tab key should move between them in ascending order (provided you haven't changed the values):

17.11.2 Access keys

The following checkboxes have access keys to match the character after it, so you should be able to use a modifier key (such as Alt) along with the character shown to select the matching checkbox. Note that the tilde will probably also require the Shift key, and the capital letter C could require it.
C
5
. (period)
~ (tilde)

17.12 Disabled and Read-only controls

Readonly controls should be fully viewable, but not changeable. Disabled controls need not even be fully viewable.

Size=20, readonly (should still be able to scroll right and read all of it):

Size=20, disabled (might not be able to scroll right to read all of it):

Size=20, readonly (should still be able to scroll right and see all of it):

Size=20, disabled (might not be able to scroll right to see all of it):

Checkbox, no check, read only

Checkbox, checked, read only

Checkbox, disabled

Checkbox, checked, disabled (may not be distinct from previous checkbox)

Group "r3" radio button, unchecked, readonly

Group "r3" radio button, checked, readonly

Group "r4" radio button, unchecked, disabled

Group "r4" radio button, checked, disabled

Disabled button: This button should be disabled, and this text may be gray instead of the default color.

Disabled Selects are tested with the SELECT element.

Readonly, rows=6, cols=40: This is read-only text in the TEXTAREA element. It should be possible to read all of this text even though it is more than 6 rows, and possibly more than 40 columns. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is the End of the Filler Text.

Disabled, rows=10, cols=10: It need not be possible to scroll this element to view all of the text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is the End of the Filler Text.