No you are right its actually about 20% if you just take the form data itself as you should also have added fieldset and legend tags to your example. (595 characters for your method and 472 characters for my method excluding fieldset)
I find that lists just confuse things in forms when all you want is a line break and this is the perfect and valid time to use breaks. Indeed with css off my version is less confusing than yours with all the bullets showing up.
The consensus of expert opinion is that forms are not tabular data or simple lists although I think a fair case can be made for both so I’m not saying they are completely wrong. What I am saying is that my version is simpler, less code, easier to read and does the job perfectly even with automatic vertical alignment unlike the floated method. I just do not see a need to do it any other way. (In html5 they advocate using p tags to wrap form controls but a lot of purists are aghast at that solution).
Of course it does boil down to personal preference and a few extra characters is neither here nor there when you are happy with your chosen method and make it do what you want
But in any case, like I said, it was a starting point given the op has not posted what other content is on the page.
Yes, I didn’t mean to sound off-hand and your example was basically good.
I wouldn’t necessarily use a fieldset if there is only 1 set of radio buttons on the page.
Yes its debatable whether if there is only one set of items whether you need the fieldset but the fact remains that it is invalid to have form controls inside a form that are not inside a block element so if you have to add a block element then it may as well be a fieldset and associated legend and the benefits to accessibility that go with it.
The benefit of labels are well known and documented although there may be the odd case of a mis-click the benefits far outweigh the problems in every area and each visible form control (apart from buttons as they are self labelling) should have an associated label otherwise screenreaders will be very confused or have a hard time working out what the control is for.
I think you should associate the label with the form control so that it gives the user the ability to click the label (in most browsers).
I believe at the top of this thread - or maybe it was another - I was going to have an “Add-to-Cart” button next to each Date/Location. This would be similar to what a lot of E-commerce sites do, and seemed like a good approach since once they click one “Add-to-Cart” button they’d be whisked away to the next screen (i.e. Step #2: Register or Log-In) and so they couldn’t add multiple Event Dates/Locations.
I can see the benefits of each approach.
How would you handle this, Paul?
If you are using radio boxes then (usually) you only have one choice to make anyway so one button would seem enough.
If you have mutiple choices then you may want to use an add to cart button next to it and no radio or check boxes. However if you want to make sure the user looks down the whole list then you may want to use checkboxes with just one add to cart at the bottom. Most ecommerce site list the products and then have an add to cart button next to it. (It’s probably a discussion more suited to general usability rather than CSS though.)
To be honest the simpler you can make the process the better. I still get confused when buying things online as there seems to be no logic in the process.