Visual Appearance of the HTML Form

Content of the lesson:

Forms and CSS

If you start creating web applications you find out that the standard appearance of the form elements is efficient and transparent (if the form is alone in the page) but when you need to visually design the form inside your page you will face several problems.

CSS does not have any prescriptions for form elements because it is not clear whether these elements have to take the system appearance or take the browser appearance. Although there is no prescription several browsers allow you to use styles when placing forms into you page.

Some webdesigners recommend not to style form elements at all. If you want to use a form on your blog which contains only a few elements and you need it to function in every browser without any problems, you should not use CSS styling. Nevertheless, if you create a gentle design and have the possibility to test your form in different browsers, it can improve the impression of your page.

If you create a page for intranet (what is intranet) you face a different situation. These pages usually contain tens of hundreds of forms or have to be inserted inside a complex table. Non-styled pseudo-3D form elements take too much place and their appearance is ancient.

CSS and the Element Form

Form using this CSS modification for the form element

• margin: 0 auto;
• background: #ccc;
• border: 1px solid #aaa;

A form should use one font only. However, the font cannot be inherited from body or html and you also cannot set one font for the form. To get the following result you have to use these rules:

If you want to make the appearance even more uniform, you can use additional CSS styling for elements like label, fieldset, legend etc.

Element Text and CSS

This element (<input type="text" ... />) is the most used one in forms. It is used to insert shorter text like names, addresses, dates etc.

Now we are going to change the appearance of the text input box which is functional in almost every browser. The main task is to eliminate the pseudo-3D effect of this element. The styled element can be inserted into a container (into a div for example) which will use the design we want.

Note to the size attribute of the input box: this is an older way to define the size of the form element. The size will not be the same in every browser so it is much better to use the CSS properties.

Element Textarea and CSS

The element textarea is used for longer, multiline texts, usually of previously unknown length. Textareas can be used to create boxes for comments, questionnaires etc.

Now we are going to change the appearance of the textarea element which is supported by almost every browser. The main task is to eliminate the pseudo-3D effect of this element. The styled element can be inserted into a container (into a div for example) which will use the design we want.

Note to the rows and cols attributes: they set the number of rows and columns of the textarea item. This is an older way to define the size of the textarea element. The size will not be the same in every browser so it is much better to use the CSS properties.

Element Select and CSS

The select element is used to choose from several options or for a simple menu.

This element appears very differently in each browser. We should only change the font to be uniform with the other form elements, additionally the background color and the border (the border is not correctly drawn in all browsers). We can set the height and the width but we have to assure that the content is readable. In this case we set only the width.

Elements Checkbox, Radio and CSS

The elements checkbox and radio are used for choosing an option and it is better not to style them at all. End.

An interesting solution can be realized using these elements and javascript (more at this address: http://swatelier.info/at/formulare/checkBox.htm in section "Experimental checkbox").

Element Submit

The form element input type="submit" is used to send the form to the server.

Submit button can be improved by adding a background image or a dynamic effect after moving mouse cursor over the button (it can change color for example).

Homework

Create a nicely designed www page with a form and use CSS styling (in an external CSS file). Add a background image and a dynamic effect to the submit button.

Additional Texts

Questions

1. Describe the possibilities to style form elements using CSS styles.
2. What are the main problems when styling form elements?