Digital Web Magazine

The web professional's online magazine of choice.

Nice Forms

Nick Finck

August 17, 2005 at 8:13 AM

Paul Ingram pointed out this cool method created by Lucian Slatineanu (AKA badboy) called Niceforms for designing good looking forms such as this one for example. I really would love to style forms on all of my sites this way. The only problem I found is that you can't tab through the form properly. This could be just because of the markup they are using and not due to the Niceform sytle and javascript itself. Give it a spin. Let me know if you find any bugs or challenges with it, such as usability, accessibility, or general functionality. I'd love to hear what you think about them and I am sure the creator would love to improve them where needed.

Comments

Marten Veldthuis

August 17, 2005 at 9:32 AM

It's got a bunch of unexpected behaviour which would need to be looked at before I'd use it: - Opening a dropdown can only be done with the dropdown arrow, not by clicking on "please select". - Closing a dropdown can't be done by clicking elsewhere in the document. - In Safari, you can't select radio buttons or checkboxes by clicking on the label, even though it shows a hand-cursor when mousing over them That said, it's a very nice start, or even, it's probably about what a v0.9 would be. On the other hand, I've always wondered what's wrong with the default form controls that people always try doing things like this...

Craig Saila

August 17, 2005 at 9:34 AM

I found (in Firefox) you can tab through and activate all the elements using the keyboard (the focus isn't shown though). With the styles off, its fully accessible, though. The only catch in the styled version is with the pulldowns; they require you to press Enter to open the menu (as opposed to the arrow keys). As well, there's no way to select a pulldown menu option using the keyboard. Fix that, and use JavaScript or something to highlight where the current focus is, and it's good to go.

Justin P.

August 17, 2005 at 10:03 AM

In addition to the issues Marten pointed out, IE has a similar problem with the radio buttons (and checkboxes). You can only click the label to activate them and not the actual button/checkbox (even though hovering over the checkbox/radiobutton changes the cursor to a hand). This is the opposite of what Marten reported in Safari.

Ryan Bates

August 17, 2005 at 10:04 AM

I do not understand the point of customizing forms like this. Forms are all about functionality, and this changes the behavior which I find extremely annoying. Also, custom forums are bound to break on some browser/operating system somewhere, and forms are one of the last things you want broken on a site. That said, customizing the look of a form element may have it's place (such as a drop-down menu in the header of the site, etc.), but for your everday form, please just stick with the normal & functional method, even if it is ugly in some browsers/operating systems.

Carlos Bernal

August 17, 2005 at 12:14 PM

Nice experiment...let's see if it will mature like Flash headings. When turning off Javascript it works as expected...it defaults back to standard form controls. However if you only turn off images, you see the labels and no hint of a form...this would be my problem before making this technique ready for real-world use.

David

August 17, 2005 at 12:29 PM

It broke pretty badly in Opera...is it due to poor code or poor support in Opera though? I know Safari has weak javascript implementation, so that may not be the scripts fault there or in Opera if it works well in the Fox.

Taylor Barstow

August 17, 2005 at 1:12 PM

Re: Ryan Bates "...but for your everday form, please just stick with the normal & functional method, even if it is ugly in some browsers/operating systems." Well, it's not all about looks. Part of this package, IMHO the worthy part, improves accesibility greatly. For example, being able to click the text next to a radio button rather than just the radio itself is really useful and makes the form easier to use. That said, I agree with Ryan's assessment of the style changes. We as web developers must remember that our users rely greatly on familiarity. If a dropdown doesn't look like their plain-jane dropdown, they might not use it in the same way. Worse, they might not use it at all.

Lucian Slatineanu

August 17, 2005 at 7:09 PM

As I've already said in my article, the script is currently at v.0.9, just as Marten said. I have a long way to go with it but just wanted to show everyone a beta version so I might catch wind of some bugs that escaped me. Accessibility is a major issue on my list and I will not dare to release this script in its final version unless I can be 100% sure it meets such requirements. Scalability is another issue and I plan to work on that too so the script can be a breeze to use and to modify. I was already aware of most of the bugs reported here and on the comments at my own website and some new ones showed up as well. It's a long way to go, but I'm pretty sure the end result will be worth it as I believe it will not only improve the way forms look but also their usability.

Kevin

August 17, 2005 at 9:24 PM

"Well, it's not all about looks. Part of this package, IMHO the worthy part, improves accesibility greatly. For example, being able to click the text next to a radio button rather than just the radio itself is really useful and makes the form easier to use." Ummmm. that's what label tags are for. Anyway, there are loads of keyboard accessibility issues with the combo boxes that have already been pointed out. And really - what's big win here?

Mitja

August 18, 2005 at 3:27 PM

Keyboard shortcuts don't work. I usually fill forms by using Tab, Space and arrows. with that repaired .. everything would be perfect. There's no big win here, but some good looking forms.

Aaron Gustafson

August 19, 2005 at 9:21 AM

Reminds me of <select> Something New and <select> Something New, Part 2. ;-)

Adam Burmister

August 19, 2005 at 11:18 PM

For a similar example check out my post from earlier this year on styling checkbox and radio button elements (tabbing works with this method). ARC - Adam's Custom Radio/Checkbox Customiser

Video Codes

October 29, 2005 at 8:01 PM

They look great but they seem to bloat the page with extra javascript you can avoid. The thing is it would depend on your viewers if its worth the extra fuss.

A. Schroth

December 3, 2005 at 5:54 AM

Well, I think the forms look really great. I hope we can see such nice forms on many websites in the future. :)

Media Temple

via Ad Packs