HTML and CSS Reference
In-Depth Information
making it nearly impossible for them to submit the form. You wouldn't want to turn away thousands of
paying customers simply because they can't see your “Buy Now” button, would you?
When your visitor uses a mouse (or other pointing device) to click an image control, the precise location of
that click is included in the data set as X and Y coordinates (with the control identified by its
name
attribute,
if present). A script or form handler can use this information to determine exactly which part of the button
was clicked and thus treat an image control like an image map (which you learned about in Chapter 6),
with different regions of the button triggering different actions. However, since this requires the button to be
clicked by a pointing device, people using their keyboard to submit the form will be at a disadvantage. It's
usually best to use separate, distinct submit or image controls to trigger those different actions rather than
a single image button.
You can see the markup for an image control in Listing 8-14 and the rendered result in Figure 8-17. Like
the
img
element, the
width
and
height
attributes are optional here but it's usually best to include the
dimensions.
Listing 8-14
. An image input offers more decorative choices than a standard submit button
<input type="image" src="images/order-button.png" alt="Place Your Order!"
width="320" height="70">
Figure 8-17
. An image control inserts a graphical button that might be more (or sometimes less) attractive than the
native buttons.
input type="hidden"
As you might have guessed, a hidden input isn't displayed on the rendered page. It exists simply as a
vehicle to pass along extra data with the submitted form that a user doesn't need to see or modify—such
as an order number or internal tracking ID—via the element's
value
attribute.
More Form Controls
As multitalented as the
input
element is with its wide variety of types—including all the fancy new ones
introduced in HTML5—it's not the only way to enter and submit data in a web form. In this section we'll
round out the collection of form controls with selection menus, blocks of text, and more versatile buttons.
select
The
select
element creates a selection control—a menu of options from which to choose. The control
may be displayed either as a single line that can “drop down” and expand to show all the options or it may
occupy multiple lines as specified by the optional
size
attribute (the size defaults to
1
if the attribute is
missing). Each option in the
select
element is wrapped in its own
option
element, and we'll get to that
momentarily.
