The page you were looking for doesn't exist.

You may have mistyped the address or the page may have moved.

If you are the application owner check the logs for more information.

Awesome CSS+JS form styling

Sexy CSS Form

Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery



1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards! :D

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple. :)

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

About The Author

I'm a 24 year old designer, web designer and web developer. I always liked computers and photography. I first started working on little computer programs and after finishing Informatics and Mathematics at "Gib Mihaescu College" I applied for Informatics at the "University of Craiova" and took my license this year. I"m currently aiming for a Masters Degree in the same field.

9 Comments

  1. FAQPAL says:

    Nice job, looks fantastic.

  2. Madrasraj says:

    it’s very nice. easy way to learn CSS

    Thanks

  3. diego says:

    nice, very nice!

  4. Richat says:

    That so great. I have never seen it before. How can you build this website?

  5. JB says:

    Nice one! :D

    BTW! I like this blog website! :D

  6. Thanh says:

    Very nice. I try to integrate it into my page and the login doesn’t show on top of the login input on Firefox and Chrome. However, it works fine with IE though. Am I missing something for Firefox and Chrome?

    Thanks

  7. Chocksy says:

    Well it depends on what you have there. But the input has to be with no background and you have to use only the css is in there if you have other css and modified you should try with firebug in FF and see what’s the deal if any css attribute is over the default one.

  8. g3lepage says:

    Very cool. Can you use a background image to replace the field? And will that work in Safari with the autofill feature?

  9. Vincent W says:

    Just an FYI: When I downloaded the jquery.string.js file from http://stilldesigning.com/dotstring/#download it caused some problems onblur. It seems the blank() function didn’t work properly so it always made visible the watermark onblur. When I used the jquery.string.js from your source that problem went away.

    However, it still made the watermark visible on every single keypress. To solve that problem I had to add the check for blank on the keypress event as well.

    $(this).keypress(function () {
    if($(this).val().blank()){
    $(this).prev(“label”).fadeTo(‘fast’,0);
    }
    });