I’m trying to find the “best” way to mark up a form so it is accessible. The form includes radio buttons, select and checkboxes.
I know an ordered list used to be the way to go although I’m not sure that works well with radio buttons and checkboxes.
I have knocked up a page here. If anyone has any suggestions…
That looks pretty good to me and I would have done something similar.
I never bought into the idea that form elements are a list and in most cases it just complicates the html when it doesn’t need to be. I could see the need perhaps for a list for a load of check or radio boxes but not for normal inputs and selects.
Using a break in forms is one of the valid uses for them but of course you don’t need them when a block element follows.
If, however you are making a more complicated form with error checking and error messages then it becomes useful to wrap every pair (label and input) in a div so that you can add an error class to the div to change the colour of the label and input and perhaps show a hidden message by simply adding one class.
Thanks for that Paul. I can now look at styling it. I guess wrapping each field in a div might also help in styling - making a block element that can have padding and margins?
Yes it makes it easier to lay out consistently when you have a wrapper on each pair. Don’t be afraid of extra mark up when it makes life easier and makes things simpler to make work and understand,
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.