- This topic is empty.
July 15, 2010 at 2:28 am #29633zarathustraMember
I’m on an multi-lingual open-source project and one of my tasks is ripping out all the old table-based form markup and getting it semantic and accessible. Naturally I’ve gone down the label route, and I left aligned them – But there’s the problem. If I left align the labels I have to set a width (right?) Of course this is all easy if I know what the content of the label is going to be! However the labels are dynamically generated, and could also be well…german (gulp!)
I set them at about 200px, which is way to wide for the English and sensible labels I made, but what happens when the user make silly great long labels (and you know they will!)
Any suggestions? Some of these forms are going to be very long and not ideally suited to top-label placement, it would be ideal to do this with tables and percentages actually!
Please stop me going back to tables!
Cheers.July 15, 2010 at 8:32 am #79823HeatherFeimsterMember
Sounds like you have quite the project!
For design sensibility, I always find that tables are still a go-to for two things: forms and email newsletters. I’m sure some others on here will disagree with me, but forms (especially dynamically generated) look best with a grid-like, common structure. And I think it makes them more user friendly. Just try to keep all your CSS in the linked files though – adding inline styling via table elements is a recipe for design frustration down the line.
Just my opinion – anyone else have a good solution?July 15, 2010 at 9:13 am #79822Rob MacKayParticipant
Yes I agree with heather – if the form is small, maybe a little contact form – you can get away with using labels etc – but once you start getting larger tables are the best way to hold them together.
There is nothing wrong with tables, if you use them for the correct purpose.July 15, 2010 at 12:39 pm #79845zarathustraMember
I hear you guys, and thanks for the response, I must say I am a little shocked. I certainly agree there’s a "place for tables" but I thought we’d all decided that place was for "tabular data", which a form is definitely NOT?
This markup will be peer reviewed and in circulation for some time! I am anxious to get it as semantic and accessible as possible. I also want to add tabindex etc down the line.
I was currently going with this markup (dynamically generated and a lot longer than this!)
<li><label for "first_name">First name<span class="Required">*</span></label><input type="text" id="first_name"/></li>
<li><label for "last_name">Last name</label><input type="text" id="last_name"/></li>
There really is no reliable way to style that and make the labels stretch without resorting to tables?
- The forum ‘CSS’ is closed to new topics and replies.