HTML and CSS Reference
In-Depth Information
The following step enters the code for the <input> and <button> elements to the Web page.
1
•
Click line 39.
•
Table 12-35 on the
previous page. Do
not press the
e n t e r
key after line 41
(Figure 12-38).
Enter the code in
id defines text
field box for use as
JavaScript object
onKeyPress event
handler called to test
if
e n t e r
key pressed
defines button
captions
do not press
e n t e r
key
Figure 12-38
To Enter an HTML <div> Tag Container
The next step is to add the <div> tag container to define an output area of the Web page where search results
will appear. Recall from Chapter 9 the use of the <div> tag container and the innerHTML property. To create the
dynamic output area for the search results, the <div> tag uses the id attribute and value, SearchResult, to indicate
that search results will be displayed in that area. The JavaScript user-defined function uses that id value to assign the
search results to the output area of the Web page. An inline style attribute sets the left margin at a relative distance
of 10% of the screen width, so the results are aligned with the input text field. The following step enters the <div>
element to define the output area of the Web page.
1
•
Click line 46.
•
<div
id=“SearchResult”
style=“margin-
left:10%”>
and press
the
e n t e r
key.
Type
<div> container
displays search results;
SearchResult id used in
user-defined function
•
</div>
and do not
press the
e n t e r
key
(Figure 12-39).
Why is the margin-left
set to 10% and not a
specific number of pixels?
By using a percent value, the left margin will always be 10% from the left regardless of the screen resolution. If it was
set to a specific number of pixels, it might look too small or too large at different resolutions.
On line 47, type
do not press
e n t e r
key
Figure 12-39
