<input type="text"> Creating Text Fields You use the <input type = "text"> element to create text fields. This element is an empty element and is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are its attributes: -
accesskey Assigns a keyboard access key to the button. (XHTML 1.0 Strict, XHTML 1.0 Transitional.) -
class Gives the style class of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
dir Sets the direction of text that doesn't have an inherent direction in which you should read it, called directionally neutral text. You can set this attribute to ltr , for left-to-right text, or rtl , for right-to-left text. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
disabled Indicates that the element should be disabled when first displayed. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
id Refers to the element; set this attribute to a unique identifier. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
lang Specifies the base language used in the element. Applies only when the document is interpreted as HTML. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1, 3, 4, IE4, IE5.) -
maxlength Sets the maximum number of characters that can be entered into the text field. The text field will scroll as needed if maxlength is greater than value of the size attribute. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
name Gives the element a name. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
readonly Specifies that the content of the text field is read-only, which means that it cannot be modified. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
size Sets the size of the text field, as measured in characters. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
style Inline style indicating how to render the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
tabindex Specifies the tab sequence of hyperlinks in the page for keyboard navigation. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
title Contains the title of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
type Specifies the type of the element. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
value Holds the initial text in the text field. Set this to alphanumeric characters. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) -
xml:lang Specifies the base language for the element when the document is interpreted as an XML document. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.) Here are the XHTML events this element supports: onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup , onfocus , onblur , onselect , and onchange . You can create a text field with the <input type="text"> element. You can set the size of the text field in characters with the size attribute and the maximum length of text (text fields will scroll if the maximum length is greater than its size) with the maxlength attribute. Here's an example. In this case, I'm connecting JavaScript code to display the message Hello from JavaScript . in the text field to the onkeyup event; every time you type something in this text field, the text will be immediately replaced with that message: Listing ch17_16.html <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using Forms in XHTML </title> <script language = "javascript"> function displayMessage() { document.form1.textfield.value = "Hello from JavaScript." } </script> </head> <body> <center> <h1> Using Forms in XHTML </h1> <form name = "form1" id = "form1" action = "action"> <input type = "text" name = "textfield" size = "25" onkeyup = "displayMessage()" /> </form> </center> </body> </html> You can see the results in Figure 17-8. Figure 17-8. Using a text field in XHTML.   |
