(^390) Chapter 9 XHTML Forms
Place your name in an e-mail link on the Web page. Print both the source code
(from Notepad) and the browser view of your Web page.
Focus on Web Design
The design of a form, such as the justification of the labels, the use of background col-
ors, and even the order of the form elements can either increase or decrease the usabil-
ity of a form. Visit some of the following resources to explore form design:- http://www.uie.com/articles/web_forms
- http://particletree.com/features/10-tips-to-a-better-form
- http://www.alistapart.com/articles/sensibleforms
- http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
Create a Web page that lists the URLs of at least two useful resources along with a brief
description of the information you found most interesting or valuable. Design a form
on the Web page that applies what you’ve just learned in your exploration of form
design. Place your name in an e-mail link on the Web page. Print both the source code
(from Notepad) and the browser view of your Web page.
Web Site Case Study: Adding a Form
Each of the following case studies continues throughout most of the text. This chapter
adds a page containing a form that invokes server-side processing to the Web sites.JavaJam Coffee House
See Chapter 2 for an introduction to the JavaJam Coffee House Case Study. Figure 2.26
shows a site map for the JavaJam site. The Home page, Menu page, and Music page
were created in earlier chapters. You will work with the Web pages in the javajamcss
folder in this case study.
You have two tasks:
1.Add style rules to the javajam.css file that will configure a form.
2.Create a Jobs page (jobs.html) as shown in Figure 9.29.Hands-On Practice Case
- Configure the CSS.Modify the external style sheet, javajam.css. The form is styled
with CSS. Review Section 9.4. See Figures 9.29 and 9.30. Open javajam.css in
Notepad. Add the style rules as follows:
● Notice how the text labels for the form controls are on the left side of the con-
tent area but are right-aligned. Create a class called labelColthat will float to
the left, has a width of 100 pixels, aligns text to the right, and has 10 pixels of
padding on the right.