CSS Cookbook, 2nd Edition

Chapter 7. Forms

Introduction

Without HTML forms we wouldn’t be able to log in to web-based email accounts, order books with one click, or trade stocks online. Although forms make the Web go around, they are ugly due the generic way in which browsers display them.

The default rendering of online forms usually includes beveled input and textarea fields, as well as boring-looking buttons. Such a look and feel may be acceptable if you are making a form for use on a small intranet or on a small web site, 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. This chapter helps you get straight into the techniques to create a higher quality form.

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 login form without tables and a long registration form with tables.

Tip

Note that Appendix D serves as an excellent resource that complements this chapter. In the appendix is a visual compendium detailing the effect of a majority of the visual CSS properties on form elements in 10 of today’s modern browsers.

Modifying the Spacing Around a Form

Problem

You want to modify the space around a form.

Solution

Set the margin to zero while adjusting the padding values ...