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. The NAME attribute is used to give the button a unique name, which can be used to set its function in the script. The VALUE 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 the NAME and VALUE attributes, optional attributes being CHECKED.

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. The NAME attribute is required. The image itself is specified by the SRC attribute, exactly as for the Image element.

This is an image TYPE :
PASSWORD : is the same as the TEXT 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 explicit VALUE and NAME 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 the SUBMIT button.

This is a reset TYPE :
SUBMIT : is a button that when pressed submits the form. You can use the VALUE attribute to provide a non- editable label to be displayed on the button. The default label is browser-specific. If a SUBMIT button is pressed in order to submit the form, and that button has a NAME attribute specified, then that button contributes a name/value pair to the submitted data. Otherwise, a SUBMIT 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 the SIZE and MAXLENGTH 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. Explicit VALUE and NAME attributes are also required.

This is a text TYPE :
TEXTAREA : is used for multiple-line text-entry fields. Use in conjunction with the SIZE and MAXLENGTH attributes. It is better to use the <TEXTAREA> element for such text entry boxes.

FILE : Netscape and Internet Explorer (from v4.0) support a FILE option to the TYPE attribute of the INPUT element, allowing an ACCEPT attribute for the INPUT element (which is a list of media types or type patterns allowed for the input) and allowing the ENCTYPE 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:

• SPAMnewall at obm.co.nz asks: " What Characters are valid for a name= in an input statement" +

See also:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input More input types.+

PICList 2024 contributors: o List host: MIT, Site host massmind.org, Top posters @none found - Page Editors: James Newton, David Cary, and YOU! * Roman Black of Black Robotics donates from sales of Linistep stepper controller kits. * Ashley Roll of Digital Nemesis donates from sales of RCL-1 RS232 to TTL converters. * Monthly Subscribers: Gregg Rew. on-going support is MOST appreciated! * Contributors: Richard Seriani, Sr.

  .