HTML - <Input> (Input Form Control)
This element specifies an input control for a form. The type of input is set by the TYPE attribute and may be a variety of different types, including single-line text field, multiline text field, password style, check box, radio button, or push button.
Syntax
<INPUT
ACCEPT="MIME TYPES"
ACCESSKEY="character"
ALIGN="BOTTOM | LEFT | MIDDLE | RIGHT | TOP" (transitional)
ALT="text"
CHECKED
CLASS="class name(s)"
DISABLED
ID="unique alphanumeric identifier"
MAXLENGTH="maximum field size"
NAME="field name"
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 file"
VALUE="field value"
onblur="script"
onchange="script"
onclick="script"
ondblclick="script"
onfocus="script"
onkeydown="script"
onkeypress="script"
onkeyup="script"
onmousedown="script"
onmousemove="script"
onmouseout="script"
onmouseover="script"
onmouseup="script"
onselect="script">
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 transitional specification defines BOTTOM, LEFT, MIDDLE, RIGHT, and TOP as allowable values. |
| 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. |
| 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. |
| CLASS | This attribute is set to indicate the class or classes that a particular element belongs to. A class name is used by a style sheet to associate style rules to multiple elements at once. |
| DISABLED | This attribute is used to turn off a form control. Elements will not be submitted, nor may they receive any focus from the keyboard or mouse. Disabled form controls will not be part of the tabbing order. The browser may also 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. |
| ID | This attribute specifies a unique alphanumeric identifier to be associated with an element. Naming an element is important to being able to access it with a style sheet, a link, or a scripting language. Names should be unique to a document and should be meaningful. |
| 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. |
| READONLY | This attribute prevents the form control's value from being changed. Form controls with this atrribute set may receive focus from the user but may not be modified. Since 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 only be used with <INPUT> when TYPE is set to TEXT or PASSWORD. The attribute is also 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. |
| STYLE | This attribute specifies an inline style associated with the element. The style information is used to determine the rendering of the affected element. |
| 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. Nagative values for TABINDEX will leave the form control out of the tabbing order. When tabbing is not explicitly set, the browser may tab through items in the order they are encountered. Form controls that are disabled due to the presense of the DISABLED attribute will not be part of the tabbing index, though read-only controls will be. |
| TITLE | This attribute supplies advisory text for the element that may be rendered as a tool tip when the mouse is over the element. A title may also simply provide information that alerts future document maintainers to the meaning of the element and its enclosed content. |
| 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 using an event handler attribute, such as onclick. A value CHECKBOX indicates a check box control. Check box form controls have a checked and nonchecked set, 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 is often 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 may 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 to invoke an associates a password entry field. A password field will not display text entered as it is typed; it may 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 pressed, sends the contents of the form to the location indicated by the ACTION attribute of the enclosing <FORM> element. Last, a value of TEXT (the default) for the TYPE attribute indicates a single-line text input field. |
| USEMAP | This HTML 4 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 will generally 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. |
Event Handlers
| onblur | Occurs when an element loses focus, meaning that the user has moved focus to another element, typically either by clicking the mouse on it or tabbing to it. |
| onchange | Signals that the form control has lost user focus and its value has been modified during its last access. |
| onclick | Indicates that the element has been clicked. |
| ondblclick | Indicates that the element has been double-clicked. |
| onfocus | The focus event describes when an element has received focus, namely, it has been selected for manipulation or data entry. |
| onkeydown | Indicates that a key is being pressed down with focus on the element. |
| onkeypress | Describes the event of a key being pressed and released with focus on the element. |
| onkeyup | Indicates that s key is being released with focus on the element. |
| onmousedown | Indicates the press of a mouse button with focus on the element. |
| onmousemove | Indicates that the mouse has moved while over the element. |
| onmouseout | Indicates that the mouse has moved away from an element. |
| onmouseover | Indicates that the mouse has moved over an element. |
| onmouseup | Indicates the release of a mouse button with focus on the element. |
| onselect | Indicates the selection of text by the user, typically by highlighting the desired text. |
Examples
<FORM>
Which is your favorite food?
<INPUT TYPE="RADIO" NAME="favorite" VALUE="Maxican">Mexican
<INPUT TYPE="RADIO" NAME="favorite" VALUE="Russian">Russian
<INPUT TYPE="RADIO" NAME="favorite" VALUE="Japanese">Japanese
<INPUT TYPE="RADIO" NAME="favorite" VALUE="Other">Other
</FORM>
<FORM>
Enter your name: <INPUT TYPE="TEXT" MAXLENGTH="35" SIZE="20"><BR>
Enter your password: <INPUT TYPE="PASSWORD" MAXLENGTH="35" SIZE="20"><BR>
<BR>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>