The INPUT fields

The INPUT element is used for a wide variety of different kinds of entry fields within HTML fill-out forms. The TYPE attribute determines the type of field.

Single-line text fields (type=text)

These are used for entering short text strings, like peoples names, numbers and dates. The visible width of the field in characters can be set with the SIZE attribute. When using a variable pitch font, the SIZE attribute sets the width in en units (half the point size). The user should be able to enter more than this, with the contents of the field scrolling horizontally as needed. The MAXLENGTH attribute can be used to specify the maximum number of characters permitted for the string.

If the TYPE attribute is missing, the INPUT element is assumed to be a single-line text field. The NAME attribute is used to identify the field when the form's contents are converted to the name/value list. The VALUE field can be used to initialize the text string. Character entities can be used include accented characters in this string.

Note: Use the TEXTAREA element for multi-line text entry fields.

Password fields (type=password)

This is the same as single-line text fields except that each character typed is echoed by a shadow character, e.g. an asterisk or the space character. The user can see how many characters that have been typed but not what was typed.

Checkbox fields (type=checkbox)

A checkbox field has two states: selected and unselected.Its name/value pair only appear in the submitted data when selected. Checkboxes are used for boolean attributes. They can also be used for attributes which can take multiple values at the same time. This is represented by a checkbox for each optional value, with the same name for each of the checkboxes. Unselected checkboxes don't appear in the submitted data. Both NAME and VALUE are required for checkboxes. To initialize the checkbox to its selected state, include the CHECKED attribute. Checkboxes provide an alternative to using the SELECT element for multiple-choice menus.

Radio Buttons (type=radio)

Suitable for attributes which can take a single value from a set of alternatives. All radio buttons in the same group should be given the same NAME. Only the selected radio button in the group generates a name/value pair in the submitted data. Both NAME and VALUE are required for radio buttons. To initialize the radio button to its selected state, include the CHECKED attribute. Radio buttons offer an alternative to using the SELECT element for single choice menus.

Range fields (type=range)

These allow the user to pick a numeric value in between a lower and an upper bound. The range is specified with the MIN and MAX attributes, as in:

    <input name=rating type=range min=1 max=10>

If either the lower or upper bound is a real number, then the range is real valued, otherwise it is restricted to integer values only. The VALUE attribute can be used to initialize the range field. It an error for the value to lie outside the specified range. The default value is midway between the lower and upper limits.

Scribble on Image (type=scribble)

These fields allow the user to scribble with a pointing device (such as a mouse or pen) on top of a predefined image. The image is specified as a URI with the SRC attribute. If the user agent can't display images, or can't provide a means for users to scribble on the image, then the field should be treated as a text field. The VALUE attribute can be used to initialize the text field for these users. It is ignored when the user agent provides scribble on image support.

File Attachments (type=file)

This allows users to attach one or more files to be submitted with the form's contents. The ACCEPT attribute can be used to specify a comma separated list of MIME content types. These are used to restrict the kinds of files that can be attached to the form. For instance:

    <input name=pictures type=file accept="image/*">

This example restricts files to match "image/*", i.e. to registered MIME image types. For windows based user agents, it is suggested that file fields display the name of the last file attached, with the ability to open a file dialog box to view the complete list of files attached so far. The accept attribute then acts to specify the filter on the list of candidate files.

Hidden fields (type=hidden)

No field is presented to the user, but the content of the field is sent with the submitted form. This value may be used to transmit state information about client/server interaction, for instance a transaction identifier. These fields are needed because HTTP servers don't preserve state information from one request to the next.

Submit buttons (type=submit)

These are buttons that when pressed submit the form's data. You can use the VALUE attribute to provide a non-editable label to be displayed on the button. The default label is application-specific. A graphic can be specified for the submit button using the SRC attribute.

The submit button normally makes no contribution to the submitted data. The exception is when the field includes a NAME attribute, in which case, the name and value attributes are included with the submitted data. This can be used to distinguish which submit button the user pressed.

Image fields (type=image)

These act like submit buttons but include the location where the user clicked on the image. The image is specified with the SRC attribute.

Should we phase these out, in favor of using SUBMIT? For this, we would need to ensure that the submit button included the location clicked when a graphic was specified with SRC.

Reset buttons (type=reset)

When a reset button is pressed, the form's fields are reset to their specified initial values. The label to be displayed on the button may be specified just as for the SUBMIT button. Likewise, the SRC attribute can be used to specify a graphic.

Permitted Attributes for the INPUT element

ID

An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.

LANG

This is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.

CLASS

This a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.

TYPE

Defines the type of the field as one of: TEXT, PASSWORD, CHECKBOX, RADIO, RANGE, FILE, SCRIBBLE, HIDDEN, SUBMIT, IMAGE or RESET. It defaults to TEXT. The attribute value is an SGML name token and and as such is case insensitive.

NAME

This provides a character string used to name the field when submitting the form's data. Several fields may share the same name, for instance a group of radio buttons or checkboxes. The name is case insensitive.

VALUE

This is a character string or number which is used to initialize text, range and hidden fields.

DISABLED

When present, the field should be rendered as normal, but can't be modified by the user. Where practical the rendering should provide a cue that the field is disabled e.g. by graying out the text, changing the color of the background or similar.

ERROR

This attribute specifies an error message explaining why the field's current value is incorrect. When this attribute is missing, the field can be assumed to be ok. User agents are recommended to provide a cue to indicate that the field is in error.

CHECKED

The presence of this attribute indicates that a radio button or checbox should be initialized to its selected state.

SIZE

This specifies the visible width of a text or password field. For fixed pitch fonts, the size attribute specifies the maximum number of characters visible, while for variable pitch fonts, the attribute specifies the width in en units (half the point size).

MAXLENGTH

Specifies the maximum number of characters permitted for text and password fields.

MIN

This is an integer or real number and specifies the lower bound for a range field.

MAX

This is an integer or real number and specifies the upper bound for a range field.

ACCEPT

A comma separated list of MIME content types for use in restricting the types of files that can be attached to a form with a file field.

SRC (Source)

The SRC attribute specifies the URI for an image for use as the background of a SCRIBBLE, IMAGE, SUBMIT or RESET field. Its syntax is the same as that of the HREF attribute of the <A> tag.

MD

Specifies a message digest or cryptographic checksum for the associated image specified by the SRC attribute. It is used when you want to be sure that the image is indeed the same one that the author intended, and hasn't been modified in any way. For instance, MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which specifies an MD5 checksum encoded as a base64 character string. The MD attribute is generally allowed for all elements which support URI based links.

ALIGN

This attribute only applies to fields with background images, i.e. SCRIBBLE, IMAGE, SUBMIT or RESET fields. It is intended to provide the same positional control as for the IMG element. The ALIGN attribute takes the values TOP or MIDDLE or BOTTOM, defining whether the top or middle or bottom of the field should be aligned with the baseline for the text line in which the INPUT element appears.

With ALIGN=LEFT, the field will float down and over to the current left margin, and subsequent text will wrap around the right hand side of the field. Likewise for ALIGN=RIGHT, the field aligns with the current right margin and, and text wraps around the left.