XHTML Forms - Web Development and Design Foundations with XHTML - page 366

Figure 9.15
The new version of
the contact form

Launch Notepad and open the contact.html page that you created in Hands-On Practice
9.1. Perform the following edits:

1. Place the cursor after the <form> tag and press to create a new line.

Configure the area where the customer name will be entered. Type Name: to cre-
ate the label for the text box. Now create an <input /> tag that has type config-
ured to text , name set to CustName , id set to CustName , and size configured to
30 . The label and text box should be on their own line. ( Hint : Use two <br />
elements.) The XHTML follows:

e

Name: <input type="text" name="CustName" id="CustName" size="30" />
<br /><br />
2. Verify that the e-mail form element you coded in Hands-On Practice 9.1 is on the
next line. The XHTML follows:

E-mail: <input type="text" name="CustEmail" id="CustEmail" />
<br /><br />
3. Press to create a new line under the E-mail text box. Type Phone : to create

the label for the text box. Now create an <input/> tag that has type configured
to text , name set to CustPhone , id set to CustPhone , size configured to 15 ,
and maxlength set to 12 . View Figure 9.16 and notice that the phone number
text box initially displays the characters ###-###-#### . Configure this by setting
the value attribute to ###-###-#### . The label and text box should be on their
own line. The XHTML follows:

e

Phone: <input type="text" name="CustPhone" id="CustPhone"
size="15" maxlength="12" value="###-###-####" />
<br /><br />
4. Now you will configure the area for customer comments or questions. On its
own line, type Question or Comments: Use a <br /> element to cause this
text to display on its own line in the Web browser. Next, configure a scrolling
text box with 4 rows, 60 columns, the name CustComment , and the id set to
CustComment . Configure the default text to display between the <textarea> and
</textarea> tags as Please type your question or comment here .