Web Development and Design Foundations with XHTML, 5th Edition

Web Site Case Study: Adding a Form^395

Hands-On Practice Case

1. Configure the CSS.Modify the external style sheet, painter.css. The form is styled
   with CSS. Review Section 9.4. See Figures 9.30 and 9.32. Open painter.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.
   ● Configure space around the rows of form controls. Create a class named
   myRowwith bottom padding set to 20 pixels.
   ● Configure extra space surrounding the submit button by creating a class called
   mySubmitwith a left margin set to 110 pixels and all other margins set to 10
   pixels.
   Save the painter.css file.


2. The Free Estimate Page.Use the Testimonials page as the starting point for the
   Free Estimate page. Launch Notepad and open the testimonials.html file in the
   paintercss folder that you previously created. Save the file as estimates.html.
   Modify your file to look similar to the Free Estimate page, shown in Figure 9.32,
   as follows:
   ● Change the page title to an appropriate phrase.
   ● Delete the Testimonials page content from the rightcolumn div(but leave the
   phone number and page footer in place).
   ● The Estimate page will contain an

   element and a form in the
   rightcolumn div.
   ● Add a

   element that contains the following text: Request a Free Estimate.
   ● Prepare to code the XHTML for the form area. Begin with a

   tag that
   uses the postmethod and the actionattribute to invoke server-side process-
   ing. Unless directed otherwise by your instructor, configure the actionattrib-
   ute to send the form data to http://webdevfoundations.net/scripts/painter.asp.
   ● Configure the form control for the Name information. Code a

   that is
   assigned to the myRowclass. Create a element that is assigned to the
   labelColclass. Code the text, Name:.Create a text box named myName.
   ● Configure the form control for the E-mail information. Code a

   that is
   assigned to the myRowclass. Create a element that is assigned to the
   labelColclass. Code the text, E-mail:. Create a text box named myEmail.
   ● Configure the Type of Job area on the form. Code a

   . Create a
   element that is assigned to the labelColclass. Code the text, Type of Job:.
   Create a textareanamed myJobwith rows set to 2 and cols set to 20.
   ● Configure the submit button on the form. Code a

   that is assigned to the
   mySubmitclass. Code an input element with type="submit"and
   value="Free Estimate".

Save your page and test it in a browser. It should look similar to the page shown in
Figure 9.32. If you are connected to the Internet, submit the form. This will send your