The INPUT TYPE TEXT , INPUT TYPE PASSWORD , and INPUT TYPE HIDDEN Elements

The <INPUT TYPE="TEXT">, <INPUT TYPE= "PASSWORD">, and <INPUT TYPE="HIDDEN"> Elements

The text controls based on the <INPUT> element share the same properties, methods , and events (except for the hidden control, which doesn't appear in a web page and so can't have visually-oriented events such as onclick ). Here are these controls:

• <INPUT TYPE="TEXT"> . Text fields.

• <INPUT TYPE="PASSWORD"> . Password controls.

• <INPUT TYPE="HIDDEN"> . Hidden text controls, which contain text not visible to the user , but available to your code to store text in.

You can see an overview of the properties, methods, and events of these controls in Table 13.1, their properties in depth in Table 13.2, their methods in Table 13.3, and their events in Table 13.4. Note that JavaScript's core HTML properties, methods, and events, which we discussed in Chapters 5, "Using Core HTML Properties," and 6, "Using Core HTML Methods and Events," also apply to these controls.

Table 13.1. Overview of the Properties, Methods, and Events of the <INPUT TYPE="TEXT"> , <INPUT TYPE="PASSWORD"> , and <INPUT TYPE="HIDDEN"> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Properties	Methods	Events
defaultValue	select	onafterupdate
form	createTextRange	onbeforeupdate
maxLength		onchange
name		onerrorupdate
readOnly		onselect
size
type
value

Table 13.2. The Properties of the <INPUT TYPE="TEXT"> , <INPUT TYPE="PASSWORD"> , and <INPUT TYPE="HIDDEN"> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
defaultValue	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the default value for the controlthe value that appears in the control when the control's form is reset. Set to a text string. (In practice, however, this property does not appear to work as it should. Resetting a form, either with a reset button or the reset method does not actually make this property's value appear in text controls.)
form	x	x	x	x	x	x	x	x	x	x
	Read-only
	Contains a reference to the control's form. This is handy if you pass a control to a function and need access to other controls in the same form.
maxLength				x			x	x	x	x
	Read/write
	Sets the maximum number of characters the control may contain and display simultaneously . Set to an integer. A very handy property to limit the amount of input you want to accept (and useful to limit hackers from trying to break CGI programs by sending too much data to the server).
name	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the name of the control, as used in code. May be changed in code, because it's read/write. Set to a name string.
readOnly				x			x	x	x	x
	Read/write
	Specifies whether the control is read-only. Set to true or false. This property is useful to "disable" text controls (although you can also use the disabled property). If you're just using a text control to display text, however, consider using a <DIV> or <SPAN> element with the innerHTML property instead.
size				x			x	x	x	x
	Read/write
	Sets the width of the control, measured in characters. A very handy property if you want wider text controls than the default.
type		x	x	x		x	x	x	x	x
	Read-only
	Holds the type of the text control, as a string such as "text" , "password" , or "hidden" . This property reflects the TYPE attribute of the control. As of Internet Explorer 5, the type property is read/write, but only once, when an element is created with the createElement method and before it is added to the document.
value	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the actual text in the control. Set to a string. You can get or set the text in a text control using this property. See "Using Text Controls" in this chapter.

Table 13.3. The Methods of the <INPUT TYPE="TEXT"> , <INPUT TYPE="PASSWORD"> , and <INPUT TYPE="HIDDEN"> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
createTextRange							x	x	x	x
	Returns: TextRange object
	This method creates a TextRange object for the control.
	Syntax: createTextRange() . See Chapter 11, "Working with HTML Text Elements," for more on text ranges.
select		x	x	x			x	x	x	x
	Returns: Nothing
	Selects the text in the control.
	Syntax: select() . You can use this method together with the focus method (see Chapter 6) to highlight text and set yourself up for a response from the user.

Table 13.4. The Events of the <INPUT TYPE="TEXT"> , <INPUT TYPE="PASSWORD"> , and <INPUT TYPE="HIDDEN"> Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Event	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onafterupdate							x	x	x	x
	Occurs in a data-bound object after updating the data in the data source.
onbeforeupdate							x	x	x	x
	Occurs in a data-bound object before updating the data in the data source.
onchange	x	x	x	x	x	x	x	x	x	x
	Occurs when the user has changed the contents of a text control and then leaves the control by setting the focus somewhere else (such as by clicking another control). That is, the user has "committed" the change by moving away from the controlthis event does not just happen while the user is entering text. (For that, see onkeydown , onkeypress , and onkeyup in Chapter 6.) See "Using Text Controls" in this chapter.
onerrorupdate							x	x	x	x
	Occurs in a data-bound object when an error happened while updating data in the data source.
onselect				x	x	x	x	x	x	x
	Occurs when text in the control is selected. See "Using Text Areas" in this chapter for an example.