Corrosive Online

Styling Forms With CSS and Javascript

Forms in web design are, basically, ugly. They are functional and power a large percentage of PHP and database driven websites...but they are still ugly. Take a look at this unstyled form for a competition on a music website;

Now, that is never going to fit into a great looking music fan website. So, what we need to do is make it a little more funky using some CSS and javascript magic.

The Form Tag

The first Tag we will look at styling is 'form' itself. You can, of course, apply all the same CSS properties to the 'form' Tag that you can any other Tag. This is often overlooked by new designers who are reluctant to touch what they see as a part of the form structure, rather than being a Tag that you can style with CSS. I want to add a gradient background to my whole form, create some padding to ensure that there is some 'breathing space' for the other form elements, create a white border and also add a CSS3 'box shadow' for some extra bang (remember that this will not work on all browsers!). The CSS is as follows;

form {
background: url(images/bg_sl.jpg) #1f1f1f repeat-x;
padding: 10px;
box-shadow: 4px 4px 5px #888;
border: 4px solid #fff;
}

The resulting form has already started to look a lot better;

The more observant amongst you will also have noticed that I have styled the 'label' Tag to display the labels for the boxes white, bold and italic.

The Input Tag

Much like the 'form' Tag you can style the 'input' Tag with CSS. It does get a little more complicated than that as 'input' can refer to a number of different form elements depending on what 'type' of input you select it to be. The e-mail and name areas on my sample form are input type 'text', the submit button is type 'submit' and the 'Over 18' checkbox is type 'checkbox'. That kind of makes sense yeah? So the HTML, for the three different form elements I have in my example, is;

<input type="text" name="name">
<input name="over18" type="checkbox" value="yes">
<input name="submit" type="submit">

Styling the 'input' Tag affects all of these form elements. You can, of course, use classes to differentiate them, but I will come on to that in a bit. First of all I will style the 'input' Tag;

input {
padding: 3px;
background: none;
border: 2px solid #fff;
color: #FFFFFF;
font-weight: bold;
margin: 0 0 8px 0;
}

I've used a margin added to the bottom of the 'input' Tag and you cam also see I have stated that I don't want a background on my 'input' items so that the gradient shows through. The last two things I have done is add a border and to stipulate that the text for typing should be white and bold to fit the rest of the form. You should also notice that these changes have affected the 'submit' button;

Now I want to change the 'checkbox' input (the confirmation of being over 18) to something a little more in keeping with the new form styles. I will require a little bit of javascript for this. The source for this javascript solution is ryanfait.com.

In order to use this javascript trickery you must first download the javascript file from ryanfait.com. Once you have done this, save it in a folder in your web structure (I always tend to have a folder called 'js') and then reference it in the head Tags of the page where you want to use it;

<script type="text/javascript" src="js/input-styles.js"></script>

Then you need to make sure you add the following styles to your stylesheet;

span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.png) no-repeat;
display: block;
}

Lastly, create your checkbox image to suit the rest of the form and replace your 'checkbox' code with this;

<input name="over18" type="checkbox" value="yes" class="styled">

Your new styled 'checkbox' should appear like the example below. I have tried to keep my image for the 'checkbox' fairly simple. You may want to go to town but make sure you read the instructions on the ryanfait.com website carefully to get it right.

The Select and Option Tags

The list element of the form next. It is still pretty nasty wouldn't you say? I will use the same javascript as I used to style the 'checkbox' in the previous example. As you have already linked to the required code to make the 'checkbox', all you have to do is add the following CSS;

span.select {
position: absolute;
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url (selector.png) no-repeat;
overflow: hidden;
}

Using the button image that I have created the 'select' Tag is now styled to match the rest of the form. You may also want to style the 'option' Tag by giving is a class like this;

option.grey {
background-color: #333;
color: #FFF;
font-weight: bold;
}

You will then need to apply the 'grey' class to each 'option' Tag;

<option class="grey">Faith No More</option>

With both the 'select' and 'option' Tags styled the form is almost complete;

The Textarea Tag

The final tag to style using CSS is the 'textarea' tag. This is the section where the viewer needs to complete the phrase. Use the following CSS to style the 'textarea';

textarea {
background: none;
border: 2px solid #fff;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
}

I hope you like my finished form and have also started to appreciate that forms don't need to be dull and drab...or even as Microsoft intended!

There are lots more options on-line for styling forms, using both CSS and javascript, so go and do some research and create forms your visitors will actually want to fill in.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details. If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.