The Input element represents a field whose contents may be edited or activated by the user.
Attributes of the Input element:
ALIGN
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.
CHECKED
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.
MAXLENGTH
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.
NAME
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.
SIZE
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"
SRC
To be used with the TYPE=IMAGE
, this attribute represents a URL specifying an the desired image.
TYPE
Defines the type of data the field accepts. Defaults to free text. Several types of fields can be defined with the type attribute:
BUTTON: This can be used to embed buttons directly into HTML documents, that add functionality when used in conjunction with Visual Basic Script, or JavaScript. TheNAME
attribute is used to give the button a unique name, which can be used to set its function in the script. TheVALUE
attribute specifies the text that is displayed on the button in the document.
This is a button TYPE
:
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 theNAME
andVALUE
attributes, optional attributes beingCHECKED
.
This is a checkbox TYPE
:
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. TheNAME
attribute is required. The image itself is specified by theSRC
attribute, exactly as for the Image element.
This is an image TYPE
:
PASSWORD : is the same as theTEXT
attribute, except that text is not displayed as it is entered.
This is a password TYPE
:
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 explicitVALUE
andNAME
attribute.CHECKED
is an optional attribute and can be used to specify which options are selected for initial form display.
This is a radio TYPE
:
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 theSUBMIT
button.
This is a reset TYPE
:
SUBMIT : is a button that when pressed submits the form. You can use theVALUE
attribute to provide a non- editable label to be displayed on the button. The default label is browser-specific. If aSUBMIT
button is pressed in order to submit the form, and that button has aNAME
attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, aSUBMIT
button makes no contribution to the submitted data.
This is a submit TYPE
:
TEXT : is used for a single line text entry fields. It should be used in conjunction with theSIZE
andMAXLENGTH
attributes 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. ExplicitVALUE
andNAME
attributes are also required.
This is a text TYPE
:
TEXTAREA : is used for multiple-line text-entry fields. Use in conjunction with theSIZE
andMAXLENGTH
attributes. It is better to use the<TEXTAREA>
element for such text entry boxes.
FILE : Netscape and Internet Explorer (from v4.0) support aFILE
option to theTYPE
attribute of theINPUT
element, allowing anACCEPT
attribute for theINPUT
element (which is a list of media types or type patterns allowed for the input) and allowing theENCTYPE
of 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.
VALUE
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
The 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 TABINDEX
property.
DATAFLD
The 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.
DATAFORMATAS
When the <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
The 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
Setting the 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
The 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.
TITLE="informational ToolTip"
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 <INPUT>
section.
LANG="language setting"
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="Scripting language"
The 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 vbscript
, vbs
, javascript
or jscript
. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE
attribute is set.
CLASS="Style Sheet class name"
The 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"
The 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
The 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.
Every <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.)
<INPUT...>
Properties
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.
Additionally, the <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 (image)
The align
property reflects the value of the ALIGN
attribute, when used with an image TYPE
accessKey
The accessKey
property reflects the value of the ACCESSKEY
attribute, when used in <INPUT>
elements.
checked (checkbox, radio)
checked
has a boolean value that represents whether the checkbox, or radio button has been checked (checked=true
) or not (checked=false
).
dataFld (button, checkbox, hidden, password, radio, text)
The dataFld
property directly reflects the value of the DATAFLD
attribute when used with <INPUT>
elements.
dataFormatAs (button)
The dataFormatAs
property directly reflects the value of the DATAFORMATAS
attribute when used with <INPUT>
elements.
dataSrc (button, checkbox, hidden, password, radio, text)
The dataSrc
property directly reflects the value of the DATASRC
attribute when used with <INPUT>
elements.
defaultChecked (checkbox, radio)
The 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)
The 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
The 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
The form
property contains a reference to the form on which the particular <INPUT>
element resides.
indeterminate (checkbox)
The 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)
The maxLength
property reflects, or sets the MAXLENGTH
attribute for <INPUT> TYPE
variants that support it.
name
The name
property reflects the value of the NAME
attribute for the <INPUT>
element.
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)
The 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
The 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
The tabIndex
property reflects (or sets) the value of the TABINDEX
attribute, when used in <INPUT>
elements.
type
The type
property returns the value of the TYPE
attribute (i.e. 'checkbox' for <INPUT TYPE="checkbox">
, 'text' for <INPUT TYPE="text">
etc.)
value
The value
property returns the value of the VALUE
attribute for the <INPUT>
element.
<INPUT...>
Methods
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.
Various TYPE
variants of the <INPUT>
element support the following methods:
blur
The blur
method can be used to force the users focus away from the referenced <INPUT>
element.
createTextRange
The 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.
focus
The users focus can be forced onto any <INPUT>
element by using the focus
method. The onfocus
event (see below) is then fired.
select
The 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...>
Events
The <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.
Some <INPUT> TYPE
variants support the following events:
onafterupdate
The 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
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.
onblur
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
The 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
The 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.
onfocus
When the user passes the focus to any <INPUT>
element, the onfocus
event is fired for that element.
onselect
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 <INPUT>
element.
© 1995-1998, Stephen Le Hunte
Questions:
Comments:
See also: