6

Consider this HTML form:

enter image description here

The checkbox in the form is really a pain in the ..., because no matter what you do, it can't be aligned in a good visual form with the rest controls of the form. For example, here are two other possible layouts:

enter image description here

and

enter image description here

Them main reason is that, the checkbox label should appear on the opposite side. Even putting it in the correct side doesn't solve the visual non-harmonic layout.

My question is, what are the best practices for checkboxes on the web. Should I replace it with a 2-itemed HTML select control?

Improve this question
2
  • Put a submit button after you check box to maintain the look i dont know what they will do after knowing whether i am married or i am single??? its completely waste.......
    – Jack
    Aug 23, 2011 at 9:20
  • @Philip, why did you close this question? What I asked was about the concept of layout which falls directly with what this site is all about. Layout is one of the fundamental concepts of graphic design.
    – Saeed Neamati
    Aug 23, 2011 at 9:28

2 Answers 2

Reset to default
10

form labels should be consistent.

here's one of many solutions (I've used radio buttons which amounts to the same thing as one checkbox, but you could stick with the checkbox)

form

or you could top align:

form

edit to add:

http://www.slideshare.net/lukew/web-form-design-best-practices

good advice on form alignments....

Improve this answer
4

One of the most useful ways to align elements on a page (I've found it so, at least), is to use tables. It's pretty simple to sort things nicely into rows and columns, and hide all the borders so that to the user it looks like everything is just lined up nicely. An additionaly benefit is variably sized cells. If something needs more space, give it more space. If a checkbox needs to be all the way to the side, set the td width to something like 5 or 10 % (depending on the size of the row). Some really nice layouts can be constructed this way.

Improve this answer
5
  • 3
    Thanks @Jim. However, I think in future, CSS Grid Layout would replace the table (as it's style-based layout instead of markup-based layout)
    – Saeed Neamati
    Aug 23, 2011 at 13:03
  • 1
    Tables aren't a good choice for web layout. They're difficult to edit, difficult to update across multiple pages simultaneously and aren't accessible.
    – Jimmy Breck-McKye
    Aug 23, 2011 at 13:03
  • @Jimmy "difficult to edit" is kind of subjective - I've always found them fairly easy to deal with, although I must agree that updating across multiple pages simultaneously would be a pain. What do you mean when you say they aren't accessible?
    – yoozer8
    Aug 23, 2011 at 15:54
  • 2
    Okay, I need to explain two points: One: they're difficult to edit because they create a messy HTML page with massive numbers of cell, table and row tags, all over the place. HTML tables are difficult enough to navigate at source level when they contain real data - never mind other divs, forms and paras. Two: they're not 'accessible' insofar as screen readers and browse-aloud tools have a lot of trouble parsing them effectively. They assume that tables are actual data tables, and that makes the end result quite confusing for those users.
    – Jimmy Breck-McKye
    Aug 23, 2011 at 16:30
  • Dear sweet baby Jesus do NOT listen to anyone who tells you "tables are not accessible." If that was even REMOTELY the case then do you honestly think screen readers would have EVER caught on in the visually impaired community? Screen readers DO/CAN read tables a little differently if the user instructs them to do so. They'll do things like repeat the column headers and such. But other than that, readers will read out the content in the order in the source order, which will be fine. Just make sure you use proper labels.
    – Graham
    Aug 31, 2011 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.