CSS Cookbook, 3rd Edition

Chapter 8. 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 to 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 might be acceptable if you are making a form for use on a small intranet or on a small website, but it is unacceptable if you want to project a professional image.

Even Google, lauded for its minimalism, has resorted to changing its highly praised search form to use WebKit’s proprietary CSS properties to create more realistic form controls.

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 for creating higher-quality forms.

You will learn the settings for HTML user input elements such as buttons, text areas, and fields. You will also learn 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.

Note

Appendix D serves as an excellent resource that complements this chapter. In addition, see http://webformelements.com/ for a visual compendium detailing the effect of a majority of the visual CSS properties ...