56 Comments
- mrtwista, on 10/12/2007, -1/+18I prefer the ALA version of this:
http://www.alistapart.com/articles/prettyaccessibleforms - NoMoreNicksLeft, on 10/12/2007, -2/+16I agree. We could probably call it XHTML or something.
- Bogtha, on 10/12/2007, -0/+11> Opacity is a CSS3 function and isn't guarenteed to work on any browser yet.
Opacity is a property, not a function. It works in the latest Firefox, Mozilla, Opera, Safari, Konqueror and will even be in Internet Explorer 7. It is part of the CSS 3 Color module, which is at Candidate Recommendation stage, which means that for all intents and purposes, it's a finished spec.
Furthermore, since he's setting it to zero, it's exactly the same thing as setting visibility: hidden, which has been part of CSS from the very beginning and is supported in virtually every CSS user-agent, even Netscape 4 and Internet Explorer 4.
You are technically right when you say it isn't *guaranteed* to work, but that's only because *no CSS whatsoever* is guaranteed to work. Author stylesheets are merely suggestions - this is a fundamental design principle of CSS. - herkalees, on 10/12/2007, -0/+11Smarter web developers know to keep the styling of forms to a minimum. Plenty of studies show that a smoother and more enjoyable user experience is had overall by unstyled forms. Also, form controls are meant to be styled by the OS, not by the browser; although we all know the difference in form controls between Win IE and Win FF (for instance) is slight, due to each browser's default style sheet.
I personally give all my form controls a slight change, but I never take it too far, due to the above mentioned studies. - Chronic, on 10/12/2007, -9/+20nothing speacial... i speak for all web developers when i say, this is truely old news... I've been doing this for years.
- Lorian, on 10/12/2007, -3/+11Final result: http://www.picment.com/articles/css/funwithforms/step5.html
- JakeMcMahon, on 10/12/2007, -0/+8Stop spamming. Every comment you've made on digg is just like "Cool...shadowsun.net". Your website's ***** anyway.
- gooru, on 10/12/2007, -3/+11It looks awful in Safari. Clearly, the section "dealing with a few browser differences" doesn't apply to making it usable for Mac users.
As for Firefox, I think it looks really good. I don't know what you're talking about. - Yarnage, on 10/12/2007, -4/+10Opacity is a CSS3 function and isn't guarenteed to work on any browser yet.
No idea why anyone is digging your post. - inactive, on 10/12/2007, -2/+8Luckily only craploads of people use the Google toolbar. : )
- Chronic, on 10/12/2007, -1/+7advertising for your own site much?
- david76, on 10/12/2007, -0/+6What's the point of adding a class called "fieldset" to a fieldset tag? It's a lot easier to just use the tag name in CSS, e.g. fieldset { ... css ... } and fieldset input { ... css ... }
You can also eliminate the use of BR by setting display:block;.
Not exactly worth of being on the homepage. - MarcusE, on 10/12/2007, -0/+5Ick. Breaks horribly if you change the font size.
- NoMoreNicksLeft, on 10/12/2007, -0/+5Is it too much to ask that the examples are inline with the tutorial? Why the hell should I have to click links? Bah.
Besides, this isn't something we haven't seen a million times before. - catoutfit, on 10/12/2007, -11/+16digg this comment down or up if you think johnnybravoh is a ***** sucker.
- NoMoreNicksLeft, on 10/12/2007, -0/+4Yeh. And I'm starting to wonder if it couldn't be done with CSS proper, and not background images. The round corners on the fields, the drop shadows... aren't those part of the CSS 3 spec?
Or alternately, use SVG for the images (Safari will manage this first, Opera and FF to follow), so that they could stretch where appropriate. - herkalees, on 10/12/2007, -0/+4Sure; although these two links are related, one is backed up by the other, and I'm sure some of you know of the first guy:
Roger Johansson: http://www.456bereastreet.com/archive/200605/dont_customise_the_look_and_feel_of_form_fields/
Garrett Dimon: http://www.garrettdimon.com/archives/front-end-architecture-browsers - johnnybravoh, on 10/12/2007, -3/+6It's really a proof of concept. The point the article is trying to make and prove is that you can be very creative with the styling of your forms - allowing the designer/developer to break out of the hard edged, right angle cornered form elements that we've all become so accustomed to.
I'm not particularly fond of the article's end result but I'm certainly intrigued by the prospect of being able to style forms in unique and interesting ways. - NoMoreNicksLeft, on 10/12/2007, -0/+3>Furthermore, since he's setting it to zero, it's exactly the same thing as setting visibility: hidden, which has been part of CSS from the very beginning and is supported in virtually every CSS user-agent, even Netscape 4 and Internet Explorer 4.
Not quite true. A form set to visibility:hidden can't be clicked. Quirksmode's own file input CSS trickery uses opacity:0 to style that one form element.
Oh, and Konqueror as of 3.5.3 does not do opacity. According to the folks in #khtml/freenode, this won't happen until 4.0, and no one knows when that will even be available. - airmann90, on 10/12/2007, -1/+3Only problem in FIreFox is if you have AutoComplete on, and it highlights the form elements. This can be turned off, of course.
- bpapa, on 10/12/2007, -0/+2Personally I'm more for spending time on making website content better, not website look. I guess it's kinda neat for design junkies but personally it's not something I get amped over.
I do like an article showcasing good use of fieldset and legend though. - SafirulAlredha, on 10/12/2007, -0/+2<br class="br" />? LOL
- haochi, on 10/12/2007, -3/+4it's ugly when you have Google Toolbar on.
- NoMoreNicksLeft, on 10/12/2007, -0/+1Working on it. Both the down arrow and the :hover color for the options work, but I can't make it consistent across browsers yet. I've already done checkboxes and radiobuttons though...
- dude3609, on 10/12/2007, -8/+9johnnybravoh,
i think you speak for all web developers too. :/
considering I AM ONE.
i think the problem is though, is that there is a lack of tutorials on doing this. I remember doing this stuff litterly 5 years ago, and i know it goes way before that.
When a good tutorial comes up, everybody is like "woah sweet". lol
truth is though, this is already on a huge ammount of websites, so its nothing to get excited over because its nothing new. - mfearby, on 10/12/2007, -1/+2Until combo boxes may be styled using CSS there is practically no benefit in tarting up your forms. I don't see the point in going to extraordinary lengths in making a text field look like your wildest dreams when there is a need for a combo box, and there it is, a work of art with this.... thing... sticking out like a sore thumb. Apart from the above there is also the fact that an overly-styled form just pisses me right off. Leave well enough alone and stick to styling your DIVs, lists, and such. Leave input tags alone, I say!
- NoMoreNicksLeft, on 10/12/2007, -1/+2@idonthack
The elements would conflict? You mean, like you'd couldn't have a class for the styled elements? Uh... - 15charmaxwtf, on 10/12/2007, -1/+2http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
fixed link - babooo404, on 10/12/2007, -0/+0Something to consider... this tutorial on HTMLCenter offers a very simple way to stylize your forms but do it easily and not overwhelming. But what this does is reduce the HTML needed to nicely layout a form. Also, it explains the label field which is something not enough web developers are using.
http://www.htmlcenter.com/tutorials/tutorials.cfm/184/Usability/ - Zero456, on 10/12/2007, -3/+3Same here, looks great using Bon Echo.
- Zhay, on 10/12/2007, -3/+2It's ugly period.
- afx114, on 10/12/2007, -3/+2HTML form elements should match the native OS chrome so they look like Mac widgets on OSX, and Windows widgets on XP, etc.. Changing the display style from the user's native OS chrome causes confusion. Bad UI practices. Leave the form element rendering to the browser. No digg.
- lalindsey, on 10/12/2007, -4/+3Why are people digging this...?
- kasted, on 10/12/2007, -2/+1this is nothing new - no digg
- Bogtha, on 10/12/2007, -3/+2Neither of those links are to studies. The first link is just a blog entry pointing to the second link, and the second link is just a blog entry stating an opinion.
- pantuky, on 10/12/2007, -3/+2Yep final result looks bad. No score. If you're going to school people, you would do well to make them aware of some of the daily pitfalls immediately
- mehtajr, on 10/12/2007, -2/+1Bad advice... in particular, the use of the child (>) CSS hack-- that's all well and good until IE 7 is released. IE 7 WILL understand it, so all sites using those hacks will break. Conditional comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp) are the way to go to make things work in IE.
- dude3609, on 10/12/2007, -8/+7i dont think it looks like ***** in firefox although google toolbar's autofill option kind of messes it up.
- bpapa, on 10/12/2007, -3/+2Agreed. BRs are for losers, I think.
- detrate, on 10/12/2007, -3/+1I was just going to post that link. Good job sir.
- whoreman, on 10/12/2007, -3/+1Can you source these studies please
- herkalees, on 10/12/2007, -2/+0True, but the opinion of certain people is quite powerful. If a dentist told me that he thought my toothbrush should be changed, I'd believe him; he's a dentist.
- catoutfit, on 10/12/2007, -4/+1I'm my paedophile uncle told me you were a peadophile..I'd believe him.
- idonthack, on 10/12/2007, -3/+0Because it's done with CSS, and it would be a hassle to import all the stylesheets. The elements would conflict anyways. It was simply easier to do it this way, and it's not like it's hard for you to click a link. They did, however, provide a screenshot - so quit whining.
And I haven't seen it before. I thought it was a clever, gracefully-degradeable way of doing things and will probably implement it somewhere. - BooooooooB, on 10/12/2007, -5/+1That suggestion is just absurd, you might as well say that the background colour, and all font sizing and colouring should be determined by default OS values.
Causing confusion *is* bad UI practice, but a styled form is by no means necessarily a confusing one (and shouldn't be if you do it right), and leaving native widgets in the middle of a nicely styled design often looks unattractive. - dude3609, on 10/12/2007, -8/+3sorry, i meant to say Chronic. Not johnny.
- akkuma, on 10/12/2007, -10/+5The way I handled custom forms is to simply set opacity to 0 on inputs, position an image relative, move it over the transparent input and onclick I use javascript to change the image.
- inactive, on 10/12/2007, -7/+0So, your saying that
- haochi, on 10/12/2007, -9/+1Is there the word "google" in it?
- gukid, on 10/12/2007, -11/+1Something more standard needs to come out and replace html once and for all.
-
Show 51 - 54 of 54 discussions



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