badboy.media.design

Lookin’ good!

It looks pretty cool, but for non-experts, is there a help file or readme or whatever on how to actually use this?

Not just for me, but I can’t help feeling that documentation is really necessary. thanks

(p.s. I use Textpattern)

Just what I have been looking for. Thank you.

Hey!

First of all: Great article (and website). I haven’t tried it yet, but will find some time to do it.

BUT…

On my website, I’ve done it without javascript. On every form element, I’ve wrapped a layer (p, div, whatever…) around it and just styled it with CSS. And as far as I know, it works in most browsers (except from the hover and focus effect, which can’t be applied in IE without javascript - so what is my point actually?).

Anyways - Good job! Looking forward to your next version.

@pketh: I’m working on the documentation and hopefully it will be ready in a day or two.

@John R: It’s not really the same thing as you have on your website as this is done dynamically (without adding any extra markup to the original code) and to a much wider degree.

Looks nice,

It appears that two schools of though are surfacing with the whole extra markup/javascript w/o extra markup. There are so many things that can be done either way. It will be interesting to see where this goes.

I just did it the easy way.

I’ve looked at your script now, and I think I might go with that instead.

So Thanks

IE6 has troubles with radiobuttons and checkboxes: One must click the text next to the radiobutton/checkbox and not the radiobutton/textbox itself.

Other than that : excellent work!

wbr

B!

Nice work. Tidy coding. Spotted a uability glitch. You can ‘open’ both dropdowns at the same time. Should they close when the mouse exits the dropdown layer?

Hi, I have just tested the demo on a Mac with serveral browsers and here are the results:

Firefox 1.0: everything is all right

Safari 2.0: it works but the text-fields are displayed in the Safari-style

IE:mac 5.23: That’s too cool for IE:mac! The text-elements are all right but radio buttons and checkboxs do not work and never click on a select option! IE:mac will crash.

Opera 7.5: everything works exept the radio buttons and checkboxes and Opera displays the form in its own way

This is really a nice article and I will add it to the Essential Bookmarks Collection.

great work, Lucian. this Niceforms will be great, as sIFR did, to enhance the web experience.

anyway, i spot the same problem like Bramus and Mike.

i’m waiting for v.1.0, Lucian :) keep up the good work!

I do something similar to this on my site’s contact form. It only does textareas and text inputs, but I make them scalable by surrounding the input with 4 or more divs and placing images in corners.

Just press ‘ctrl’ + ‘+’ on firefox or try fill this form with kaybord only and you will see a big misunderstanding… :/

I work on this to: http://neytema.kryptis.lt/select/

Sorry for my english, it is bad…

I got the same results as Bernd, Safari shows the text fields plain old plain. Great work though :)

This is quite the w00tness! Thank you for your share.

@Bramus & Mike: Bugs noticed. Thanks for the heads up. I placed them on the todo list for next versions.

It seems there’s a lot of road to cover when it comes to full browser compatibility, but I see this as a start and a first step in the right direction nevertheless.

Scalability is another issue that I hope to improve.

Congrats Lucian.

Quite nice indeed! A few issues yet to be ironed out, but they won’t require too much work.

IE 5.5 doesn’t like it too much.

The dropdown inputs should show when you click anywhere on the control, not just the little dropdown arrow. This is the behaviour people expect.

What might be interesting is to add to this some basic, client-side validation styling. Make it forms package. The javascript and css just need a few additions. On my design site, in the contact section, I validate even before the user clicks submit. In fact, it doesn’t allow the user to submit until the required fields are filled and it highlights the offending input controls (as well as the “required fields” text). I think you could do this quite nicely.

Anyway, well done again. Forms are an area we all need to work at. We often leave them till the end (the contact page is usually last on the list) and styling them can be nasty work.

Looks really interesting. If only there was a way to override the default Submit button styling in Safari (all versions). Right now it still shows the same old Aqua-style buttons not your custom design.

Still, very cool.

Thank you, THANK YOU, THANK YOU!!!! I knew many of these but was missing the checkbox, radio button and drop-down menu customizations - so I REALLY appreciate you providing them here!! Now my forms will look PERFECT! ;-D

Thanks again, Shirley ;-)

oh this looks realy cool, i was searcin for somethink like this for a long time!

off-topic: esti Român?

Looks interesting. I don’t have a mac to test with either. Keep it up, I’ll play with it and see if I can get it working better on ie5.

@Dumitru: off-topic: da :)

