HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [170]
Working with Other Text Elements
When you know how to work with text fields, you’ve mastered about half of the form elements. Several other form elements work exactly like text fields, including these:
♦ Password fields obscure the user’s input with asterisks, but preserve the text.
♦ Hidden fields allow you to store information in a page without revealing it to the user. (They’re used a little bit in client-side coding, but almost never in JavaScript.)
♦ Text areas are a special variation of textboxes designed to handle multiple lines of input.
Figure 5-10 is a page with all these elements available on the same form.
Figure 5-10: Passwords, hidden fields, and text areas all look the same to JavaScript.
When the user clicks the button, the contents of all the fields (even the password and hidden fields) appear on the bottom of the page, as shown in Figure 5-11.
Figure 5-11: Now you can see what was in everything.
Building the form
Here’s the XHTML (otherText.html) that generates the form shown in Figures 5-10 and 5-11:
Text Input Devices
The code may be familiar to you if you read about form elements in Book I, Chapter 7. A few things are worth noting for this example:
♦ An ordinary text field appears, just for comparison purposes. It has an id so that it can be identified in the JavaScript.
♦ The next field is a password field. Passwords display asterisks, but store the actual text that was entered. This password has an id of pwd.
♦ The hidden field is a bit strange. You can use hidden fields to store information on the page without displaying that information to the user. Unlike the other kinds of text fields, the user can’t modify a hidden field. (She usually doesn’t even know it’s there.) This hidden field has an id of secret and a value (“I can’t tell you”).
♦ The text area has a different format. The input elements are all single-tag elements, but the textarea is designed to contain a large amount of text, so it has beginning and end tags. The text area’s id is txtArea.
♦ A button starts all the fun. As usual, most of the elements just sit there gathering data, but the button has an onclick event associated with it, which calls a function.
♦ External CSS gussies it all up. The page has some minimal CSS to clean it up. The CSS isn’t central to this discussion, so I don’t reproduce it. Note that the page will potentially have a dl on it, so I have a CSS style for it, even though it doesn’t appear by default.
The password and hidden fields seem secure, but they aren’t. Anybody who views the page source will be able to read the value of a hidden field, and passwords transmit their information in the clear. You really shouldn’t be using Web technology (especially this kind) to transport nuclear launch codes or the secret to your special sauce. (Hmmm, maybe the secret sauce recipe is the launch code — sounds like a bad spy movie.)
When I create a text field, I often suspend my rules on indentation because the text field preserves everything inside it, including any indentation.
Writing the function
After you build the form, all you need is a function. Here’s the good news: JavaScript treats all these elements in exactly the same way! The way you handle a password, hidden field, or text area is