<INPUT> | NN all IE all HTML all | |||||||||||||||||||||||||||||
<INPUT> | HTML End Tag: Forbidden | |||||||||||||||||||||||||||||
An input element is sometimes known as a form control, although not all input elements are visible on the page. For the most part, an input element provides a place for users to enter text, click buttons, and make selections from lists. The data gathered from this interaction can be submitted to a server-side program (when the surrounding form element is submitted), or it may be used strictly on the client as a way for users to interact with client-side scripts. Server applications also commonly embed session data in a page's hidden input elements so that the data gets submitted with the next form submissionone way to cascade data gathering across multiple form pages without maintaining the data temporarily on the server between page deliveries. Prior to HTML 4, input elements were supposed to be wrapped by a form element in all instances. This restriction is loosening up, but Navigator 4 still requires the form wrapper in order to render input elements. The primary attribute that determines the kind of control displayed on the page is the type attribute. This attribute can have one of the following values: button, checkbox, file, hidden, image, password, radio, reset, submit, or text. Not all input element types utilize the full range of attributes defined for the input element; sometimes a single attribute has different powers with different element types. For each attribute of the input element, the listing specifies the types to which it applies. Although the textarea element has its own tag, it is often treated like another form control. |
||||||||||||||||||||||||||||||
Example | ||||||||||||||||||||||||||||||
<FORM method="POST" action="http://www.giantco.com/cgi-bin/query.pl"> First Name: <INPUT type="text" name="first" id="first" maxlength="15"><BR> Last Name: <INPUT type="text" name="last" id="last" maxlength="25"><BR> ZIP Code: <INPUT type="text" name="zip" id="zip" maxlength="10"><BR> <INPUT type="reset"> <INPUT type="submit"> </FORM> |
||||||||||||||||||||||||||||||
Object Model Reference | ||||||||||||||||||||||||||||||
[window.]document.formName.inputName [window.]document.forms[i].elements[j] [window.]document.getElementById(elementID) |
||||||||||||||||||||||||||||||
Element-Specific Attributes | ||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
Element-Specific Event Handler Attributes | ||||||||||||||||||||||||||||||
Not all events are active in all input types.
|
accept | NN 6 IE 6 HTML 4 |
accept="MIMETypeList" | Optional |
Specifies one or more MIME types for allowable files to be uploaded to the server when the form is submitted. The HTML 4 provides this attribute in case a browser wishes to incorporate some file type filtering prior to submitting a form with a file input element. As of Version 6 browsers, this attribute has no practical impact on file selection or submission. |
|
Example | |
<INPUT type="file" accept="text/html, image/gif" ...> |
|
Value | |
MIME type (content type) value. For multiple items, a comma-delimited list is allowed. |
|
Default | |
None. |
accesskey | NN 6 IE 4 HTML 4 |
accesskey="character" | Optional |
See the description of this shared attribute at the beginning of this chapter for general characteristics. For file input types, pressing the accesskey combination places the text pointer in the associated text box, but does not "click" the Browser button. |
align | NN all IE all HTML 3.2 |
align="alignmentConstant" | Optional |
Determines how the rectangle of the input image aligns within the context of the surrounding content. See Section 8.1.5 earlier in this chapter for a description of the possibilities for this attribute with img elements. |
|
Example | |
<INPUT type="image" name="icon" src="icon.gif" align="absmiddle"> |
|
Value | |
Alignment-constant value applied to elements outside the image rectangle. |
|
Default | |
left |
|
Object Model Reference | |
[window.]document.formName.inputName.align [window.]document.forms[i].elements[j].align [window.]document.getElementById(elementID).align |
alt | NN 6 IE 4 HTML 4 |
alt="textMessage" | Optional |
Provides text description of the input element image while the image downloads, in lieu of rendered images, or for text-to-speech browsers. Behaves just like the alt attribute of the img element. |
|
Example | |
<INPUT type="image" name="icon" src="sndIcon.gif" alt="Sound Icon"> |
|
Value | |
Any quoted string of characters. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.alt [window.]document.forms[i].elements[j].alt [window.]document.getElementById(elementID).alt |
border | NN 4 IE 4(Mac) HTML n/a |
border="pixels" | Optional |
Navigator 4 and later on all OS platforms and IE 4 and later on the Mac let you specify a border around the input element image. Because an input element whose type attribute is "image" acts as a submit-style button, the border is rendered in the browser's link colors, unless overridden by a style sheet. If you want a different color for a plain border, use style sheets (with the appropriate div or span wrapper for Navigator 4). Navigator 4 (only) places a border around the image by default. Set the border attribute to zero to remove the border. |
|
Example | |
<INPUT type="image" name="icon" src="sndIcon.gif" border="0"> |
|
Value | |
Any integer pixel value. |
|
Default | |
2 (Navigator 4) or 0 (All others). |
|
Object Model Reference | |
[window.]document.formName.inputName.border [window.]document.forms[i].elements[j].border [window.]document.getElementById(elementID).border |
checked | NN all IE all HTML 4 |
checked | Optional |
A Boolean attribute that designates whether the current checkbox or radio input element is turned on when the page loads. In the case of a radio button grouping, only one input element should have the checked attribute. Scripts can modify the internal value of this attribute after the page has loaded. When the form is submitted, an input element that has its checked attribute turned on sends its name/value pair as part of the form data. The name/value pair consists of values assigned to the name and value attributes for the element. If no value is assigned to the value attribute, the string value "active" or "on" is automatically assigned when the checkbox or radio button is highlighted. This is fine for checkboxes because each one should be uniquely named. However, all radio buttons in a related group must have the same name for browsers to handle the automatic highlighting and unhighlighting within the group. This default characteristic doesn't provide enough information for most server-side programs to work with. See the name attribute below. |
|
Example | |
<INPUT type="checkbox" name="addToList" checked>Send email updates to this web site. |
|
Value | |
The presence of this attribute turns on its property. |
|
Default | |
Off. |
|
Object Model Reference | |
[window.]document.formName.inputName.checked [window.]document.forms[i].elements[j].checked [window.]document.getElementById(elementID).checked |
datafld | NN n/a IE 4 HTML |4| |
datafld="columnName" | Optional |
Used with IE 4 data binding to associate a remote data source column name with parts of various input elements. A datasrc attribute must also be set for the element. Works only with text file data sources in IE 5/Mac. This attribute was reserved in HTML 4, but was dropped in XHTML 1.0. |
|
Example | |
<INPUT type="text" name="first" datasrc="DBSRC3" datafld="firstName"> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.dataFld [window.]document.forms[i].elements[j].dataFld [window.]document.getElementById(elementID).dataFld |
datasrc | NN n/a IE 4 HTML |4| |
datasrc="dataSourceName" | Optional |
Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac. This attribute was reserved in HTML 4, but was dropped in XHTML 1.0. |
|
Example | |
<INPUT type="text" name="first" datasrc="DBSRC3" datafld="firstName"> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.dataSrc [window.]document.forms[i].elements[j].dataSrc [window.]document.getElementById(elementID).dataSrc |
disabled | NN 6 IE 4 HTML 4 |
disabled | Optional |
A disabled input element appears grayed out on the screen and cannot be activated by the user. A disabled form control cannot receive focus and does not become active within the tabbing order rotation. IE/Windows extends this to mean that if one radio button in a group is disabled, the entire group is disabled. Not so in IE/Mac or Netscape 6, which let unhighlighted buttons uncheck a disabled checked member of the group. The name/value pair of a disabled input element is not sent to the server when the form is submitted. input elements that normally perform submissions do not submit their form when disabled. The disabled attribute is a Boolean type, which means that in HTML format, its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the button object in Chapter 9). |
|
Example | |
<BUTTON type="submit" disabled>Ready to Submit </BUTTON> |
|
Value | |
The presence of the attribute disables the element. |
|
Default | |
false |
|
Object Model Reference | |
[window.]document.formName.inputName.disabled [window.]document.forms[i].elements[j].disabled [window.]document.getElementById(elementID).disabled |
dynsrc | NN n/a IE 4 HTML n/a |
dynsrc="URL" | Optional |
Internet Explorer 4 and later allows video clips (and VRML) to be displayed via an image type input element. To help the browser differentiate between a dynamic and static image source, you use the dynsrc attribute in place of the src attribute to load the video clip. All other visual aspects of the input type input element are therefore immediately applicable to the rectangular region devoted to playing the video clip. See also the loop attribute for controlling the frequency of clip play and the start attribute. |
|
Example | |
<INPUT type="image" dynsrc="submit.avi" alt="Submit Button" loop="3" height="100" width="150"> |
|
Value | |
Any valid URL, including complete and relative URLs. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.dynsrc [window.]document.forms[i].elements[j].dynsrc [window.]document.getElementById(elementID).dynsrc |
height, width | NN 4 IE 4 HTML n/a |
height="pixels" width="pixels" | Optional |
Defines the dimensions of the image used for the input element. If you omit these attributes, the browser waits for the image to load before allocating space on the page for the element. |
|
Example | |
<INPUT type="image" src="submit.jpg" height="20" width="60"> |
|
Value | |
Positive integers. |
|
Default | |
Default image size. |
hspace, vspace | NN 6 IE 4 HTML n/a |
height="pixels" width="pixels" | Optional |
Establishes extra padding around the image (and, thus, the input element) to keep other content at a minimum distance. The hspace controls the padding thickness of both the left and right edges; vspace does the same for top and bottom. |
|
Example | |
<INPUT type="image" src="submit.jpg" alt="Submit Button" height="20" width="60" hspace="10" vspace="20"> |
|
Value | |
Positive integers. |
|
Default | |
0 |
id | NN 4 IE 4 HTML 4 |
id="elementIdentifier" | Optional |
A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. An element can have an ID assigned for uniqueness as well as a class for inclusion within a group. See Chapter 3. IE 4 and later and Netscape 6 allow id attributes for nonrenderable elements, but if your code requires validation, be aware that the W3C HTML 4 and XHTML DTDs do not. Because all W3C DOM elements have an id property, it is natural to assign an id attribute to non-renderable elements if scripts must reference those elements. Or, your scripts may use other ways (e.g., the array returned by document.getElementsByTagName( )) to reference such elements. Assign identifiers to id attributes in order to duplicate values previously only assigned to name attributes in elements that feature the name attribute. Current browser form controls still require name attributes for name/value pairs to be submitted with the form, and a elements acting as anchors still need name attributes. Be sure to assign an identifier to the id attribute of any element you intend to reference by script. |
|
Example | |
<H2 id="sect3Head">Section Three</H2> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.getElementById(elementID).id
|
ismap | NN all IE all HTML all |
ismap | Optional |
The Boolean ismap attribute tells the browser that the image representing the input element is acting as a server-side image map. Unlike the img element, the image type input element has an action (submitting the form) associated with it, so no surrounding a element is required. The browser appends coordinate information about the click to the URL of the form's action. See the usemap attribute for client-side image map details. |
|
Example | |
<INPUT type="image src="navbar.gif" alt="Navigation Bar" ismap height="90" width="120"> |
|
Value | |
The presence of the attribute turns the feature on. |
|
Default | |
Off. |
|
Object Model Reference | |
[window.]document.formName.inputName.isMap [window.]document.forms[i].elements[j].isMap [window.]document.getElementById(elementID).isMap |
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | Optional |
The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices. |
|
Example | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
Value | |
Case-insensitive language code. |
|
Default | |
Browser default. |
|
Object Model Reference | |
[window.]document.getElementById(elementID).lang
|
loop | NN n/a IE 3 HTML n/a |
loop="loopCount" | Optional |
If you specify a video clip with the dynsrc attribute, the loop attribute controls how many times the clip should play ("loop") after it loads. If you set the value to zero, the clip loads but does not play initially. Video clips that are not currently running play when the user double-clicks on the image, but you may need to provide instructions for that on the page because there are no other obvious controls. |
|
Example | |
<INPUT type="image" dynsrc="snowman.avi" alt="Snowman Movie" loop="3" height="100" width="150"> |
|
Value | |
Any positive integer or zero. |
|
Default | |
1 |
|
Object Model Reference | |
[window.]document.formName.inputName.loop [window.]document.forms[i].elements[j].loop [window.]document.getElementById(elementID).loop |
lowsrc | NN all IE 4 HTML n/a |
lowsrc="URL" | Optional |
Provides a URL to an alternate low-resolution image to be loaded initially if the src image is taking a long time to load. |
|
Example | |
<INPUT type="image" src="navbar.jpg" alt="Navigation Bar" lowsrc="navbarBW.jpg" height="60" width="300"> |
|
Value | |
Any valid URL, including complete and relative URLs. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.lowsrc [window.]document.forms[i].elements[j].lowsrc [window.]document.getElementById(elementID).lowsrc |
maxlength | NN all IE all HTML all |
maxlength="characterCount" | Optional |
Defines the maximum number of characters that may be typed into a text field input element. In practice, browsers beep or otherwise alert users when a typed character would exceed the maxlength value. There is no innate correlation between the maxlength and size attributes. If the maxlength allows for more characters than fit within the specified width of the element, the browser provides horizontal scrolling (albeit awkward for many users) to allow entry and editing of the field. |
|
Example | |
<INPUT type="text" name="ZIP" maxlength="10"> |
|
Value | |
Positive integer. |
|
Default | |
Unlimited. |
|
Object Model Reference | |
[window.]document.formName.inputName.maxLength [window.]document.forms[i].elements[j].maxLength [window.]document.getElementById(elementID).maxLength |
name | NN all IE all HTML all |
name="elementIdentifier" | Optional/Required |
If the input element is part of a form being submitted to a server, the name attribute is required if the value of the element is to be submitted with the form. For forms that are in documents for the convenience of scripted form elements, input element names are not required but are helpful just the same in creating scripted references to these objects and their properties or methods. The identifier you assign to the name attribute becomes part of the name/value pair submitted to the server. Radio button elements that are to act as a mutually exclusive group must all have the same name attribute value. In many browsers, failure to include a name attribute assignment disallows user access to checkbox or radio input elements. The HTML 4 and XHTML specifications encourage using the id attribute in place of the name attribute throughout your pages. Mainstream browsers through Version 6 do not submit data from input elements bearing an id assignment but no name assignment. For consistency with DHTML-scripted DOM access of all elements, it's good practice to assign both attributes, even using the same identifier for both (except for radio buttons, whose IDs need to be unique, while their names are shared). Let the name attribute carry the element's value to the server, while scripts reach the elements via their IDsespecially in browsers that provide the IE document.all.elementID or W3C DOM document.getElementById(elementID) referencing syntax. Perhaps reluctantly, the strict XHTML DTD validates the name attribute for input elements so that validated pages will function within the reality of former and current browser implementations. |
|
Example | |
<INPUT type="text" name="ZIP" id="ZIP" maxlength="10"> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.name [window.]document.forms[i].elements[j].name [window.]document.getElementById(elementID).name |
readonly | NN 6 IE 4 HTML 4 |
readonly | Optional |
When the readonly attribute is present, the text field input element cannot be edited on the page by the user (although scripts can modify the content). A field marked as readonly should not receive focus within the tabbing order (although IE 4 and later for the Macintosh allows the field to receive focus and beeps if a user tries to type). |
|
Example | |
<INPUT type="text" name="ZIP" readonly> |
|
Value | |
The presence of the attribute sets its value to true. |
|
Default | |
false |
|
Object Model Reference | |
[window.]document.formName.inputName.readOnly [window.]document.forms[i].elements[j].readOnly [window.]document.getElementById(elementID).readOnly |
size | NN all IE all HTML all |
size="elementWidth" | Optional |
In practice, the size attribute is limited to describing the width of text field input elements based on the number of characters that display. The actual rendered width is calculated based on the font setting (or default font) for the element, but the results are not always perfect. Variations in font rendering (and the ability to specify alternate font faces and sizes in newer browsers) sometimes lead to unexpectedly narrower fields. Therefore, it is not wise to automatically set the size and maxlength attributes to the same value without testing the results on a wide variety of browsers and operating systems with worst-case data (for example, all "m" or "W" characters in proportional fonts). The HTML 4 specification indicates that the size attribute might be applied to other input element types (as pixels, rather than characters), but as of the Version 6 browsers, this is not the case. In the meantime, you can use CSS attributes to make buttons wider than the default size that tracks the width of the value attribute string. |
|
Example | |
<INPUT type="text" name="ZIP" maxlength="10" size="12"> |
|
Value | |
Any positive integer. |
|
Default | |
20 |
|
Object Model Reference | |
[window.]document.formName.inputName.size [window.]document.forms[i].elements[j].size [window.]document.getElementById(elementID).size |
src | NN all IE all HTML all |
src="URL" | Required |
URL to a file containing image data that is displayed through the input element of type image. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG. |
|
Example | |
<INPUT type="image" name="icon" src="sndIcon.gif" border="0"> |
|
Value | |
A complete or relative URL. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.src [window.]document.forms[i].elements[j].src [window.]document.getElementById(elementID).src |
start | NN n/a IE 4 HTML n/a |
start="videoStartType" | Optional |
Whenever you set the dynsrc attribute of an image type input element to display a video clip in Internet Explorer, you can direct the element to start playing the video immediately after the video file loads or when the user rolls the cursor over the image. The start attribute lets you decide the best user interface for your page. |
|
Example | |
<INPUT type="image dynsrc="submit.avi" alt="Submit Button" loop="1" start="mouseover" height="100" width="150"> |
|
Value | |
One of the two case-insensitive constant values: fileopen | mouseover. |
|
Default | |
fileopen |
|
Object Model Reference | |
[window.]document.formName.inputName.start [window.]document.forms[i].elements[j].start [window.]document.getElementById(elementID).start |
tabindex | NN 6 IE 4 HTML 4 |
tabindex="integer" | Optional |
A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their tabindex attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest tabindex value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same tabindex values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the tabindex attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. Note that reloading the current page does not necessarily restart the tabbing sequence from the "top." Therefore, controlling tabbing sequence is most helpful when the logic of your focusable elements is something other than the source code order of those elements (e.g., directing tabbing to fields down table columns rather than across rows). HTML 4 and Netscape 6 limit the tabindex attribute to the following elements: a, area, button, input, object, select, textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, span, table, and td. IE 5 adds every other renderable element. A negative value in IE (only) removes an element from tabbing order entirely. Links and anchors cannot be tabbed to with the Mac version of IE 4, so the tabindex for a elements is ignored in that version. |
|
Example | |
<A href="chapter3.html" tabindex="3">Chapter 3</A> |
|
Value | |
Any integer from 0 through 32,767. In IE, setting tabindex to a negative value causes the element to be skipped in tabbing order altogether. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.getElementById(elementID).tabIndex
|
type | NN all IE all HTML all | ||||||||||||||||||||||
type="elementType" | Required | ||||||||||||||||||||||
Advises the browser how to render the input element (or even whether the element should be rendered at all). Possible choices are as follows.
|
|||||||||||||||||||||||
Example | |||||||||||||||||||||||
<INPUT type="button" value="Toggle Sound" onclick="toggleSnd( )"> <INPUT type="checkbox" name="connections" value="ISDN">ISDN <INPUT type="file" name="uploadFile"> <INPUT type="hidden" name="prevState" id="prevState" value="modify"> <INPUT type="image" name="graphicSubmit" src="submit.jpg" height="40" width="40"> <INPUT type="password" name="password" maxlength="12" size="20"> <INPUT type="radio" name="creditCard" value="Visa">Visa <INPUT type="reset"> <INPUT type="submit" value="Send Encrypted"> Social Security Number:<INPUT type="text" name="ssn" value="###-##-####" onclick="validateSSN(this)"> |
|||||||||||||||||||||||
Value | |||||||||||||||||||||||
Any one of the known input element types: button | checkbox | file | hidden | image | password | radio | reset | submit | text. |
|||||||||||||||||||||||
Default | |||||||||||||||||||||||
text |
|||||||||||||||||||||||
Object Model Reference | |||||||||||||||||||||||
[window.]document.formName.inputName.type [window.]document.forms[i].elements[j].type [window.]document.getElementById(elementID).type |
usemap | NN 6 IE 6 HTML 4 |
usemap="mapURL" | Optional |
You can define a client-side image map for an image type input element with the help of the map and area elements. The map element is a named container for one or more area element. Each area element sets a "hot" area on an image and assigns a link destination (and other settings) for a response to the user clicking in that region. The purpose of the usemap attribute is to establish a connection between the image type input element and a named map element in the same document. In some respects, the map element's name is treated like an anchor in that the "address" of the map element is the element's name preceded by a # symbol. |
|
Example | |
<INPUT type="image" src="submit.gif" alt="Submit Button" usemap="#submitter" height="90" width="120"> |
|
Value | |
A URL to the map element in the same document (a hash symbol plus the map name). |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.useMap [window.]document.forms[i].elements[j].useMap [window.]document.getElementById(elementID).useMap |
value | NN all IE all HTML all |
value="text" | Optional/Required |
Preassigns a value to an input element that is submitted to the server as part of the name/value pair for the element. Some input element types are not submitted (an unchecked radio button, for example), but any value you associate with all but the button or reset type input element reaches the server when the element is submitted. In the case of text and password input elements, the value attribute contains a default entry. As the user makes a change to the content of the text field, the value changes, although the source code does not. When a form is reset (via a reset input element), the default values are put back into the text fields. The value attribute is required only for checkbox and radio input elements. For input elements that are rendered as standard clickable buttons, the value attribute defines the label that appears on the button. |
|
Example | |
<INPUT type="checkbox" name="connections" value="ISDN">ISDN |
|
Value | |
Any text string. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.formName.inputName.defaultValue [window.]document.forms[i].elements[j].defaultValue [window.]document.getElementById(elementID).defaultValue [window.]document.formName.inputName.value [window.]document.forms[i].elements[j].value [window.]document.getElementById(elementID).value |
vspace | |
See hspace. |
width | |
See height. |