looks nice but… select not working correctly while overlapping. maxlength not handled. Hope that will be fixed soon!!

One other bug/ usability issue: select elements should show their options when clicking anywhere on them, not on just the arrows.

Another quick note for the 2.0 series of Safari, the labels are not clickable, you have to click the actual radio button or check box. Ditto the “standard” text and textarea input notes noted above. Great work all in all!

Using the JS Browser Sniffer from webreference might help some. You could skip certain elements, when the offending browser doesn’t like them. A version I am using is here: http://www.mpwi.at/js/detect.js

Looks nice, but have you tried using it with a keyboard? One of the really good things about a form is that you can navigate it via keyboard - most of the time a lot faster than by mouse. The radio buttons and check boxes work as real ones, but they are missing the highlighting you normally get around them (maybe add a focus event for that?), but the select boxes are not usable via keyboard. (This is the same feedback I got for my implementation some time ago: http://icant.co.uk/forreview/tamingselect/ )

Nice. You might want to look at Aaron Gustafson’s “replaceSelect” (http://easy-designs.net/articles/replaceSelect2/) for the work he did on a similar topic in order to help with accessibility issues; the niceforms aren’t really usable with keyboard navigation at all (there’s no indication of what’s focused when you tab between controls; the arrows don’t change the select value, it seems, that sort of thing). That shouldn’t take long to fix, though. Lovely job.

Only have a brief moment to respond, but other than some Opera bugs I found only one major issue: the text of a SELECT isn’t clickable. This is contrary to what ordinary select widgets do, where the entire box can be clicked on to make the dropdown menu show up.

My apologies if this has been mentioned above, as said, only have a brief moment to reply…

Looking awesome so far, though!

Those are nice forms, hope the intergration is just as simple.BTW: I’ts not possible to view your site with images turned.

Pretty coolllll! :) Nice work! I’ll use it…

There’s a bug on the select. It not hide until I select one opt. :(

You might want to make larger clickable areas?

For example on the combo box you can’t click the text to get it to drop down, you have to click the small little arrow.

In IE 6 you have to click the text of the radio or checkboxes. You can’t just click the radio button or checkbox to select it which isn’t so good.

Perhaps a little more development is needed?

When I click on the select arrow and don’t want to select any item it still stays open even when I click on any other item on the page.

Normal select boxes closes when clicking anywhere on the page.

problem in IE6 : click on second list (”Please select”), keep it open, click on first list.

Some items from first list are hidden by second one. User can not identify first list from second one.

This said, thanks for writting this.

Great Work!

Have u tried to modify the “text” input style?

I sent you some screenshots taken in OS X 10.4.2 to show you how it looked in 7 different browsers.

Get back to me if you want updated ones if you update your work.

Thanks everyone for your awesome feedback. It has been really helpfull and many of the features discussed here will be added in the next versions, and the bugs will get solved (hopefully).

I will keep you posted on any further development.

Ma omori aici Romane - Foarte, foarte frumos. Mersi.

Accessibility seems to be the key problem with Niceforms.

1. It’s difficult (but possible) to access/change the various fields. The options in the select fields are focused after the last elements on the page. Adding tabindexes would probably fix this, but there are still several other issues.

2. Resizing causes major issues with the select, text, and password fields.

Great job though — they look great.

Inca o data aprecierea mea de la un incepator in breasla!!! Chiar aveam nevoie de ceva in genul asta la un proiect! Creditez cu un link pe siteul proiectului (face bine la PR)!!! Sa auzim numai de bine!!!

I found your design superb. I was hoping you have something I can do with my tables. I have sites which display DB in tables kindly give me suggestions.

It’s a great first version of this nice project, because as others said above there are quite a few flaws.

What I want to attract your attention is the fact that the natural browser select objects are inline box, where yours is a block box, thus you can’t use it in a form like for example:

Value between [select1] and [select2].

I don’t know if anyone has mentioned this yet, but another fact that needs to be paid attention to is that the input fields (text) and textarea are fixed width, so you can’t have inputs with different width.

Anyway, great job though!

badboy, I might use your niceforms in a project. It’s great stuff.

As other people have stated here before, you can’t click on the radiobuttons or the checkboxes directly on IE6. I have played with your files a little bit, and came to the conclusion that it’s down to the absolute positioning. I am on the way of fixing this, at least for the radiobuttons (and I guess the checkboxes, they’re done the same, no?). Right now I have a working version, but it’s not aligned very nicely. Once I’ve fixed this, I’ll leave a link. Did you position your divs absolute because of the alignment(which would mean that I won’t be able to make it nice anyway), or did you just decide to use it for no specific reason?

Great work!

Not sure if this has been pointed out, but textarea scrolling is a bit of a problem in IE6. You can see this by typing in enough text into the textarea to cause scrolling and then using the scroll-bar to scroll back up to the top.

We have some comments to add to the thread here that you may want to check out. There have also been some major issues with accessibility compliance with the form styling, as nice as it is. I hope that these things can be fixed because I’d really love to use it.

Clicking on the middle of the dropdown does not drop it down. Looks sexy, just need to work sexily.

Thanks again to everyone who submitted bug reports and possible solutions. These were all very helpful!

I’m working on fixing them and on improving behavior and as soon as I’ll be happy with the results, I’ll post the updated version.

Thanks a lot, looking forward to new improved versions. I might think twice before implementing in yet, but still it’s a nice start of what might come out as a great and popular tool across the web.

I’ve got a Mac, so I’d also mention that it works just fine in the DeerPark alpha… a browser to come from the Mozilla found.

And one more notice on Macs: IMHO, there’s no use trying to make it work in IE/Mac, because the browser is really buggy and CSS is realized way badly in it. And it’s no longer supported my MS, so it’s a dead browser, for sure.

Your idea is quite ingenious, but I don’t know if it is really worth it, especially considering the risk that it won’t work. Why not just embed the form into a nicely styled page?

Looks great but i will wait until its working as sexy as it looks! Any ideas on when you will have a new version?

Works and looks very nice in mozilla in linux, also works fine but doesn’t look so good in an old version of konqueror.

I doubt it would be easy to work into my intranet applications though unfortuanately.

Nice article, found you by Essential Bookmarks For Web Developers, are you planning on creating some more schemes?

This is a wonderful experiment and with some more work you could gain some real recognition for this. Work out those usability issues and write a bit of brief documentation on installation of usage.

It’ll probably be worth your while.

I dont’s know if I’m the only one having this problem, but when viewing the demo with Firefox 1.6 ( The nightly build, rv 1.84b4 ) the checkbox and radio controls did not work.

Using Opera 8.02 and the radio buttons and check boxes don’t work. I am also uncertain if your submit button works. I had to go over to IE to post this because this form doesn’t send in Opera. I think using a form that fails in browsers that don’t support your new special styling is a great way to avoid negative feedback, though I doubt that was your intention. You should consider making this feedback form a standard form. Im on Windows XP.

What about section 508 compliancy and the use of the keyboard? Looks great, but it could really use that support.

“…degrade gracefully for those users that for some reason haven’t yet made the move to a real browser”

Like those damn blind folk when will they switch to FireFox. Damn 508 Compliance!

Awesome!

Have you tired it with a the form element “input file upload”?

@Blake: Support for the ‘file upload’ input is not planned until much later on. This is a system widget that is untouchable by normal CSS and would have to be completely replaced in order to get the desired custom look.

Hey! I love it!

Just wanted to let you know that everything looks great on Safari running in 10.4! It also looks great in Firefox on the mac running Tiger!

Hi,

I’ve really liked your script and I am looking forward to a new version.

Meanwhile, I made a small upgrade that improves how select elements are handled. You can see it at http://www.arraystudio.com/blog/item/82

I would really like to hear your feedback.

Also, did you consider creating an open source project from this script? I would be glad to help and develop it further. If you are interested contact me to discuss it futher.

@Basti: This issue is already fixed for the incoming new version, but not quite like in the method you presented. It simply hides the drop-down when the mouse leaves that area (click or no click).

Workss great!

You might have to change your .htaccess file settings to avoid image flickering in IE6, I did.

Here’s info from Dean Edwards on this problem Cache Control in IE

Something interesting I found. This script completely stops either of the two image rollover scripts from operating correctly. Both the default Dreamweaver script as well as the one found here:

http://www.dynamicdrive.com/dynamicindex15/domroll.htm

Any ideas?

@Greg: This happens because each of these two scripts needs to be initialized once the page loads. Currently, the Niceforms script overrides the initialization function. To solve this, just add a call to the rollover function to the initialization function of the Niceforms.

Alright, thanks a lot. I’m not sure how to do that, but I assume I can figure it out. It’s a great script by the way. I’m curious how you made the titles (name/email/website/message) on this input box bring up the dropdown box when clicked. It’s a nice touch.

Thanks for this script Lucian. It works fine with some minor issues and the additional usability issues already posted here. Are you still working on a new version+documentation? How about openning a project on SourceForge to collaborate this effort? This way we can help you debugging. thanks again.

@badboy: About select fields. Are you sure that it is a good way to close them when user just leaves option area?

My fix was aimed to be as similar as possible to usual select functionality, i.e. to be something people are used to. Hiding the select options when user leaves option area is more like having dropdown menu.

Also will the upcomming version have support for multiple selects?

just a thought, but you can use this method of background positioning further, with a 3 state image, to produce effects for hover, active, normal, etc. theoretically, you should be able to do 9 different states with such an idea. This idea is usefull in alot of different design ideas. The main advantage of it however, is an extremely painless preloading :)

I just thought I’d add a few niggles which people have mainly mentioned above, but which would be great in the release version:

* Select box should drop when it’s clicked anywhere (not just the arrow). It should close when focus is moved anywhere else (you can currently leave drop-down 2 open and then also drop-down 1 over/under it).

* in IE only the select box menu items text is clickable (the whole row to it’s right should be clickable).

* I’ve clicked around the options a lot in WinXP/IE6 and now the radios and checkboxes won’t respond to my clicks. Is this a bug?

* there’s no visual feedback when tabbing between radios and checkboxes in Firefox (though spacebar still activates the selected option).

* The radio boxes can’t be tabbed between on IE6 (only the selected option)

All small issues, but I hope this feedback/testing is of some help.

This looks great! Can’t wait to see a release version - useful stuff.

This type of ECMAScript is the thing that ALL developers should use ;) I’ll rework my forms (on professional projects) with it !

