Slashdot Mirror
Check Boxes and Radio Buttons Conquered by DHTML
Philip Howard writes "Pretty much every form element has been conquered by CSS so far, letting us create stylish, integrated forms to tie in closely with our site designs for that UI polish graphics artists love to have.
Radio Buttons and Check Boxes, however, have resisted most attempts to style them consistently, accessibly and elegantly- perhaps because nobody cares enough to come up with the solution.
However, these elusive form elements have finally been conquered with a simple combination of CSS and Javascript and a little HTML wrapper.
The solution is easy and quick to implement, is accessible (working with tab and space) and elegantly degrades where CSS and/or XHTML is not available."
His solution is very similar to what mine would be. I'd just walk the DOM looking for checkboxes, then replace them with some inline element creation code. His solution is to get a list of all links, then find any with a special class. He then goes on to replace the contents of the links via the innerHTML property. Clunky, but it does work.
To the author: You can achieve your goal much more easily by attaching the className to the checkbox directly. Use getElementsByTagName to get a list of INPUT tags, then loop through those. When you find one you want to replace, use the function to build the replacement tag on the fly. You can then use to swap out the tags in a hurry.
Oh, and using an anchor tag for event handling is very 1990's. Try doing something like this instead:Note that you don't actually need the "StyledCheckbox" name, because you would be passing the actual element through to the event handler.
Good luck on your work.
Javascript + Nintendo DSi = DSiCade
Will Lynx render them correctly with ascii-art?
"A door is what a dog is perpetually on the wrong side of" - Ogden Nash
This occupation won't stand! You may think you can apply your western styles upon us by force, but history will prove you wrong.
[ ] This is a good idea
[ ] This is a kludge
[ ] I didn't read TFA, but I like clicking boxes anyway
Is it a good thing to have controls that deviate from the standard so much that they aren't even recognizable anyore, like the green/grey round toggle button that replaces the checkbox on the sample page? Why disguise standard controls so the user will have to spend some time trying to find out what the standard controls are "hidden as"?
Don't blame Durga. I voted for Centauri.
I just hope the marketing people that work in my company aren't reading Slashdot today.
Otherwise, I'll be making fancy checkboxes for the next 2 months.
Damn you, Slashdot.
I'm a big tall mofo.
The examples look very nice. I still think the bigger problem is that web applications have absolutely no UI consistency between them, though. On one web site, select-boxes cause a form to be immediately submitted when a selection is made; on others, you have to click "Go." On one web site, check boxes look like boxes with check marks; on another they look like stars; on another they look like glowing orbs (not very colorblind-friendly).
This is the sort of thinking that leads to such UI atrocities as Winamp, iTunes for Windows, and Firefox for Mac OS X: all three of these ignore most of the native widget drawing capability in the name of creating a pointlessly slick, cross-OS-consistent experience.
I for one welcome the arrival of XAML and XUL: ways to describe forms that every OS will render using its own navigation and widget capabilities. It'll be as awesome as the time Java solved that problem for everyone everywhere.
For more information, click here.
granted i'm not exactly running the latest hardware, but every click on a radio button seemed to illicit a lot of blinking and flashing on the part of the other buttons. maybe it's just javascript running slowly as the DIVs move around or something, but i prefer to think of it as simple jealous from the other buttons in that group. "click me instead!" "no me!"
in any case, i'm all for flashy design, but this seems to be more trouble and more cumbersome than it's worth, unless that javascript can be optimized to not be so slow.
i could live a little longer in this prison
I would prefer to have normally and familiar elements that i can tab through than fancy graphics that don't work as expected.
Hey, here's a question-- Why do we [i]need[/i] styled checkboxes? I hear those words and I just get this mental image of style kicking contents in the nads over and over and over.
Not to mention - but it seems nobody really cares about this, and apparently bringing the subject up always generates a deluge of "we won't hold browser technologies back because of *this*" answers - web developers are so busy beautifying web pages and turning everything graphical and snazzy that you can always count on one category of people getting screwed with this trend: blind people.
They are the truly forgotten of this embelishment, and java[script]tization of the net. I wish web developers cared more about (1) complying strictly with W3C recommendations for accessibility and (2) not forgoing accessibility just for beauty...
"A door is what a dog is perpetually on the wrong side of" - Ogden Nash
The author should apply for a patent for this. I'm sure it'd be approved.
There are certainly some people out there who are impressed by cool graphic tricks.
After writing web applications for ten years, though, I find that more and more people simply want to get the job done. Perhaps it's that I work in Healthcare and my customers are busy people caring for patients.
The other thing that makes me nervous about bells and whistles is that they add complexity to things. Complicated things break. Browser makers have changed how they implement CSS and DHTML before and there's a good chance they'll change it in the future. Basic support for checkboxes will last another fifty years.
They look horrible and confusing to me, especially in the example the author has given. If i had come across that form on a page and it said "please select a rating" or the like I would be momentarily confused.
I think there is a good reason why radio buttons and check boxes haven't been styled too much - it's because they are perfect the way they are.
If you want to style a checkbox or radio button atleast make it look like one, get some inspiration from the likes of Opera skins.
A lot of people seem to be missing the bigger point here. It's not that he's replacing checkboxes with images, it's that he's managing to do it while keeping the page properly structured and accessible to all browsers. While the page isn't quite all the best HTML underneath (what's with the tables?), if you look at the forms, it's proper HTML and not some javascript hack that will break old browsers.
I think that's the point, anyway.
Slashdot: 24 hours behind every other site or your money back!
Accessibility my arse.
This looks nice but, as many seem to forget about, the keyboard functionaility (eg: Tab then Spacebar to select) just isn't there. I have several users that still don't feel comfortable with a mouse.
isn't this the same as what gmail uses, and that's been out for quite awhile now.
"[Regarding the 'cloud,'] ownership was what made America different than Russia." -- Woz
One of the most fundamental concepts of good UI/GUI design is that you DON'T INTRODUCE NEW THINGS.
Everytime you introduce something new the user has to learn how to use it or what the fuck it is. This is bad. Really bad. You just won't believe how vastly, staggeringly, jaw-droppingly bad it is.
It may seem incredibly anal, stale and anti-progressive but that's the whole point. There's no such thing as an innovative interface because innovation has connotations of something both new and better. In the realm of Human Computer Interaction (HCI) new and better are mutually exclusive. Good UIs are simple, intuitive and introduce absolutely nothing new. Ever.
There are only two truly intuitive interfaces in existance. The nipple and the vagina. The rest you have to learn how to use.
Save the styled checkboxes and radio buttons for other people in your yuppie coffee house. Your average user doesn't want them, won't understand them, won't appreciate them and doesn't care what they look like.
Question everything