HTML form elements, rounded corners , framework

Question

I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.

If you know of something that's quick to implement, and open source, thank you in advance.

Answer 1

You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...

http://www.assemblesoft.com/examples/form/

http://pupungbp.erastica.com/css/rounded-corner-input-form/

Answer 2

Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:

#formbox {   
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}

In your CSS to add rounded corners to any div. Either that or use some simple flash.

Answer 3

Try NiceForms a Javascript library for styling forms.

Or JqTransform for jQuery.

You can find some other resources below:

http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html

http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/

http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html

Answer 4

It's called CSS. The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:

<style type="text/css"> 
    input {
     border: none;
     background: #FFF;
     width: 165px;
    }
    .rounded {
     background:  url(rounded.gif) no-repeat left top;
     padding: 8px;
     width: 180px;
    }
    </style>

In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).

Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/