CSS online training course

CSS lesson 13, Making interactive forms


A form is a very special element because there are elements used which only are used in forms.
A form is being enclosed by the <form> and </form> tags.
Because a form is a very important item to website builders i will first show the html part so you can see what neat things css can add to it.

Action takes care of the process of formdata.
Method is the way the form processes the action.
There are 2 methods </post and get>.
Post sends the data of the forms seperately.

Without a CSS the HTML form from above will looks as followed.
Later in this lesson i will show you the results when we apply CSS.

This form doesnt look so nice. The CSS code which we apply below brings structure to the HTML.
The form element gets some layout like padding, border and a width of 400px, also we choose a fonttype which is Verdana.

Then we make the label.
Because we want the label to appear on the left of the input tags we give the the "float: left" tag.
There is a absolute width and in this case its 75px.
Also i want the text to be outlined and that between label and inputfield 15px marge has to be considered.

I will customise the inputfield with a grey background color, a font size and a thin grey border so that some space will appear so not all the fields will stick to each other.
Because of my font types : verdana,arial,etc i will give a different fonttype than the standard of the page.

In the example i also use a selection box which contains USA and Canada.
This box i give an abosulte width of 120px which is the same size as the text inputfields.

The textarea i also give fixed measurements but you can play with this as you seem fit.
I also choose for a background color and a border.

And this would be the result :