Web Development and Design Foundations with XHTML, 5th Edition

Web Site Case Study: Adding a Form^393

● 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 fishcreek.css file.

2. The Contact Page.Use the Ask the Vet page as the starting point for Contact page.
   Launch Notepad and open the askvet.html file in the fishcreekcss folder that you
   previously created. Save the file as contact.html. Modify your file to look similar
   to the Contact page, as shown in Figure 9.31, as follows:
   ● Change the page title to an appropriate phrase.
   ● The Contact page will contain an

   element and a form in the rightcolumn
   div. Delete the Ask the Vet page content from the rightcolumn div(but
   leave the page footer in place).
   ● Add an

   element that contains the following text: Contact FishCreek
   ● 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/fishcreek.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.

Figure 9.31
Fish Creek
contact.html