HTML and CSS Reference
In-Depth Information
elements will change. Even in the same browser, the appearances may
differ between Windows, Mac OS X, Linux, and mobile devices.
Figure 11.1
shows the difference in appearance of a
select
elements on three differ-
ent devices.
Figure 11.1
Interaction with
select
element in Safari/Apple iPhone iOS4, Safari/Apple
iPad iOS3, and IE 8/Windows XP ( from left to right).
You can find additional examples of CSS applied to form elements in
different browsers and operating systems at Christopher Schmitt's
meticulously collected and indexed collection of screenshots at
http://
Something else that can be unique to form layouts is the need to juggle
the myriad of positioning and placement and states of the elements of
the form. Large fields, small fields, sets of fields, labels, and help or error
messages all need to be placed so that it is clear to the visitor what is
being requested from them. The grid that works for a standard-length
text input along with its label may not work for a collection of radio
buttons or a combination of inputs such as parts of a phone number or
city and state.
