<input> (Input Form Control)
This element specifies an input control for a form. The type of input is set by the type attribute and can be a variety of different types, including single-line text field, multiline text field, password style, check box, radio button, or push button.
Standard Syntax
<input
accept="MIME types"/>
accesskey="character"
align="bottom | left | middle | right | top" (transitional only)
alt="text"
checked="checked"
class="class name(s)"
dir="ltr | rtl"
disabled="disabled"
id="unique alphanumeric identifier"
lang="language code"
maxlength="maximum field size"
name="field name"
readonly="readonly"
size="field size"
src="url of image file"
style="style information"
tabindex="number"
title="advisory text"
type="button | checkbox | file | hidden | image | password | radio | reset | submit | text"
usemap="url of map
Standard Event Attributes
onchange, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect
Attributes Defined by Internet Explorer
autocomplete="off | on" (5) (password, text types only)
dynsrc="url of movie" (3) (image type only)
language="javascript | jscript | vbs | vbscript" (4)
disabled="false | true" (4) (all types except for hidden)
hidefocus="true | false" (5.5)
hspace="pixels or percentage" (3)
loop="number" (4) (image type only)
lowsrc="url of low-resolution image" (4) (image type only)
unselectable="off | on" (5.5)
vspace="pixels or percentage" (3) (image type only)
Events Defined by Internet Explorer
onactivate, onafterupdate (checkbox, hidden, password, radio, text), onbeforeactivate (all types except for hidden), onbeforecut (all types except for hidden), onbeforedeactivate, onbeforeeditfocus, onbeforepaste (all types except for hidden), onbeforeupdate (checkbox, hidden, password, radio, text), onblur (all types except for hidden), oncontextmenu (all types except for hidden), oncontrolselect, oncut (all types except for hidden), ondeactivate, ondrag (all types except for hidden), ondragend (all types except for hidden), ondragenter (all types except for hidden), ondragleave (all types except for hidden), ondragover (all types except for hidden), ondragstart (all types except for hidden), ondrop (all types except for hidden), onerrorupdate (checkbox, hidden, password, radio, text), onfilterchange (all types except for hidden), onfocus, onfocusin (all types except for hidden), onfocusout (all types except for hidden), onhelp (all types except for hidden), onlosecapture, onmouseenter (all types except for hidden), onmouseleave (all types except for hidden), onmousewheel (all types except for hidden), onmove, onmoveend, onmovestart, onpaste (all types except for hidden), onpropertychange, onreadystatechange, onresize (button, file, image, password, reset, submit, text), onresizeend, onresizestart, onselectstart (all types except for hidden), ontimeerror
Element Specific Attributes
- accept
- This attribute is used to list the MIME types accepted for file uploads when <input type="file">.
- accesskey
- This attribute specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers.
- align
- With image form controls (type="image"), this attribute aligns the image with respect to surrounding text. The HTML 4.01 transitional specification defines bottom, left, middle, right, and top as allowable values. Netscape and Microsoft browsers might also allow the use of attribute values such as absbottom or absmiddle. Like other presentation-specific aspects of HTML, the align attribute is dropped under the strict HTML 4.01 specification.
- alt
- This attribute is used to display an alternative description of image buttons for text-only browsers. The meaning of alt for forms of <input> beyond type="input" is unclear.
- autocomplete
- This Microsoft-specific attribute is used to indicate whether the form field should be automatically filled in or not. The default value is no.
- checked
- The checked attribute should be used only for check box (type="checkbox") and radio (type="radio") form controls. The presence of this attribute indicates that the control should be displayed in its checked state.
- disabled
- This attribute is used to turn off a form control. Elements will not be submitted, nor will they receive any focus from the keyboard or mouse. Disabled form controls will not be part of the tabbing order. The browser also might gray out the form that is disabled, in order to indicate to the user that the form control is inactive. This attribute requires no value.
- disabled
- This attribute is used to turn off a form control. Elements will not be submitted, nor will they receive any focus from the keyboard or mouse. Disabled form controls will not be part of the tabbing order. The browser also might gray out the form that is disabled, in order to indicate to the user that the form control is inactive. This attribute requires no value.
- dynsrc
- In the Microsoft implementation, this attribute indicates the URL of a movie file and is used instead of the src attribute for <input type="image">.
- hspace
- This Internet Explorer-specific attribute indicates the horizontal space in pixels between the image and surrounding text when using <input type="image">.
- lowsrc
- This Microsoft-supported attribute contains the URL of an image to be initially loaded when using <input type="image">. Typically, the lowsrc image is a low-resolution or black-and white image that provides a quick preview of the image to follow. Once the primary image is loaded, it replaces the lowsrc image.
- maxlength
- This attribute indicates the maximum content length that can be entered in a text form control (type="text"). The maximum number of characters allowed differs from the visible dimension of the form control, which is set with the size attribute.
- name
- This attribute allows a form control to be assigned a name so that it can be referenced by a scripting language. name is supported by older browsers such as Netscape 2 generation browsers, but the W3C encourages the use of the id attribute. For compatibility purposes, both might have to be used.
- readonly
- This attribute prevents the form control's value from being changed. Form controls with this attribute set might receive focus from the user but might not be modified. Because it receives focus, a readonly form control will be part of the form's tabbing order. Last, the control's value will be sent on form submission. This attribute can be used only with <input> when type is set to text or password. The attribute also is used with the <textarea> element.
- size
- This attribute indicates the visible dimension, in characters, of a text form control (type="text"). This differs from the maximum length of content, which can be entered in a form control set by the maxlength attribute.
- src
- This attribute is used with image form controls (type="image") to specify the URL of the image file to load.
- tabindex
- This attribute takes a numeric value that indicates the position of the form control in the tabbing index for the form. Tabbing proceeds from the lowest positive tabindex value to the highest. Negative values for tabindex will leave the form control out of the tabbing order. When tabbing is not explicitly set, the browser can tab through items in the order they are encountered. Form controls that are disabled due to the presence of the disabled attribute will not be part of the tabbing index, although read-only controls will be.
- type
- This attribute specifies the type of the form control. A value of button indicates a general purpose button with no well-defined meaning. However, an action can be associated with the button by using an event handler attribute, such as onclick. A value of checkbox indicates a check box control. Check box form controls have a checked and unchecked setting, but even if these controls are grouped together, they allow a user to select multiple check boxes at once.
In contrast, a value of radio indicates a radio button control. When grouped, radio buttons allow only one of the many choices to be selected at a given time.
A form control type of hidden indicates a field that is not visible to the viewer but is used to store information. A hidden form control often is used to preserve state information between pages. A value of file for the type attribute indicates a control that allows the viewer to upload a file to a server. The filename can be entered in a displayed field, or a user agent might provide a special browse button allowing the user to locate the file. A value of image indicates a graphic image form control that a user can click on to invoke an associated action. (Most browsers allow the use of img-associated attributes such as height, width, hspace, vspace, and alt when the type value is set to image.) A value of password for the type attribute indicates a password entry field.
A password field will not display text entered as it is typed; it might instead show a series of dots. Note that password-entered data is not transferred to the server in any secure fashion. A value of reset for the type attribute is used to insert a button that resets all controls within a form to their default values. A value of submit inserts a special submission button that, when clicked, sends the contents of the form to the location indicated by the action attribute of the enclosing <form> tag. Lastly, a value of text (the default) for the type attribute indicates a single-line text input field. - usemap
- This HTML 4.0 attribute is used to indicate the map file to be associated with an image when the form control is set with type="image". The value of the attribute should be a URL of a map file, but generally will be in the form of a URL fragment referencing a map file within the current file.
- value
- This attribute has two different uses, depending on the value for the type attribute. With data entry controls (type="text" and type="password"), this attribute is used to set the default value for the control. When used with check box or radio form controls, this attribute specifies the return value for the control when it is turned on, rather than the default Boolean value submitted.
- vspace
- This Internet Explorerspecific attribute indicates the vertical space in pixels between the image and surrounding text when using <input type="image">.
- width
- This attribute, supported by WebTV and Internet Explorer, is used to set the size of the form control in pixels.
Examples
<form action="#" method="get">
Enter your name:
<input type="text" maxlength="35" size="20" /><br>
Enter your password:
<input type="password" maxlength="35" size="20" /><br><br>
<br /><br />
Which is your favorite food?
<input type="radio" name="favorite" value="Mexican">Mexican
<input type="radio" name="favorite" value="Russian">Russian
<input type="radio" name="favorite" value="Japanese">Japanese
<input type="radio" checked name="favorite" value="Other">Other
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
Compatibility
HTML 2, 3.2, 4, 4.01, XHTML 1.0, 1.1, Basic
Internet Explorer 2, 3, 4, 5, 5.5, 6
Netscape 1, 2, 3, 4, 4.5-4.8, 6, 7
Opera 4.0
Notes
Some documents suggest the use of type="textarea". Even if this style is supported, it should be avoided in favor of the <textarea> element, which is common to all browsers.
The HTML 2.0 and 3.2 specifications support only the align, checked, maxlength, name, size, src, type, and value attributes for the <input> element.
The HTML 4.01 specification also reserves the use of the datafld, dataformatas, and datasrc data-binding attributes.
Use of autocomplete may have security implications. Use with caution.
Under the strict HTML specification, the align attribute is not allowed.
As an empty element under XHTML, <input /> requires the trailing slash.