CSS Cookbook

Chapter 5. Forms

Introduction

Forms make the Web go ‘round. Without forms we wouldn’t be able to log in to web-based email accounts, order books with one click, or trade stocks online. The downside to forms, however, is the generic way in which browsers display them. In short, HTML forms usually look ugly and boring.

The default rendering of online forms usually includes beveled input and textarea fields, as well as boring-looking buttons. Such a look and feel might be acceptable if you are making a form for use on a small intranet or on a personal web page, but it is unacceptable if you want to project a professional image.

Fortunately, with a few CSS rules, you can create forms that stand out from the pack. If you are designing a company web site, for instance, you can create forms in the same color as the company’s logo. What’s more, you can implement rollover effects on Submit buttons without having to replace the buttons with an image.

CSS provides much control over the presentation of your forms and this chapter helps you get straight into the techniques. You will learn the settings for HTML user input elements such as buttons, text areas, and fields. Another technique covered is how to set up a submit-once-only button to keep site visitors from mistakenly sending several processes to the server. At the end of the chapter are two sample designs: a simple log-in form without tables and a long registration form with tables.