I ?¬‚ oat this div left to make it enclose the controls and their labels,
which I also ?¬‚ oat (highlighted). By setting the width of these labels
to be small enough to leave room for the little radio buttons and
checkboxes, the labels ?¬‚ oat up beside them, and align nicely.
Remember the example in Chapter 4 where the ?¬‚ oated text block
next to the ?¬‚ oated image formed a column? That??™s exactly what happens
here. If the label on an individual checkbox wraps to a second
line, it perfectly aligns itself with the start of the line above, and all
the following elements move down to make room for it.
Finally, I want to get the Submit button to sit to the right, where
I believe it logically always belongs. I target just the Submit button
input, (see ?¬‚ oat:right; highlighted above) and not all the
other types of inputs in the form, by using an attribute selector,
which de?¬? nes that the type of the input must be submit. Of course,
IDWIMIE6, in IE6 it??™s going to be on the left, but no biggie; I just
think it is better usability to have it on the right.
And that??™s it. Forms are actually quite a lot of work as there are lots
of important XHTML attributes that you need to get right for each
control. However, the markup and styles here can help to speed
things up. When you want to lay out forms for your own projects,
by following the format of this markup (actually, by just cutting and
pasting the appropriate formsection divs from the downloadable
example), you can create the sequence of controls you need.
Pages:
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240