I’m looking forward the next version :-p

Sure, eye-candy galore but it does not mimick the way checkboxes, radiobuttons, droplists, like you have to click the arrow next to the droplist to activate/deactivate it, click ON the checkbox, not the text next to it.

Its really pretty but since it falls short on the way forms normally work I’d never use it…

nice

i like it, thanks !

any idea when you can release a 9.5beta or something….

Very nice looking forms. I will sure use them in future.

A great!! Style!! im doing a Cpanel for a administrator system i want something like that! thanks!!

EXCELLENT!!!!!!!!

nice… one major issue in addition to all the above issues i noticed was that, when you have multiple selects on the same line, the option dropdowns position is off by a few pixels in all selects.

Very nice — I started to do something like this myself a few months ago (specifically, a replacement for drop-down selectors), but gave up in the end because it was just too complicated to get it right.

I’ll be keeping an eye on this, hoping that you have more patience/perseverance than me!

I don’t have time to read all the comments to see if someone’s mentioned this already, but I noticed that with the selectors if you open a selector and click elsewhere, the selector stays open. A ‘normal’ selector would close when you click anywhere outside it.

cheskbox and radiobox doesn’t work in Opera 8.01 and ie 6.0 with SP2.

Awesome feature! Thanks a lot for this contribution!!!

