HTML and CSS Reference
In-Depth Information
To Enter Code to Bind an XML Document with an HTML Web Page
To allow a user to search the XML document using the search function on this Web page, the XML document
chapter12-1products_solution.xml must be bound to the HTML Web page by first linking the XML document to
the HTML Web page and then binding the XML document with the HTML Web page. The following step enters
the code that links the XML document, chapter12-1products_solution.xml, with the HTML Web page.
1
•
With the
chapter12search-
items_solution.html
Notepad++ window
active, click line 3.
do not press
e n t e r
key
•
<xml
id="dsoInventory"
src="chapter12-
1products_
solution.xml">
</xml>
, but do not
press the
e n t e r
key,
to bind the XML
document with
the HTML code
(Figure 12-37).
Type
XML tag and attributes
to define data source and
associate with XML file
Figure 12-37
To Enter Code for the <input> and <button> Elements
The next step is to add the HTML <input> and <button> elements to create the input text box and Search and
Reset command buttons. The code for the <input> and <button> element is shown in Table 12-35.
Table 12-35 Code for <input> and <button> Elements with onKeyPress and onClick
Event Handlers
Line
Code
<input type=”text” id=”SearchText” size=”15” onKeyPress=”keyPressed()”/>
39
<button type="button" onClick=”findItem()”>Search</button>
40
<button type="button" onClick=”clearField()”>Reset</button></p>
41
Line 39 defines an <input> object. The type attribute defines the object as a text field. The id attribute names
the text box as SearchText, which becomes an object that the user-defined JavaScript function uses to access the input
characters. The size attribute sets the width of the text field to 15 characters. The onKeyPress event handler calls the
keyPressed() user-defined function every time a user presses a key. The keyPressed() user-defined function calls the
findItem() user-defined function if the
enter
key has been pressed.
Line 40 defines a button with a caption of Search. The onClick event handler calls the user-defined JavaScript
function findItem() if the user clicks the Search button. Line 41 defines a button with a caption of Reset. This button
is not a normal <form> Reset button and needs the onClick event handler that calls the user-defined JavaScript
function clearField() when the user clicks the button. This function clears the text field and the output area of any
listings or error messages.
