Web Development and Design Foundations with XHTML, 5th Edition

Web Site Case Study: Adding a Form^397

● Configure extra space surrounding the submit button by creating a class called

mySubmitwith margins set to 10 pixels.

Save the prime.css file.

2. The Contact Page.Use the Financing page as the starting point for the Contact
   page. Launch Notepad and open the financing.html file in the primecss folder
   that you previously created. Save the file as contact.html.
   Modify your file to be similar to the Contact page, as shown in Figure 9.33, as
   follows:
   ● Change the page title to an appropriate phrase.
   ● Replace the Financing subheading with Contact.
   ● Delete the rest of the Financing page content from the rightcolumn div(but
   leave the navigation and page footer in place).
   ● Prepare to code the XHTML for the form area. Begin with a
   tag that
   uses the postmethod and actionattributes to invoke server-side processing.
   Unless directed otherwise by your instructor, configure the actionattribute to
   send the form data to http://webdevfoundations.net/scripts/prime.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

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

   . Create a
   element that is assigned to the labelColclass. Code the text, Comments:.
   Create a textareanamed myCommentswith 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="Contact".

Save your page and test it in a browser. It should look similar to the page shown in
Figure 9.33. If you are connected to the Internet, submit the form. This will send your
form information to the server-side script configured in the tag. A confirmation
page that lists the form information and their corresponding names will be displayed.

Web Project

See Chapters 5 and 6 for an introduction to the Web Project case. You will either add a
form to an existing page in your Web site or create a new page that contains a form.
Use CSS to style the form.

Hands-On Practice Case

1. Choose one of your project Web pages to contain the form. Sketch a design of the
   form you plan to create.


2. Modify your project’s external CSS file (project.css) to configure the form areas as
   needed.