On Firefox 1.5 for Mac, the drop-down selectors work, but radio buttons and checkboxes don’t. Everything looks pretty good, tho. Is the text supposed to be grey?

That was a fine piece of work. But, here is what i have found out.

In IE 6.0, the drop-down box does not close at all and when i click on the drop-down box below it…both overlap. Also, the radio buttons do not validate until i click on the text and not the radio button itself.

I recently started using forms on my website developed in simple PHP.

I think its better to use simple forms rather than anything with style, even though it looks a lot better. The reason I say that is because simple forms catch the users attention really quickly and the users know what to expect. Fancy forms are good but Im not sure if the users respond as effectively as using basic stuff.

Just wanted to share my finding.. good luck..

I agree with Jay K.

Even though fancy forms look really good, best user turn around is on regular forms.

Regards, Yogi

great work, Lucian. this Niceforms will be great!

Looks excellent. I’ve been trying to find a cross-browser solution to displaying a Javascript drop down menu over a drop-down form object (SELECT). The form element is displayed ‘through’ the drop down menu in IE, which makes the menu unusable. One workaround is using an IFRAME, but this may be a better solution. Would be interested in seeing the updated version.

I still haven’t forgotten about the Niceforms but things are going a bit more slowly than I anticipated as other regular projects are keeping me busy.

I hope to be able to get some time on my hands for this one and release an almost final version by the end of this year.