Twitter's running a new homepage with clean and easy design. Look at the top right of Twitter's homepage, you'll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It's really easy, it'll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it's good for learning jQuery how to do the toggle and tooltips. Enjoy it!

Create a SSD Virtual Server with DigitalOcean , using this link you get $10 FREE

digital ocean

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 width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form.

This plugin takes care of your input fields. Often used by opt-in input fields where the default value of the field is something like Your e-mail address. If you click the field the text disappears so that you can type your e-mail address.

When it comes to form validation, it's hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don't have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

When designing you sometimes have limited space to put and display all of the form elements, the obvious solution was to get rid of the labels and put only the form text fields.

Get your html Form skinned with your own options whatever the browser you use. See how the inputs change their color both on mouse rollover and mouse click event.

Lot of forms can be boring and plain, don't let yours blend in. This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.

It's a very simple widget with a small API that exposes a limited number of properties and methods, but it can still be highly effective and is great for providing visual feedback to visitors on the percentage of a process is left before it is complete.

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

Script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

Recent Comments

TGPT said:

I like the guides on this site

cris said:

finally i found what am looking for thanks..

ghfghgh said:


ghjhjg said:

vcxbcvbcbcxbcxdgdgdsfgdsfdsfgdsfgdfg dg dfgg d gdghdh ghfgh

san said:

Nice! check this link also: ...

Safikul Islam said:

Really helpful tutorial.Thanks for share that.

Safikul Islam said:

Awesome plugin! Thanks for share that with us.

The Gold Price Today said:

Very useful plugin! Thank you for your time :)