HTML and CSS Reference
● Configure extra space surrounding the submit button by creating a class called
mySubmit with 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
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 <form> tag that
uses the post method and action attributes to invoke server-side processing.
Unless directed otherwise by your instructor, configure the action attribute to
send the form data to http://webdevfoundations.net/scripts/prime.asp.
Configure the form control for the Name information. Code a <div> that is
assigned to the myRow class. Create a <label> element that is assigned to the
labelCol class. Code the text, Name: . Create a text box named myName .
Configure the form control for the E-mail information. Code a <div> . Create
a <label> element that is assigned to the labelCol class. Code the text,
E-mail: . Create a text box named myEmail .
Configure the Comments area on the form. Code a <div> . Create a <label>
element that is assigned to the labelCol class. Code the text, Comments: .
Create a textarea named myComments with rows set to 2 and cols set to 20 .
Configure the submit button on the form. Code a <div> that is assigned to the
mySubmit class. Code an input element with type="submit" and
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 <form> tag. A confirmation
page that lists the form information and their corresponding names will be displayed.
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