HTML and CSS Reference
In-Depth Information
Figure 9.31
Fish Creek
contact.html
●
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
labelCol
that 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
myRow
with bottom padding set to 20 pixels.
●
Configure extra space surrounding the submit button by creating a class called
mySubmit
with 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
<h2>
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
<h2>
element that contains the following text: Contact FishCreek
●
Prepare to code the XHTML for the form area. Begin with a
<form>
tag that
uses the
post
method and the
action
attribute to invoke server-side process-
ing. Unless directed otherwise by your instructor, configure the
action
attrib-
ute to send the form data to
http://webdevfoundations.net/scripts/fishcreek.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
.
●
Search WWH ::
Custom Search