As promised in a previous blog post here, Horizontally aligned elements in forms, i’ve tried to work out a way to reproduce the registration form at http://www.squarespace.com/join/ in a semantically correct way with fieldsets, legends, labels and some CSS styling. This is what i’ve come up with : http://www.skyrocket.be/lab/semantic_horizontal_form.html
I’ve rewritten the XHTML in a semantic way and positioned the form elements next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable) I’ve added a conditional comment to fix a padding error in IE but without this the form would still be legible and fully usable, it’s just a small cosmetic adjustment.
I’ve already received some emails from Kevin at el73.be who’s been working on another method which depends less on em widths. Wonder how he’s been coming along on this. Kevin?
Update: Some minor bugs fixed with field labels. Thanks Dan and Michael.
Update 2: Fixed questionable semantics by adding and hiding correct legend text, thanks Adam and Joe.
Added error messages as requested by A. Casalena
Like I said: it’s a great way of achieving the desired layout. And it’s semantically correct! I’d like to see something without the need to specify the height though. I’m gonna give that another go.
Great job! There’s some beautiful code behind this form. At the risk of nitpicking, the labels for the password and email inputs are incorrect. Other than that, great job!
Nice one.
I would however suggest less cryptic legend-text
1. 2. 3. is enough for sighted people but with screenreaders I would suggest:
Step 1. Step 2. Step 3.
Just add a span and use CSS to prevent ‘Step’ from being visible.
Nice work! A really semantic code. Congratulations.
Very cool
Are we allowed to borrow this? 
Also — how do the elements stretch if you introduce errors? On the Squarespace site, we highlight the block and expand it a bit with an error message if there is one.
It’s not only semantic, it’s also eye-catching Nice work ‘neighbor’
Semantic horizontal Forms
Chris heeft zich moeite gedaan om een mooie en semantisch correct invulformulier te maken.
Allee, hij heeft er één van het net geplukt en beter en juister gemaakt.
In mijn ogen (maar wie ben ik?) is dit het gebruiksvriendelijkste en mooiste invulf…
Dan Mall:
Oops, thanks for noticing. It’s been noted and will be taken care of.
A. Casalena:
Ofcourse, you are free to re-use and ab-use the code as you see fit and implement it in your website. I’ll take a look at the implementation of error messages. The form is fully zoomable (hit CTRL and + in firefox to see the effect) so i don’t see why the error messages wouldn’t work.
Gerben:
I only reproduced the form as i found it on Squarespace’s website, but it’s a good idea. I’ll add the code together with the error update A. Casalena suggested.
The rest:
Thanks
I think you’re a bit off with the semantics. The legend tag should be a descriptor of the elements it contains, so it’s not “1″, it’s “Pick a login name”.
Still not quite valid, but Dan has already pointed that out. Other than that, very nice!
the lables are not working correctly on FF
Michael:
Dan already pointed that out in #2, i’ve fixed it.
Adam & Joe
Thanks for pointing that out, i did state that i was reproducing the form like it appeared on the Squarespace website, i didn’t say it was semantically perfect. Just a better solution that putting a bunch of divs behind eachother. It might be interesting to combine your comments with gerben’s in #3. Noted that, thanks!
[...] Gisteren kwam Chris op de proppen met zijn methode om horizontale forms semantisch voor te stellen. Knap werk. Het enige "probleem" dat ik er mee heb is dat je een vaste hoogte moet opgeven voor de parent elements. Chris heeft in ieder geval het wijze besluit genomen om dit met behulp van de relatieve em eenheid zodat de hoogte meeschaalt met de grootte van het lettertype. Maar ik wil het iets anders doen. [...]
Very nice man, your article even got a post on cssbeauty.com
http://www.cssbeauty.com/archi...../index.php
Very nice indeed.
wow this is great a munst use
[...] Tovább [...]
I would add cursor:pointer to the labels and inputs to show that users can click here.
[...] Chris heeft voor een mooi voorbeeld gezorgd met zijn semantische horizontale formulieren. De moeite waard om te bekijken! [...]
[...] Réaliser un formulaire horizontal valide CSS et compagnie [...]
[...] El resto: un ‘hack’ sobre flujo de cajas, formularios horizontales y sem?nticos y una combinaci?n de “wicked look” con un “layout l?quido”. [...]
Technically not a one-step signup if there are three steps to it.
[...] http://www.skyrocket.be/2006/0.....tal-forms/ [...]
[...] Semantic horizontal Forms [...]
[...] Chris heeft voor een mooi voorbeeld gezorgd met zijn semantische horizontale formulieren. De moeite waard om te bekijken! Bookmark:Deze icoontjes linken naar social bookmarking sites waar lezers links kunnen delen en nieuwe sites kunnen ontdekken. [...]
[...] Semantic Horizontal Forms [...]
[...] Sky Rocket – Semantic Horizontal forms [...]
[...] Sky Rocket – Semantic Horizontal forms [...]
[...] Sky Rocket – Semantic Horizontal forms [...]
[...] Sky Rocket – Semantic Horizontal forms [...]
[...] Sky Rocket – Semantic Horizontal forms [...]
[...] ..vezi site [...]
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
Thanks for the article!
Just one question, can you give me an explanation of how can you make it work without floating #theform to the left? Because all the fieldset are set to float:left, and if I don’t float #theform as well, I won’t be able to wrap the fieldset. What I’m doing wrong?
Thanks.
[...] Semantic Horizontal Forms [...]
[...] http://www.skyrocket.be/2006/0.....tal-forms/ [...]
[...] http://www.skyrocket.be/ [...]
[...] Semantic Horizontal Forms [...]
[...] 表å•è®¾è®¡ CSSé£Žæ ¼çš„è¡¨å• æ¨ªå‘è¯ä¹‰è¡¨å• 修改表å•å—段 [...]
[...] Semantic horizontal Forms [...]
[...] un post di Chris Ramakers sul suo blog che riscriveva semanticamente la form di iscrizione di squarespace [...]
[...] in CSS, Picment: Fun with forms – customized input elements, Mezzoblu zu Labeling Formfield, Chris Ramakers, skyrocket concepts: semantisch korrekte horizontale Formulare step 1 – 2 – 3, Malarkey: optionale Formularbereiche ausblenden, Brand spanking New: AutoSuggest: An Ajax [...]
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
[...] 4. Semantic Horizontal Forms [...]
[...] Semantic horizontal Forms [...]
Will use it on my site for sure, nice.
Actually New link https://www.squarespace.com/signup/
[...] Semnatic horizontal Forms [...]
Very nice work – gives me many ideas to think about – thanks.
First of all, thanks for sharing this with the rest of the world. Looks really great!
At the risk of sounding redundant or ungrateful (which I’m not), I found that the “repeat e-mail address” field is all messed up in Firefox.
Example screen capture
Again, thanks for sharing this!
[...] 1. Semantic Horizontal Form [...]
[...] Semantic Horizontal Forms [...]
[...] Skyrocket.be » Semantic horizontal Forms (tags: CSS webdesign forms) [...]
[...] Semantic Horizontal Forms [...]
[...] Form Assembly – Form Layouts CSS Styling of forms, Stu Nicholls Semantic Horizontal Forms Trimming form fields Badboy Niceforms Functional Pretty Forms CSS-Only, Table-less [...]
[...] 1. Semantic Horizontal Form [...]
[...] Semantic Horizontal Forms [...]
[...] 32. Semantic horizontal Forms [...]
First off: This is great, thank you!
Just one question though: Can you tell me how to fix the Firefox issue? I’m using firefox 2.0.0.16, and I’m getting the same problem as WebGvyer. See screenshot:
http://usera.imagecave.com/web.....l_form.gif
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
[...] Formularios semánticos horizontales [...]
Great example, thanks.
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
[...] Semantic Horizontal Forms [...]
[...] Semantic horizontal Forms [...]
GREATE DESIGN
[...] Semantic Horizontal Forms [...]
[...] Semantic horizontal Forms: [...]
I am having a peculiar problem with the form that i am writing. It has two form elements horizontally placed using CSS. While two text elements align beautifully in both IE & Firefox, when i try to align the select and text together then wrap below. What can be the problem? any ideas to solve this?
[...] Semantic Horizontal Forms [...]
[...] 10. Semantic horizontal Forms [...]
[...] 10. Semantic horizontal Forms [...]
really well done!
Great article, it is hard to find something like this, hugs …
Doesn’t seem to format properly in FireFox 3.0.15.
[...] Here’s where I got the CSS stylesheet from. [...]
nice!
its a great design and good CSS thanx.
[...] Semantic Horizontal Forms [...]
[...] Fixed questionable semantics by adding and hiding correct legend text, thanks Adam and Joe. Added error messages as requested by A. Casalena Demo: http://www.skyrocket.be/lab/se....._form.html Source: http://www.skyrocket.be/2006/0.....tal-forms/ [...]
[...] 10. Semantic horizontal Forms [...]
[...] 10. Semantic horizontal Forms [...]
Thanks mate. Appreciated your design!
[...] Semantic Horizontal Forms [...]
[...] 10. Semantic horizontal Forms [...]
[...] Semantic Horizontal Form This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable) [...]
[...] 8. Semantic horizontal form [...]