Multiple Login Forms with Highlighting

This is a little specific... but I figured what the heck maybe it will be useful for someone. I recently had occasion to make multiple different login forms on a single page. With CSS we know we can apply styling to active inputs with :active. That's useful... and we've covered how to do both input and label highlighting before. But now we need go one step up and highlight the current form itself.

CSS

The CSS isn't particularly interesting. The forms themselves have a white border around them, and we set up a class that has a colored border. That class will be applied and removed with JavaScript, properly keeping style information out of JavaScript.

jQuery JavaScript

The bit that makes this "work" is here. When an input is focused, it removes highlighting from all forms on the site, and adds it back to the form which contains this newly-focused input. Thanks to bartaz for pointing out that jQuery 1.4 now supports "focusin" and "focusout" events for forms, which fire when any input inside them is active. We can watch for that. When focusin fires, we'll remove highlighting from all forms and add it back to the one that just fired the event.

It’s fine in IE. IE 6 has some formatting issues (you’ll need to use class name instead of attribute selectors) and IE 7 doesn’t support the rounded corners or shadows, but they both support the active form highlighting which is the point of this.

Could you try someday to make a tutorial for a login form using somehow a lightbox?
I hope u understand what i mean, so as if the user click on a login link the login box with user and password would poput inside a lightbox.

Great idea! Not too difficult to execute either.
I am hoping you can help. I am looking to find a way to create a contact form where users can send e-mails to multiple e-mail addresses…I envision a drop-down list which is essentially a list of e-mail addresses. So a user fills out the form then select’s an e-mail from the drop-down and once submitted it would go to the chosen e-mail address. Any idea where I can find more info. Thanks a lot. Keep up the great work.

This comment thread is closed. If you have important information to share, please contact us.