Webpage Workshop: Home » XHTML 1.0 language reference » Input form control

Input form control

This element is used to specify an input control within a form environment. Depending on the value set by the type attribute, this element creates a variety of different input types.

<input
    accept="MIME types"
    accesskey="character"
    align="bottom | left | middle | right | top"**
    alt="text"
    checked
    class="class name(s)"
    dir="ltr | rtl"
    disabled
    id="unique identifier"
    lang="language code"
    maxlength="number"
    name="identifier"
    readonly
    size="number"
    src="url"
    style="style information"
    tabindex="number"
    title="text"
    type="button | checkbox | file | hidden | image |
          password | radio | reset | submit | text"
    usemap="url"
    value="text"
/>

Key:
‡ = Required attribute
** = Transitional only

Explanation of attributes

accept: this is a list of the different MIME types that should be accepted by an <input type="file" /> form control. This can be any format as defined by RFC 2045.

accesskey: used to define a key on the keyboard that can be used to select this element. This generally depends on the browser and operating system being used.

align**: used to specify the alignment of this element with respect to the page.

alt: used, when the input type is "image", to specify the alternative text that should replace the image if the image cannot be displayed. As this type of input is normally used in place of a submit button, the alt text will most likely read "submit".

checked: used when the input type is "checkbox" or "radio". When this attribute is present, it specifies that the field should be displayed in its checked state, ie. selected.

class: used to state which class(es) the element belongs to. It is possible to indicate more than one class for an element by separating each class name with a space character. This attribute is normally used in combination with a stylesheet in order to associate the elements with particular styles defined within the stylesheet.

dir: used to set the direction of the text in combination with the language set in the lang attribute. The available values are "ltr" (left to right) and "rtl" (right to left), with the default value being "ltr".

disabled: this attribute is used to disable a form input. This means that it cannot be selected by the user, and when the form is submitted the value of this field will not be sent to the server.

id: used to specify a unique alphanumeric identifier to the element. This is usually used in combination with stylesheets in order to apply a style to one particular instance of an element. Only one element, regardless of type, can be given a particular id.

lang: used to indicate the language being used in the text contained within the element. The value of this attribute takes on the form of the ISO standard lanuage abbreviations found in RFC 3066. A list of these codes can be found on the ISO language codes page.

maxlength: this is used to specify the maximum length in characters of a string that can be typed into a text or password input field.

name: this attribute is used to identify the form field or a group of fields. The value of this attribute is typically used by the processing script when the form is submitted.

readonly: used to indicate that the value of the input control should not be editable. The value of this field is, unlike with disabled fields, still passed to the processing script upon a submit action.

size: this attribute is used to specify the physical size, in characters, of a text or password field.

src: this attribute specifies the URL of the source image that should be displayed when using an "image" input type.

style: used to specify an inline style to apply to the element. The styles defined here override the styles declared in the header section.

tabindex: used to define the elements position in the tabbing order of the document. This attribute contains a number, which a traversed in order by using the TAB key.

title: used to define an advisory text that may be displayed as a tooltip when a mouse is used to hover over the element.

type: this attribute is used to define the type of form control that the input is. The available types are button, checkbox, file, hidden, image, password, radio, reset, submit, and text.

The type button is used to create a generalized button with no standardized meaning. This means that this type of form control is not of much unless it is associated with an action using the onclick event handler.

The type checkbox is used to create a check box, which allows the user to tick appropriate boxes in response to the associated question. These can be grouped together through the use of the same name attribute, but the user is still able to tick more than one of the choices.

The type file is used to allow the user to choose a file from their local file system. It is generally rendered, by graphical browsers, as a text field with an accompanying button that, when clicked, displays a filechooser.

The type hidden creates a form control that cannot be seen by the user, but is used to contain a value that is required by the processing script. This type of field is often used to preserve data between pages when there are mutliple pages in a form.

The type image creates an image that can be clicked in the same way as a button. These are generally used when a submit button is required to fit with the look and feel of the site rather than the default styling of a button widget.

The type password is used to create a text field that replaces each character with an asterisk (*) or other character, or simply does not display any actual text. This is often used as a general, but weak security aide.

