HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [172]
Figure 5-12 illustrates this problem.
Figure 5-12: The ordinary view source command isn’t showing the contents of the div!
When you build regular Web pages, this approach isn’t a problem because regular Web pages don’t change. Dynamically generated pages can change on the fly, and the browser doesn’t expect that. If you made a mistake in the HTML, you can’t simply view the source to see what you did wrong in the code generated by your script. Fortunately, Firefox plugins give you two easy solutions:
♦ The Web developer toolbar: This toolbar has a wonderful tool called view generated source available on the view source menu. It allows you to view the source code of the current page in its current state, including any code dynamically generated by your JavaScript.
♦ The Firebug window: Open this window when a page is open and browse (with the HTML tab) around your page. Firebug gives you an accurate view of the page contents even when they’re changed dynamically, which can be extremely useful.
These tools keep you sane when you’re trying to figure out why your generated code isn’t acting right. (I wish I’d had them years ago. . . .)
Figure 5-13 shows the Firebug toolbar with the dynamically generated contents showing.
Figure 5-13: Firebug shows the current status of the page, even if it’s dynamically modified.
Chapter 6: Getting Valid Input
In This Chapter
Extracting data from drop-down lists
Working with multiple-selection lists
Getting data from check boxes and radio groups
Validating input with regular expressions
Using character, boundary, and repetition operators
Using pattern memory
Getting input from the user is always nice, but sometimes users make mistakes. Whenever you can, you want to make the user’s job easier and prevent certain kinds of mistakes.
Fortunately, you can take advantage of several tools designed exactly for that purpose. In this chapter, you discover two main strategies for improving user input: specialized input elements and pattern-matching. Together, these tools can help ensure that the data the user enters is useful and valid.
Getting Input from a Drop-Down List
The most obvious way to ensure that the user enters something valid is to supply him with valid choices. The drop-down list is an obvious and easy way to do this, as you can see from Figure 6-1.
The list-box approach has a lot of advantages over text field input:
♦ The user can input with the mouse, which is faster and easier than typing.
♦ You shouldn’t have any spelling errors because the user didn’t type the response.
♦ The user knows all the answers available because they’re listed.
♦ You can be sure the user gives you a valid answer because you supplied the possible responses.
♦ User responses can be mapped to more complex values — for example, you can show the user Red and have the list box return the hex value #FF0000.
Figure 6-1: The user selects from a predefined list of valid choices.
If you want to know how to build a list box with the XHTML select object, refer to Book I, Chapter 7.
Building the form
When you’re creating a predefined list of choices, create the HTML form first because it defines all the elements you’ll need for the function. The code is a standard form: