Chapter 16 - Dynamic HTML: Data Binding with Tabular Data

Download Report

Transcript Chapter 16 - Dynamic HTML: Data Binding with Tabular Data 

Chapter 16 - Dynamic HTML: Data
Binding with Tabular Data Control
Outline
16.1
16.2
16.3
16.4
16.5
16.6
16.7
16.8
16.9
Introduction
Simple Data Binding
Moving within a Recordset
Binding to an img
Binding to a table
Sorting table Data
Advanced Sorting and Filtering
Data Binding Elements
Web Resources
 2004 Prentice Hall, Inc. All rights reserved.
Objectives
• In this lesson, you will learn:
– To understand Dynamic HTML’s notion of data binding and
how to bind data to XHTML elements.
– To be able to sort and filter data directly on the client
without involving the server.
– To be able to bind a table and other XHTML elements to
data source objects (DSOs).
– To be able to filter data to select only records appropriate for
a particular application.
– To be able to navigate backward and forward through a
database with the Move methods.
 2004 Prentice Hall, Inc. All rights reserved.
16.1 Introduction
• Data binding
– Data no longer reside exclusively on the server
– Data can be maintained on the client
– Eliminate server activity and network delays
• Data Source Objects (DSOs)
– Tabular Data Control (TDC)
 2004 Prentice Hall, Inc. All rights reserved.
16.2 Simple Data Binding
• Data file
– Header row
• Specifies the names of the columns below
– Text qualifiers ( @ )
• Enclose data in each field
– Field delimiter ( | )
• Separate each field
– Recordset
 2004 Prentice Hall, Inc. All rights reserved.
1
@ColorName@|@ColorHexRGBValue@
2
@aqua@|@#00FFFF@
3
@black@|@#000000@
4
@blue@|@#0000FF@
5
@fuchsia@|@#FF00FF@
6
@gray@|@#808080@
HTMLStandardColors
.txt
7
@green@|@#008000@
(1 of 1)
8
@lime@|@#00FF00@
9
@maroon@|@#800000@
Outline
10 @navy@|@#000080@
11 @olive@|@#808000@
12 @purple@|@#800080@
13 @red@|@#FF0000@
14 @silver@|@#C0C0C0@
15 @teal@|@#008080@
16 @yellow@|@#FFFF00@
17 @white@|@#FFFFFF@
 2004 Prentice Hall, Inc.
All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5
<!-- Fig 16.2: introdatabind.html
6
<!-- Simple data binding and recordset manipulation -->
introdatabind.html
(1 of 4)
-->
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Intro to Data Binding</title>
11
12
<!-- This object element inserts an ActiveX control -->
13
<!-- for handling and parsing our data. The PARAM
-->
14
<!-- tags give the control starting parameters
-->
15
<!-- such as URL.
-->
16
<object id = "Colors"
17
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
18
<param name = "DataURL" value =
19
"HTMLStandardColors.txt" />
20
<param name = "UseHeader" value = "TRUE" />
21
<param name = "TextQualifier" value = "@" />
22
<param name = "FieldDelim" value = "|" />
23
</object>
24
 2004 Prentice Hall, Inc.
All rights reserved.
25
<script type = "text/javascript">
26
<!--
27
var recordSet = Colors.recordset;
Outline
28
29
function displayRecordNumber()
30
{
if ( !recordSet.EOF )
31
recordNumber.innerText =
32
recordSet.absolutePosition;
33
else
34
recordNumber.innerText = " ";
35
36
introdatabind.html
(2 of 4)
}
37
38
function forward()
39
{
recordSet.MoveNext();
40
41
if ( recordSet.EOF )
42
recordSet.MoveFirst();
43
44
colorSample.style.backgroundColor =
45
46
colorRGB.innerText;
47
displayRecordNumber();
48
}
49
// -->
 2004 Prentice Hall, Inc.
All rights reserved.
50
51
</script>
</head>
Outline
52
53
<body onload = "reNumber()" onclick = "forward()">
54
55
<h1>XHTML Color Table</h1>
56
<h3>Click anywhere in the browser window
57
to move forward in the recordset.</h3>
58
<p><strong>Color Name: </strong>
59
<span id = "colorId" style = "font-family: monospace"
60
introdatabind.html
(3 of 4)
datasrc = "#Colors" datafld = "ColorName"></span><br />
61
62
<strong>Color RGB Value: </strong>
63
<span id = "colorRGB" style = "font-family: monospace"
64
datasrc = "#Colors" datafld = "ColorHexRGBValue">
65
</span><br />
66
67
Currently viewing record number
68
<span id = "recordNumber" style = "font-weight: 900">
69
</span><br />
70
71
72
73
<span id = "colorSample" style = "background-color: aqua;
color: 888888; font-size: 30pt">Color Sample
</span></p>
74
 2004 Prentice Hall, Inc.
All rights reserved.
75
</body>
76 </html>
Outline
introdatabind.html
(4 of 4)
 2004 Prentice Hall, Inc.
All rights reserved.
16.3 Moving within a Recordset
• Moving through a recordset using JavaScript
(Fig. 16.3)
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig 16.3: moving.html
-->
6
<!-- Moving through a recordset -->
moving.html
(1 of 5)
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>Dynamic Recordset Viewing</title>
11
<object id = "Colors"
12
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
13
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
14
15
<param name = "UseHeader" value = "TRUE" />
16
<param name = "TextQualifier" value = "@" />
17
<param name = "FieldDelim" value = "|" />
18
</object>
19
20
<script type = "text/javascript">
21
<!--
22
var recordSet = Colors.recordset;
23
24
function update()
25
{
 2004 Prentice Hall, Inc.
All rights reserved.
h1Title.style.color = colorRGB.innerText;
26
27
}
Outline
28
29
function move( whereTo )
30
{
31
switch ( whereTo ) {
moving.html
(2 of 5)
32
33
case "first":
34
recordSet.MoveFirst();
35
update();
36
break;
37
38
// If recordset is at beginning, move to end.
39
case "previous":
40
41
recordSet.MovePrevious();
42
43
44
if ( recordSet.BOF )
recordSet.MoveLast();
45
46
update();
47
break;
48
 2004 Prentice Hall, Inc.
All rights reserved.
49
// If recordset is at end, move to beginning.
50
case "next":
Outline
51
recordSet.MoveNext();
52
53
if ( recordSet.EOF )
54
moving.html
(3 of 5)
recordSet.MoveFirst();
55
56
57
update();
58
break;
59
case "last":
60
61
recordSet.MoveLast();
62
update();
63
break;
}
64
65
}
66
// -->
67
</script>
68
69
70
<style type = "text/css">
input { background-color: khaki;
71
color: green;
72
font-weight: bold }
73
74
</style>
</head>
 2004 Prentice Hall, Inc.
All rights reserved.
75
76
<body style = "background-color: darkkhaki">
77
78
79
80
<h1 style = "color: black" id = "h1Title">
XHTML Color Table</h1>
<span style = "position: absolute; left: 200; width: 270;
81
border-style: groove; text-align: center;
82
background-color: cornsilk; padding: 10">
83
<strong>Color Name: </strong>
84
<span id = "colorName" style = "font-family: monospace"
85
datasrc = "#Colors" datafld = "ColorName">ABC</span>
86
Outline
moving.html
(4 of 5)
<br />
87
88
<strong>Color RGB Value: </strong>
89
<span id = "colorRGB" style = "font-family: monospace"
90
91
datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC
</span><br />
92
93
94
<input type = "button" value = "First"
onclick = "move( 'first' );" />
95
96
97
<input type = "button" value = "Previous"
onclick = "move( 'previous' );" />
98
 2004 Prentice Hall, Inc.
All rights reserved.
99
<input type = "button" value = "Next"
100
onclick = "move( 'next' );" />
Outline
101
102
<input type = "button" value = "Last"
103
onclick = "move( 'last' );" />
104
</span>
moving.html
(5 of 5)
105
106
</body>
107 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.4 Binding to an img
• Many different types of XHTML elements can be
bound to data sources
– Binding to an img element
• Changing the recordset updates the src attribute of the image
 2004 Prentice Hall, Inc. All rights reserved.
1
image
2
numbers/0.gif
3
numbers/1.gif
4
numbers/2.gif
5
numbers/3.gif
6
numbers/4.gif
7
numbers/5.gif
8
numbers/6.gif
9
numbers/7.gif
Outline
images.txt
(1 of 1)
10 numbers/8.gif
11 numbers/9.gif
 2004 Prentice Hall, Inc.
All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 16.5: bindimg.html
-->
6
<!-- Binding data to an image -->
binding.html
(1 of 3)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Binding to a img</title>
11
12
<object id = "Images"
13
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
14
<param name = "DataURL" value = "images.txt" />
15
<param name = "UseHeader" value = "True" />
16
</object>
17
18
<script type = "text/javascript">
19
<!--
20
recordSet = Images.recordset;
21
22
function move( whereTo )
23
{
24
switch( whereTo ) {
25
 2004 Prentice Hall, Inc.
All rights reserved.
26
case "first":
27
recordSet.MoveFirst();
28
break;
Outline
29
30
case "previous":
31
32
binding.html
(2 of 3)
recordSet.MovePrevious();
33
34
35
if ( recordSet.BOF )
recordSet.MoveLast();
36
37
break;
38
39
case "next":
40
41
recordSet.MoveNext();
42
43
44
if ( recordSet.EOF )
recordSet.MoveFirst();
45
46
break;
47
48
case "last":
49
recordSet.MoveLast();
50
break;
 2004 Prentice Hall, Inc.
All rights reserved.
}
51
52
}
53
// -->
54
</script>
55
Outline
binding.html
(3 of 3)
</head>
56
57
<body>
58
59
<img datasrc = "#Images" datafld = "image" alt = "Image"
style = "position: relative; left: 45px" /><br />
60
61
62
<input type = "button" value = "First"
onclick = "move( 'first' );" />
63
64
65
<input type = "button" value = "Previous"
66
onclick = "move( 'previous' );" />
67
68
<input type = "button" value = "Next"
69
onclick = "move( 'next' );" />
70
71
<input type = "button" value = "Last"
72
onclick = "move( 'last' );" />
73
74
</body>
75 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.5 Binding to a table
• Binding data to a table is perhaps the most
important of data binding
– Different from the data binding we’ve seen
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5
<!-- Fig. 16.6: tablebind.html
-->
6
<!-- Using Data Binding with tables -->
tablebind.html
(1 of 2)
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>Data Binding and Tables</title>
11
<object id = "Colors"
12
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
13
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
14
15
<param name = "UseHeader" value = "TRUE" />
16
<param name = "TextQualifier" value = "@" />
17
<param name = "FieldDelim" value = "|" />
18
19
</object>
</head>
20
21
<body style = "background-color: darkseagreen">
22
23
<h1>Binding Data to a <code>table</code></h1>
24
25
<table datasrc = "#Colors" style = "border-style: ridge;
 2004 Prentice Hall, Inc.
All rights reserved.
26
border-color: darkseagreen;
27
background-color: lightcyan">
Outline
28
29
<thead>
30
<tr style = "background-color: mediumslateblue">
31
<th>Color Name</th>
32
<th>Color RGB Value</th>
33
</tr>
34
</thead>
tablebind.html
(2 of 2)
35
<tbody>
36
37
<tr style = "background-color: lightsteelblue">
38
<td><span datafld = "ColorName"></span></td>
39
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
40
41
</tr>
42
</tbody>
43
44
</table>
45
46
</body>
47 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.6 Sorting table Data
• Manipulate a large data source
– Need to sort data
• Can be accomplished by the Sort property of the TDC
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5
<!-- Fig 16.7: sorting.html -->
6
<!-- Sorting table data
-->
sorting.html
(1 of 3)
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>Data Binding and Tables</title>
11
<object id = "Colors"
12
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
13
<param name = "DataURL" value =
"HTMLStandardColors.txt" />
14
15
<param name = "UseHeader" value = "TRUE" />
16
<param name = "TextQualifier" value = "@" />
17
<param name = "FieldDelim" value = "|" />
18
19
</object>
</head>
20
21
<body style = "background-color: darkseagreen">
22
23
<h1>Sorting Data</h1>
24
25
<table datasrc = "#Colors" style = "border-style: ridge;
 2004 Prentice Hall, Inc.
All rights reserved.
26
border-color: darkseagreen;
27
background-color: lightcyan">
28
<caption>
29
Sort by:
30
31
<select onchange = "Colors.Sort = this.value;
32
Colors.Reset();">
33
<option value = "ColorName">Color Name (Ascending)
<option value = "-ColorName">Color Name (Descending)
</option>
36
37
<option value = "ColorHexRGBValue">Color RGB Value
(Ascending)</option>
38
39
sorting.html
(2 of 3)
</option>
34
35
Outline
<option value = "-ColorHexRGBValue">Color RGB Value
(Descending)</option>
40
41
</select>
42
</caption>
43
44
<thead>
45
<tr style = "background-color: mediumslateblue">
46
<th>Color Name</th>
47
<th>Color RGB Value</th>
48
</tr>
49
</thead>
50
 2004 Prentice Hall, Inc.
All rights reserved.
51
<tbody>
52
<tr style = "background-color: lightsteelblue">
53
<td><span datafld = "ColorName"></span></td>
54
<td><span datafld = "ColorHexRGBValue"
style = "font-family: monospace"></span></td>
55
56
</tr>
57
</tbody>
Outline
sorting.html
(3 of 3)
58
59
</table>
60
61
</body>
62 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.7 Advanced Sorting and Filtering
• Filtering
– Selecting data that meets a specific criteria
– Combined with TDC provides powerful data rendering
 2004 Prentice Hall, Inc. All rights reserved.
1
@Title:String@|@Authors:String@|@Copyright:String@|
2
@Edition:String@|@Type:String@
3
@C How to Program@|@Deitel,Deitel@|@1992@|@1@|@BK@
4
@C How to Program@|@Deitel,Deitel@|@1994@|@2@|@BK@
5
@C++ How to Program@|@Deitel,Deitel@|@1994@|@1@|@BK@
6
@C++ How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@
7
@Java How to Program@|@Deitel,Deitel@|@1997@|@1@|@BK@
8
@Java How to Program@|@Deitel,Deitel@|@1998@|@2@|@BK@
9
@Java How to Program@|@Deitel,Deitel@|@2000@|@3@|@BK@
Outline
DBPublications.txt
(1 of 1)
10 @Visual Basic 6 How to Program@|@Deitel,Deitel,Nieto@|@1999@|
11 @1@|@BK@
12 @Internet and World Wide Web How to Program@|@Deitel,Deitel@|
13 @2000@|@1@|@BK@
14 @The Complete C++ Training Course@|@Deitel,Deitel@|@1996@|
15 @1@|@BKMMCD@
16 @The Complete C++ Training Course@|@Deitel,Deitel@|@1998@|
17 @2@|@BKMMCD@
18 @The Complete Java Training Course@|@Deitel,Deitel@|@1997@|
19 @1@|@BKMMCD@
20 @The Complete Java Training Course@|@Deitel,Deitel@|@1998@|
21 @2@|@BKMMCD@
22 @The Complete Java Training Course@|@Deitel,Deitel@|@2000@|
23 @3@|@BKMMCD@
24 @The Complete Visual Basic 6 Training Course@|
25 @Deitel,Deitel,Nieto@|@1999@|@1@|@BKMMCD@
26 @The Complete Internet and World Wide Web Programming Training
Course@|@Deitel,Deitel@|@2000@|@1@|@BKMMCD@
 2004 Prentice Hall, Inc.
All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
4
5
<!-- Fig 16.9: advancedsort.html -->
6
<!-- Sorting and filtering data
-->
advancesort.html
(1 of 7)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Data Binding - Sorting and Filtering</title>
11
12
<object id = "Publications"
13
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
14
<param name = "DataURL" value = "DBPublications.txt" />
15
<param name = "UseHeader" value = "TRUE" />
16
<param name = "TextQualifier" value = "@" />
17
<param name = "FieldDelim" value = "|" />
18
<param name = "Sort" value = "+Title" />
19
</object>
20
21
<style type = "text/css">
22
23
a
{ font-size: 9pt;
24
text-decoration: underline;
25
cursor: hand;
 2004 Prentice Hall, Inc.
All rights reserved.
color: blue }
26
27
28
caption { cursor: hand; }
Outline
29
30
span
{ cursor: hand; }
31
32
advancesort.html
(2 of 7)
</style>
33
34
<script type = "text/javascript">
35
<!--
36
var sortOrder;
37
38
function reSort( column, order )
39
{
40
if ( order )
sortOrder = "";
41
42
else
sortOrder = "-";
43
44
45
if ( event.ctrlKey ) {
46
Publications.Sort += "; " + sortOrder + column;
47
Publications.Reset();
48
}
49
else {
50
Publications.Sort = sortOrder + column;
 2004 Prentice Hall, Inc.
All rights reserved.
Publications.Reset();
51
}
52
Outline
53
spanSort.innerText = "Current sort: " +
54
Publications.Sort;
55
56
}
advancesort.html
(3 of 7)
57
58
function filter( filterText, filterColumn )
59
{
Publications.Filter = filterColumn + "=" +
60
filterText;
61
62
Publications.Reset();
63
spanFilter.innerText =
"Current filter: " + Publications.Filter;
64
65
}
66
67
function clearAll()
68
{
69
Publications.Sort = " ";
70
spanSort.innerText = "Current sort: None";
71
Publications.Filter = " ";
72
spanFilter.innerText = "Current filter: None";
73
Publications.Reset();
74
}
75
// -->
 2004 Prentice Hall, Inc.
