12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

March 30, 2010 · 24 comments

by Lars

12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

HTML Forms are essential for inviting visitors on a site to provide input, giving information about themselves, sharing opinions and so on. The information will on most cases be very valuable for the owner of the web site why making the forms more accessible and better drawing visitors attention is a key objective.  This post provides a list of jQuery plugins that makes it simple and allows you to cake full control of the look and feel of your HTML forms.


ElegantThemes
ThemeForest

Advertisement

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

jqueryforms

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

jqueryforms

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

jqueryforms

Justify Elements Using jQuery and CSS – Tutorial

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don’t want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.

jqueryforms

Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

jqueryforms

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jqueryforms

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

javascript-frameworks

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

jqueryforms

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

jqueryforms

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

jqueryforms

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

jquery-form-enhancements

Geogoer VChecks

Avery user friendly way to show checkboxes.

javascript-frameworks

{ 11 comments… read them below or add one }

jens May 2, 2013 at 4:25 pm

very usefull collection, thanks a lot!

Reply

Lore March 21, 2013 at 7:14 pm

First link is broken.
Try http://uniformjs.com/

Reply

AnimatedBanner August 19, 2012 at 4:14 am

“Uniform” seems to have gone away. Maybe an update with some of the more recent stuff that is out?

Reply

Corfu Web Design January 12, 2012 at 7:44 am

I m looking for that about a month……thanks ….you take me out of trouble…

Reply

EL June 4, 2011 at 1:36 pm

Nice and useful

Reply

Homer February 4, 2011 at 3:56 pm

Mmmmm cake.

Reply

Brett Widmann December 30, 2010 at 11:25 pm

These are great and easy plugins. Thanks for sharing!

Reply

Isla Watson August 12, 2010 at 7:49 pm

i have been into Copywriting lately and this stuff also requires some writing talent~,,

Reply

Leilani Legaard June 28, 2010 at 8:19 am

Ha, it’s actually a very good suggestion. Thank you very much for that!

Reply

form builder May 28, 2010 at 8:53 am

I like first, jqueri is greet … jqueri is good tools for form build. Before using twapt.net wufoo jotform – form elements

Reply

Michael Pehl May 9, 2010 at 10:32 pm

Thanks for this nice collection :)

Michael

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 13 trackbacks }

Previous post:

Next post:


Web Analytics