The Input element represents a field whose contents may be edited or activated by the user.
Attributes of the Input element:
Vertical alignment of the image. For use only with
TYPE=IMAGE in HTML level 2. The possible values are exactly the same as for the
ALIGN attribute of the
<IMG ...> element.
Indicates that a checkbox or radio button is selected. Unselected checkboxes and radio buttons do not return name/value pairs when the form is submitted.
Indicates the maximum number of characters that can be entered into a text field. This can be greater than specified by the
SIZE attribute, in which case the field will scroll appropriately. The default number of characters is unlimited.
Symbolic name used when transferring the form's contents. The
NAME attribute is required for most input types and is normally used to provide a unique identifier for a field, or for a logically related group of fields. The name given to the element can also be used to reference it for scripting purposes.
Specifies the size or precision of the field according to its type. For example, to specify a field with a visible width of 24 characters:
INPUT TYPE="text" SIZE="24"
To be used with the
TYPE=IMAGE , this attribute represents a URL specifying an the desired image.
Defines the type of data the field accepts. Defaults to free text. Several types of fields can be defined with the type attribute:
NAMEattribute is used to give the button a unique name, which can be used to set its function in the script. The
VALUEattribute specifies the text that is displayed on the button in the document.
This is a button
CHECKBOX : Used for simple Boolean attributes (where a field will be chosen, or not), or for attributes that can take multiple values at the same time. The latter is represented by a number of checkbox fields each of which has the same name. Each selected checkbox generates a separate name/value pair in the submitted data, even if this results in duplicate names. The default value for checkboxes is "on". It requires the
VALUEattributes, optional attributes being
This is a checkbox
HIDDEN : With this input type, 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.
IMAGE : An image field upon which you can click with a pointing device, causing the form to be immediately submitted. The co-ordinates of the selected point are measured in pixel units from the upper-left corner of the image, and are returned (along with the other contents of the form) in two name/value pairs. The x-co-ordinate is submitted under the name of the field with .x appended, and the y- co-ordinate is submitted under the name of the field with .y appended. The
NAMEattribute is required. The image itself is specified by the
SRCattribute, exactly as for the Image element.
This is an image
PASSWORD : is the same as the
TEXTattribute, except that text is not displayed as it is entered.
This is a password
RADIO : is used for attributes that accept a single value from a set of alternatives. Each radio button field in the group should be given the same name. Only the selected radio button in the group generates a name/value pair in the submitted data. Radio buttons require an explicit
CHECKEDis an optional attribute and can be used to specify which options are selected for initial form display.
This is a radio
RESET : is a button that when pressed resets the form's fields to their specified initial values. The label to be displayed on the button may be specified just as for the
This is a reset
SUBMIT : is a button that when pressed submits the form. You can use the
VALUEattribute to provide a non- editable label to be displayed on the button. The default label is browser-specific. If a
SUBMITbutton is pressed in order to submit the form, and that button has a
NAMEattribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a
SUBMITbutton makes no contribution to the submitted data.
This is a submit
TEXT : is used for a single line text entry fields. It should be used in conjunction with the
MAXLENGTHattributes to set the maximum amount of text that can be entered. For textual input that requires multiple lines, the
<TEXTAREA>element for text fields which can accept multiple lines. Explicit
NAMEattributes are also required.
This is a text
TEXTAREA : is used for multiple-line text-entry fields. Use in conjunction with the
MAXLENGTHattributes. It is better to use the
<TEXTAREA>element for such text entry boxes.
FILE : Netscape and Internet Explorer (from v4.0) support a
FILEoption to the
TYPEattribute of the
INPUTelement, allowing an
ACCEPTattribute for the
INPUTelement (which is a list of media types or type patterns allowed for the input) and allowing the
ENCTYPEof a form to be "multipart/form-data".
This allows the inclusion of files with form information, which could prove invaluable for example, for companies providing technical support, or service providers, requesting data files.
Note : Netscape (since v3.0) and Internet Explorer (from v4.0) natively support the
<INPUT TYPE="file">type. Internet Explorer 3.0 supports an ActiveX control, available from the http://www.microsoft.com/ie/ that adds
<INPUT TYPE="file">functionality to Internet Explorer 3.0.
When used with
TYPE= ... attributes, this attribute sets the initial displayed value of the field if it displays a textual or numerical value. If the
TYPE= ... attribute is one which only allows Boolean values (i.e. chosen, or not chosen) then this specifies the value to be returned when the field is selected.
TABINDEX attribute can be used to set a tabbing order for the user to navigate around the main
<FORM>. For example, if
<FORM> elements have
TABINDEX properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest
DATAFLD attribute can be used to specify a data column name from the Data source (see
DATASRC) that the
<INPUT> is bound to. For more information on the
DATAFLD attribute, see the Data Binding topic.
<INPUT> element is data-bound, it can accept straight text, or HTML from the data source. The
DATAFORMATAS attribute should be set to "
TEXT" or "
HTML" accordingly. with
DATAFORMATAS="HTML", the data provided for the
<INPUT> element is parsed and rendered when it's displayed.
For more information on the
DATAFORMATAS attribute, see the Data Binding topic.
DATASRC attribute can be used to specify a data source that the
<INPUT> is bound to. For more information on the
DATASRC attribute, see the Data Binding topic.
DISABLED flag for a form element, disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values. For example, the following text box (
<INPUT TYPE="text">) has its
DISABLED attribute set:
<INPUT TYPE="text" SIZE="20" DISABLED VALUE="Enter a Name">
As you can see, the text box is grayed and will not accept the focus.
READONLY flag is slightly different to the
DISABLED flag in that an
<INPUT> element labelled as
READONLY can still receive the users focus, but the contents of the control can not be changed. For example, the following text box (
<INPUT TYPE="text">) has its
READONLY attribute set:
<INPUT TYPE="text" SIZE="20" READONLY VALUE="Enter a Name">
As you can see, the text box will accept the focus, but the contents can not be edited.
The Internet Explorer 4.0 (and above) specific
TITLE attribute is used for informational purposes. If present, the value of the
TITLE attribute is presented as a ToolTip when the users mouse hovers over the
LANG attribute can be used to specify what language the
<INPUT> element is using. It accepts any valid ISO standard language abbreviation (for example
"en" for English,
"de" for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the
<INPUT> element. It can accept values of
LANGUAGE attribute is set.
CLASS="Style Sheet class name"
CLASS attribute is used to specify the
<INPUT> element as using a particular style sheet class. See the Style Sheets topic for details.
STYLE="In line style setting"
As well as using previously defined style sheet settings, the
<INPUT> element can have in-line stylings attached to it. See the Style Sheets topic for details.
ID="Unique element identifier"
ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the
<INPUT> element for scripting purposes. Any
<INPUT> element with an
ID attribute can be directly manipulated in script by referencing its
ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
ACCESSKEY attribute can be used to specify a shortcut key for the
<INPUT> (activated by pressing 'Alt' and the
ACCESSKEY together - like standard Windows applications menu shortcuts). The
ACCESSKEY setting does not have to be a character in the actual
<INPUT> element and no modification reflects whether an
ACCESSKEY has been defined.
<INPUT> element in a document is an object that can be manipulated through scripting. Scripting of the
<INPUT> element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements collection. See those topics for details of Netscape support for scripting the
<INPUT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title), for ell of its
TYPE variants. Details of these can be found in the standard Dynamic HTML properties topics.
<INPUT> element supports the following properties for some of the
TYPE variants. (If no
TYPE variants are listed, then the property is supported by all of them).
align property reflects the value of the
ALIGN attribute, when used with an image
accessKey property reflects the value of the
ACCESSKEY attribute, when used in
checked (checkbox, radio)
checked has a boolean value that represents whether the checkbox, or radio button has been checked (
checked=true) or not (
dataFld (button, checkbox, hidden, password, radio, text)
dataFld property directly reflects the value of the
DATAFLD attribute when used with
dataFormatAs property directly reflects the value of the
DATAFORMATAS attribute when used with
dataSrc (button, checkbox, hidden, password, radio, text)
dataSrc property directly reflects the value of the
DATASRC attribute when used with
defaultChecked (checkbox, radio)
defaultChecked property has a boolean value representing whether or not the radio or checkbox element is checked by default when the form is displayed by the browser.
defaultValue (file, password, text)
defaultValue property reflects the default value of the
text boxes (or file upload selector). It contains a string value, the contents of which are what is displayed by default in the boxes.
disabled property reflects (or sets) whether the particular
<INPUT> element is disabled (greyed out and not responding to input) or not. It has a boolean (i.e. true or false) value).
form property contains a reference to the form on which the particular
<INPUT> element resides.
indeterminate property reflects, or sets whether the checkbox is in an indeterminate state. If it is, it is displayed as being checked, but also grayed out. It will still respond to user input.
maxLength (password, text)
maxLength property reflects, or sets the
MAXLENGTH attribute for
<INPUT> TYPE variants that support it.
name property reflects the value of the
NAME attribute for the
readOnly (password, text)
readOnly is a boolean value, representing whether the
<INPUT> type has its
READONLY flag set.
recordNumber (button, checkbox, file, image, radio, submit, text)
recordNumber property represents the number of the record, from the recordset that provided data for the element. For more information on data-aware HTML elements and data binding, see the Data Binding topic.
status property is an alias for the
value property and can be used to determine whether radio buttons, or checkboxes are checked (true) or not (false).
tabIndex property reflects (or sets) the value of the
TABINDEX attribute, when used in
type property returns the value of the
TYPE attribute (i.e. 'checkbox' for
<INPUT TYPE="checkbox">, 'text' for
<INPUT TYPE="text"> etc.)
value property returns the value of the
VALUE attribute for the
<INPUT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
TYPE variants of the
<INPUT> element support the following methods:
blur method can be used to force the users focus away from the referenced
createTextRange method (only supported for
TYPE="text") can be used to create a TextRange from the text in, or entered into the text box. See the TextRange object topic for more information.
The users focus can be forced onto any
<INPUT> element by using the
focus method. The
onfocus event (see below) is then fired.
select method can be used to select (i.e. pass focus to and highlight the contents of) the
<INPUT> elements that support it (text and password). For example, if a text box has a character limit and the user has entered too many characters, the content could be highlighted and the form could alert the user that too many characters have been entered.
<INPUT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
<INPUT> TYPE variants support the following events:
onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the
onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that
onbeforeupdate is a cancelable event (setting
returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.
When the referenced
<INPUT> element loses the users focus, the
onblur event is fired. On the fly form validation can make use of the
onblur event to check form elements as the user is entering information.
onchange event is fired when the user commits changes to an
<INPUT> element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the
onchange event is executed before the
onblur event (see above), if the change is commited by the user removing the focus.
onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.
When the user passes the focus to any
<INPUT> element, the
onfocus event is fired for that element.
Similar to the
onselecstart event, the
onselect event is fired as the user selects (i.e. left-clicks and then drags the mouse across) the contents of the