All rights reserved.
76
77
</script>
</head>
Outline
78
79
<body>
80
<h1>Advanced Sorting</h1>
81
<p>Click the link next to a column head to sort by that
82
column. To sort by more than one column at a time, hold
83
down Ctrl while you click another sorting link. Click
84
any cell to filter by the data of that cell. To clear
85
filters and sorts, click the green caption bar.</p>
advancesort.html
(4 of 7)
86
87
<table datasrc = "#Publications" border = "1"
88
cellspacing = "0" cellpadding = "2" style =
89
"background-color: papayawhip;">
90
91
92
<caption style = "background-color: lightgreen;
padding: 5" onclick = "clearAll()">
93
<span id = "spanFilter" style = "font-weight: bold;
94
background-color: lavender">Current filter: None
95
</span>
96
97
98
<span id = "spanSort" style = "font-weight: bold;
background-color: khaki">Current sort: None</span>
</caption>
99
 2004 Prentice Hall, Inc.
All rights reserved.
100
<thead>
101
<tr>
102
103
<th>Title <br />
(<a onclick = "reSort( 'Title', true )">
Ascending</a>
104
105
<a onclick = "reSort( 'Title', false )">
advancesort.html
(5 of 7)
Descending</a>)
106
107
Outline
</th>
108
109
110
<th>Authors <br />
(<a onclick = "reSort( 'Authors', true )">
Ascending</a>
111
112
<a onclick = "reSort( 'Authors', false )">
Descending</a>)
113
114
</th>
115
116
117
<th>Copyright <br />
(<a onclick = "reSort( 'Copyright', true )">
Ascending</a>
118
119
<a onclick = "reSort( 'Copyright', false )">
Descending</a>)
120
121
</th>
122
 2004 Prentice Hall, Inc.
All rights reserved.
123
<th>Edition <br />
(<a onclick = "reSort( 'Edition', true )">
124
Ascending</a>
125
<a onclick = "reSort( 'Edition', false )">
126
Descending</a>)
127
128
Outline
</th>
advancesort.html
(6 of 7)
129
130
<th>Type <br />
(<a onclick = "reSort( 'Type', true )">
131
Ascending</a>
132
<a onclick = "reSort( 'Type', false )">
133
Descending</a>)
134
135
</th>
136
</tr>
137
</thead>
138
139
140
141
142
<tr>
<td><span datafld = "Title" onclick =
"filter( this.innerText, 'Title' )"></span>
</td>
143
144
145
146
<td><span datafld = "Authors" onclick =
"filter( this.innerText, 'Authors')"></span>
</td>
147
 2004 Prentice Hall, Inc.
All rights reserved.
<td><span datafld = "Copyright" onclick =
148
"filter( this.innerText, 'Copyright' )"></span>
149
</td>
150
Outline
151
<td><span datafld = "Edition" onclick =
152
"filter( this.innerText, 'Edition' )"></span>
153
advancesort.html
(7 of 7)
</td>
154
155
<td><span datafld = "Type" onclick =
156
"filter( this.innerText, 'Type' )"></span>
157
</td>
158
159
</tr>
160
161
162
</table>
163
164
</body>
165 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
 2004 Prentice Hall, Inc. All rights reserved.
16.8 Data Binding Elements
• Exactly how a data source is displayed by the
browser depends on the XHTML element to which
the data is bound
– Different elements may use the data for different purposes.
 2004 Prentice Hall, Inc. All rights reserved.
16.8 Data Binding Elements
Element
Bindable Property/Attribute
a
href
div
frame
iframe
img
input type
input type
input type
input type
input type
Contained text
href
href
src
value (button text)
checked (use a boolean value in the data)
value
value
checked (use a boolean value in the data)
=
=
=
=
=
"button"
"checkbox"
"hidden"
"password"
"radio"
input type = "text"
marquee
param
select
span
table
textarea
Fig. 16.10
value
Contained text
value
Selected option
Contained text
Cell elements (see Section 16.6)
Contained text (value)
XHTML elements that allow data binding.
 2004 Prentice Hall, Inc. All rights reserved.