If you've ever tried to work with web forms, you know what a headache they can be. Luckily, the authors of HTML5 are working hard to make sure that experience improves. We're all waiting patiently for browsers to support those nice new features, but in the meantime we have to build sites and turn out beautiful functioning forms.
In this chapter, you'll learn the following topics:
- Marking up a form with some of the new HTML5 attributes
- Placing the cursor in the first form field
- Using placeholder text in form fields
- Validating your site visitors' form entries
- Styling stubborn form elements such as file uploads and select drop downs
We'll get started by taking advantage of some of the new attributes made available to us in HTML5. The great thing about these additions is that they are completely backward compatible. Browsers that don't know how to handle them will either ignore them or default to a simple text input, and our site visitors on older browsers will be able to use our forms without even knowing what they're missing.
First, a word of warning about web forms. A web form doesn't work by itself — it needs to have some fancy backend programming on a server somewhere to collect the form entries and process them, whether that means writing fields to the database or sending the form information via e-mail. Because of this, the forms we build in this chapter won't actually work — nothing will happen after clicking the Submit button on the form.
If you want to add a functioning web form to a project, you have a few options. They are as follows:
- You can learn to do server-side programming to handle your form, but server-side programming is well beyond the scope of this book.
- You can use a CMS that will likely include form handling either in its core functionality or as an add-on. Good candidates include Drupal, WordPress, and Joomla!.
- You can hire a server-side developer to get your form working. Or make friends with one and barter your design skills for their coding skills.
- You can use a web form service to handle all the server-side processing of your form. My personal favorite is WuFoo, which I have used for years without a single hiccup. (http://wufoo.com)
Any of these methods will help you create a working form to be included in your project. However, let's take a look at how we can make the front end of our form the best it can be.