Tài liệu Professional Web Design: Techniques and Templates- P9 pdf

Game Developing GWX

<input type="text" name="purchase_date" id="purchase_date"

style="width:70px;"/><span style="padding-left:10px;">

<img src="images/icon-calendar.gif" width="16" height="15" alt=""

border="0" /></span>

</div>

Adding the Comments Row

The code required to produce the Comments row is almost identical to several of

the other rows, barring one difference—the row includes the <TEXTAREA> tag,

which does not force the height of the row for compliant browsers, such as

Firefox. The designer, therefore, needs to force the height of the row. One way

to do so is to add a local style to the parent <DIV>, shown in Listing 14.9.

Without declaring the height of the row, the row would look like the right side of

Figure 14.9. The left side illustrates what the row looks like if a height is defined.

Listing 14.9 XHTML and CSS Code for Comments Row

<div class="a5-row-1" style="height:80px;">

<label title="Comments" for="comments">Comments:</label>

<textarea name="comments" id="comments" rows="3" cols="40">

</textarea>

</div>

Figure 14.9

The Comments row and how it will appear in compliant browsers when a height is and isn't defined

when using the <TEXTAREA> tag.

382 Chapter 14 ■ Case Study: A CSS Form

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Game Developing GWX

Adding the Options to Select Rows

The Options to Select rows add two more situations a designer may or may not

come across. The first is to include only a section title and nothing more in a row.

This is accomplished by merely not including a form field. The second is a little

more involved. It requires two things: (1) define appropriate margins for posi￾tioning in the parent <DIV>, which, in this case, sets the bottom margin to

20 pixels and the left margin to 80 pixels; and (2) use a table to lay out the form

fields in columns and rows. While the latter could be accomplished with CSS, the

more simple and straightforward route is to use a table. The code in Listing 14.10

shows how simple the table needs to be.

Listing 14.10 XHTML and CSS Code for Options to Select Row

<div class="a5-row-1">

<label>Options To Select:</label>

</div>

<div style="margin:0px 0px 20px 80px;">

<table cellspacing="0" cellpadding="3" border="0">

<tr>

<td>

<input type="checkbox" name="sample_text_1" id="sample_text_1" />

<label title="Sample Text Option 1" for="sample_text_1">Sample

Text Option 1</label>

</td>

<td>

<input type="checkbox" name="sample_text_2" id="sample_text_2" />

<label title="Sample Text Option 2" for="sample_text_2">

Sample Text Option 2</label>

</td>

<td>

<input type="checkbox" name="sample_text_3" id="sample_text_3" />

<label title="Sample Text Option 3" for="sample_text_3">Sample

Text Option 3</label>

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="sample_text_4" id="sample_text_4" />

<label title="Sample Text Option 4" for="sample_text_4">

Sample Text Option 4</label>

</td>

Building the Form Row by Row 383

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Game Developing GWX

<td>

<input type="checkbox" name="sample_text_5" id="sample_text_5" />

<label title="Sample Text Option 5" for="sample_text_5">

Sample Text Option 5</label>

</td>

<td>

<input type="checkbox" name="sample_text_6" id="sample_text_6" />

<label title="Sample Text Option 6" for="sample_text_6">Sample Text

Option 6</label>

</td>

</tr>

</table>

</div>

Adding the Submit and Cancel Buttons

The final row contains the Submit and Cancel buttons. There are several things to

note about this section of code: (1) a local style is added to the <DIV> to provide 20

pixels of padding on the top and bottom, (2) the <LABEL> tag has &nbsp; added so

that all browsers recognize the tag and account for its width, and (3) the two but￾tons are placed side by side without any additional styling. The Cancel button calls

an image, while the Submit button is generated with XHTML (see Listing 14.11).

Listing 14.11 XHTML and CSS Code for Submit and Cancel Buttons

<div class="a5-row-1" style="padding:20px 0px 20px 0px;">

<label>&nbsp;</label>

<input type="submit" value="submit" />

<input type="image" src="images/button-cancel.gif" />

</div>

The Final Product

When all the code and images are added, the final 13-row form only needs the

back-end functionality added to it. Figure 14.10 is the visual representation of

the final code, which is shown in Listing 14.12.

384 Chapter 14 ■ Case Study: A CSS Form

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Game Developing GWX

Listing 14.12 XHTML and CSS Code for Completed Form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1- transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en"><head><title></title>

<style type="text/css">

html, body {

margin:0px;

padding:10px;

font: 9.8pt arial, helvetica, sans-serif;

color:#000000;

}

.a5-form {

margin:0px 0px 0px 0px;

}

.a5-required-field {

Figure 14.10

How the final form appears prior to being added to the design (see Figure 14.1).

Building the Form Row by Row 385

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Game Developing GWX

color:#D60000;

}

.a5-disabled-field {

background:#7ED0D4;

}

.a5-disabled-checkbox {

background:#7ED0D4;

voice-family:"\"}\"";

voice-family:inherit;

}

html>body .a5-disabled-checkbox {

padding-top:3px;

}

.a5-row-1 {

height:30px;

}

.a5-row-1 label {

float: left;

width: 220px;

text-align: right;

padding:0px 30px 0px 0px;

}

</style>

</head>

<body>

<form action="menu-item-3.cfm" method="post" name="sample_form"

class="a5-form">

<div class="a5-row-1" style="margin:10px 0px 0px 0px;">

Required: <span class="a5-required-field">*</span>

</div>

<div class="a5-row-1">

<label title="First Name" for="first_name">First Name: <span

class="a5-required-field">*</span></label>

<input type="text" name="first_name" id="first_name" />

</div>

<div class="a5-row-1">

<label title="Last Name" for="last_name">Last Name:</label>

<input type="text" name="last_name" id="last_name"

disabled="disabled" class="a5-disabled-field" />

</div>

386 Chapter 14 ■ Case Study: A CSS Form

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.