The type radio is used to create a radio button, which allows the user to tick appropriate boxes in response to the associated question. These can be grouped together through the use of the same name attribute, but unlike with check boxes, the user is not able to tick more than one of the choices.

The type reset is used to create a button that, when clicked, allows the user to reset all of the form controls to their original state as was when the page was first loaded.

The type submit is used to create a button that, when clicked, allows the user to submit the form using the action and method implied in the form element.

The final type, text, is used to create a single-line text field into which the user can type an appropriate response. This is also the default form control type for any form element missing the type attribute.

usemap: this indicates that the image is used as a client-side image map. The value of this attribute should match the value of the name attribute in the corresponding map element.

value: depending on the type attribute, this attribute has one of two uses. For text and password types, this attribute sets the default value that is submitted if the user does not change the contents of the field. If, however, the type is checkbox or radio, this attribute sets the value that should be submitted if that form control is selected.

Event handlers

The following event handlers are defined for this element:

Basic example

Below are some examples of the various different form controls that are available. No source code is shown for these examples:

Basic text field

Password field

Check boxes
Option 1 Option 2

Radio buttons
Option A Option B

A filechooser

A basic button

Reset and submit buttons

The examples above show only the basic use of each type of form control. None of the advanced attributes are used.

Compatibility

Type: button

Description: Support of input 'button' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: button  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: checkbox

Description: Support of input 'checkbox' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: checkbox  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: checked  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  No  No  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  No  No  No  No 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: readonly  No  No  No  No  No  No 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: file

Description: Support of input 'file' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: file  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accept  No  No  No  No  No  No 
Attribute: accesskey  Yes  No  No  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: maxlength  Yes  No  No  No  No  No 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: readonly  Yes  Yes  Yes  Yes 
Attribute: size  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  No  No  No  No  No  No 

Type: hidden

Description: Support of input 'hidden' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: hidden  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: image

Description: Support of input 'image' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: image  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: alt  Yes  Yes  Yes  Yes  No  Yes 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  No  No  No  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: ismap  No  No  Yes  No  No  No 
Attribute: lang  Yes  No  No  No  No  No 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: src  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No  Yes 
Attribute: usemap  No  No  Yes  No  No  No 
Attribute: value  No  No  No  No  No  No 

Type: password

Description: Support of input 'password' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: password  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: maxlength  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: readonly  Yes  No  Yes  Yes 
Attribute: size  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: radio

Description: Support of input 'radio' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: radio  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: checked  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  No  No  No  No 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  No  No  No  No 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: readonly  No  No  No  No  No  No 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: reset

Description: Support of input 'reset' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: reset  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: submit

Description: Support of input 'submit' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: submit  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes  No 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Type: text

Description: Support of input 'text' and attributes in various browsers
Test Internet Explorer 6+ Netscape 4 Mozilla and Netscape 6+ Opera 6+ MSN TV (WebTV) Konqeuror 3.0+
Type: text  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: accesskey  Yes  No  Yes  Yes  No 
Attribute: align  No  No  Yes  No 
Attribute: class  Yes  Yes  Yes 
Attribute: dir  Yes  Yes  No  No 
Attribute: disabled  Yes  No  Yes  Yes 
Attribute: id  Yes  Yes  Yes 
Attribute: lang  Yes  Yes  No  No 
Attribute: maxlength  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: name  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: readonly  Yes  No  Yes  Yes 
Attribute: size  Yes  Yes  Yes  Yes  Yes  Yes 
Attribute: style  Yes  Yes  Yes 
Attribute: tabindex  Yes  No  Yes  Yes 
Attribute: title  Yes  No  Yes  Yes  No 
Attribute: value  Yes  Yes  Yes  Yes  Yes  Yes 

Key:
The browser icons are explained in the below list:
Internet Explorer 6+ = Microsoft Internet Explorer 6+
Netscape 4 = Netscape Communicator 4
Mozilla and Netscape 6+ = Mozilla and Netscape Navigator 6+
Opera 7+ = Opera 7+
MSN TV (WebTV) = MSN TV (aka. WebTV)
Konqeuror 3.0+ = Konqueror 3.0+