HTML and CSS Reference
In-Depth Information
●
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
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
<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
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
<form>
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.
Search WWH ::
Custom Search