36 Comments
- burke, on 10/12/2007, -1/+10While I do agree for the most part, I think that as long as your form looks sufficiently form-like, it doesn't kill usability, but makes the design much, much better.
- rayishu, on 10/12/2007, -4/+11Even if so whats the worst that can happen? the browser will drop the declartion and it wont be styled
- burke, on 10/12/2007, -1/+8You really have to watch out for browser compatibility with a lot of these. Opera and Safari are particularly bad at styling forms, IIRC. Just make sure to thoroughly test before you use any of them.
- Xilon, on 10/12/2007, -2/+6Meh, it uses JS... not really CSS based since it REQUIRES the Javascript for al lthe dives to wrap around the actual elements in order to show the nice rounded images etc.
- ElMoselYEE, on 10/12/2007, -0/+4also another thing to note is definitely usability. when you create your own rendition of a drop-down or a check box, you severely risk losing functionality. will the user click the down arrow, or the form field area? will he tab into the field, or click? is he using a screen-reader? or maybe this 56k user is just impatient and starts to fill out fields before the vital images load, or possibly someone has images disabled all-together. when you start creating your own user-input methods, you're stooping to the level of flash, and you risk ruining not only usability and accessibility, but the speed of the page as well.
- lemz, on 10/12/2007, -0/+4Good thing you never get to hire anyone because this is exactly what I charge an hour rate for :)
And trust me, people are willing to pay once I show them what the same page looks like on the screen, print and mobile.
I would welcome you to the real world, but I'm afraid we don't want you here. - two2twelve, on 10/12/2007, -0/+2Very nice indeed, quite useful things in there, especially that prototype validation stuff, definitely going to come in handy. Well done!
- vh1`, on 10/12/2007, -1/+3I really don't understand your problem. using CSS to float labels to the left and giving them a width works just fine, and you don't need all those extra TR and TD tags
- kepeli999, on 10/12/2007, -0/+2Speaking strictly from a visual standpoint, yes, customer are willing to pay extra to get the "look and feel" that they want. I may not agree with it, but I'll take their money any day.
- burke, on 10/12/2007, -0/+2May I suggest it's not CSS that's abysmal, but rather... oh, nevermind.
Forms aren't fun though, it's true. - cianuro, on 10/12/2007, -1/+3Some really nice stuff there.
Burke, you're right about the compatibility there, but with a little tweaking.... - Eleo, on 10/12/2007, -0/+1No, you can go ahead and say whatever you want to. I think CSS is very much flawed and wish it were either enhanced or completely replaced by something different. Bottom line is that it causes a great amount of stress and frustration. Browser compatibility is part of but not all of the struggle. The fact that you have to fight with various aspects of your layout and wait for expert CSS coders to come up with valid solutions to simple problems like "how do I make my forms not look like *****?" is just an example of how aggravating CSS can be. I think it is a great idea with a mediocre implementation.
You can dig me down now, but I'm fairly sure that within the near future, a new standard will come into existence, or CSS will be modified so that it doesn't suck so bad. - burke, on 10/12/2007, -0/+1On second thought, I do agree completely. CSS is better than tables (ugh...), but still an extremely flawed standard. You're right -- it shouldn't take anywhere near as much effort as it does to make things work properly.
- quetivity, on 10/17/2007, -0/+1Very nice work, simple and practical. http://www.netfreez.com/lubix
- jaredvolkl, on 10/12/2007, -0/+1Good resource for ideas. I was working on styling some forms not too long ago for work and a few of these sites I had already used before.
- Troem, on 10/12/2007, -0/+1http://www.drweb.de/weblog/weblog/?p=708
stolen content!
it was posted on november 7th, 2006 at the german blog "dr. web" - burke, on 10/12/2007, -0/+1I guarantee my webpages all:
1) Perform the same function
2) Perform more consitently
3) Perform on any mobile device
4) Render faster
...I use HTML 3.0 with my entire page content wrapped in one single tag.
There's a tradeoff somewhere along the line, and what it comes down to is that you ALWAYS sacrifice some small percentage of your potential users with each design improvement. I'm not saying anyone should run out and start coding pages in pure XML with SVG graphics and custom , but I'm also definitely not suggesting anyone design in plaintext.
Styled forms are an evolution of web design. Sooner or later all browsers will support them (as does 95%+ of the current market -- hint, hint...), just like CSS.... or the tag. - Matt2k, on 10/12/2007, -2/+3> I would welcome you to the real world, but I'm afraid we don't want you here.
I guarantee my web forms
1) Perform the same function
2) Perform more consitently
3) Perform on any mobile device
4) Render faster
So tell me again the benefit to "semantically" marking up a registration form? You're solving problems THAT DO NOT EXIST - dDuk, on 10/12/2007, -0/+1@ lemz: The article is dated November 11th, 2006 and I haven't seen this particular collection before. That aside this collection is impressive, the designs are very slick however as some have pointed out accessibility and browser compatibility come well before design, accessibility in particular. I'm gonna try out a few of these and see if they are up to scratch, could be they only need a few tweaks or hacks.
- burke, on 10/12/2007, -2/+3Well, I just tried the one from BadBoy Media in Opera, and nothing happens when I click the radio buttons or checkboxes; they stay in the unactivated state -- but they *are* nicely styled. Unfortunately, I don't think that's a usability feature that can be given up ;)
- zidesigns, on 10/12/2007, -0/+0Very nice, thanks for summing them up in one place.
regards. - hkarthik, on 10/12/2007, -1/+1Good looking stuff. However most web apps require forms with 2 or 3 columns of adjacent textboxes. Very few of the good web 2.0 style designs meet those needs.
- Eleo, on 10/12/2007, -4/+2My solution is to give up and use tables when it comes to forms.
I've recently concluded that CSS is abysmal and hope that it one day gets replaced by something better. - kalmi, on 10/12/2007, -4/+2@burke:
Radio buttons or checkboxes on that page isn't doing anything for me under linux with FF2.0. So it isn't just Opera. - Aurorius, on 10/12/2007, -4/+2Err.. there are people who got confused with these gorgeous looking forms ?
- ajr2006, on 10/12/2007, -4/+2yeah, huh? forms... not forums
- MadCowDzz, on 10/12/2007, -4/+1Hello, dead horse? This is me, a beating....
- inactive, on 10/12/2007, -3/+0http://My-Space-Black-Layout.Layouts.myspace.msoly.com My Space Black Layout http://Lime-Green-And-Purple-Star-Profiles-For-Myspace.Codes.myspace.msoly.com Lime Green And Purple Star Profiles For Myspace http://Music-Video-Code.Codes.myspace.msoly.com Music Video Code http://Myspace-Baby-Phat-Layout.Layouts.myspace.msoly.com Myspace Baby Phat Layout http://-New-Baby-Myspace-Graphics-Codes.Graphics.myspace.msoly.com New Baby Myspace Graphics Codes
http://Extremely-Mini-Layouts-For-Myspace.Layouts.myspace.msoly.com Extremely Mini Layouts For Myspace http://Goth-Whoring-Codes.Codes.myspace.msoly.com Goth Whoring Codes http://Tmac-Myspace-Banners.Codes.myspace.msoly.com Tmac Myspace Banners http://Afl-Layout-Myspace.Layouts.myspace.msoly.com Afl Layout Myspace http://Custom-Made-Myspace-Backgrounds.Backgrounds.myspace.msoly.com Custom Made Myspace Backgrounds http://Law-And-Order-Myspace-Layout.Layouts.myspace.msoly.com Law And Order Myspace Layout http://Music-Comment-Myspace-Graphic-Dance.Graphics.myspace.msoly.com Music Comment Myspace Graphic Dance http://Cool-Custom-Comments-Boxes.Comments.myspace.msoly.com Cool Custom Comments Boxes http://Dirk-Nowitzki-Myspace-Layouts.Layouts.myspace.msoly.com Dirk Nowitzki Myspace Layouts http://Make-Your-Own-Myspace-Layout-With-Words.Layouts.myspace.msoly.com Make Your Own Myspace Layout With Words - lemz, on 10/12/2007, -4/+1So i'm a little bit lost here... is digg "social news" or "social links"? This article isn't news, I read it almost 6 months ago.
- Matt2k, on 10/12/2007, -5/+2Are you kidding me?
> laying out forms where the form label and input are horizontally adjacent [...]. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.
So instead, we do the next logical thing. Reconstruct a dead simple 3 minute HTML 2.0 page into 20 kilobytes of CSS and Javascript hacks. Bravo! The web salutes you, ye intrepid leaders of Web 2.0!
Look, if I was hiring a web developer, and they charged me an hourly rate to whip up this hokey-dokey *****, I would be seriously PISSED OFF. - burke, on 10/12/2007, -5/+1huh?
- drilldown, on 10/12/2007, -7/+1Nothing works!! OH, wait a sec, I run a script blocker due to all those unscrupulous people who like to hijack PCs while looking very pretty doing something else with the other hand.
Very nice scripts, I'm sure. Just not on my list of trusted sites. - vh1`, on 10/12/2007, -11/+3hmm?
compared to firefox, I've always found safari and opera to do a better job of styling forms. forms stick out like a sore thumb in firefox for linux - Mysticcal, on 10/12/2007, -16/+1I'm not sure... basicly it just looks like a news ticker where anyone can post.... meh, i'll stick to php forums for now.


What is Digg?
Browsing Digg on your phone just got easier with our enhancements to the