Progressively Enhanced Form Styling

As we apply jQuery to websites, we must always ask ourselves how pages will look and function when visitors have JavaScript disabled (unless, of course, we know exactly who every visitor will be and how their browsers will be configured). This is not to say, though, that we can’t create a more beautiful or feature-full site for visitors with JavaScript turned on. The principle of progressive enhancement is popular among JavaScript developers because it respects the needs of all users while providing something extra to most of them.

Let us create a form, a contact form, that demonstrates progressive enhancement in both its appearance and its behavior. Without JavaScript enabled, the form’s first fieldset looks like this:

While it certainly appears functional, with plenty of information to guide the user through each field, it could definitely stand some improvement. Let’s progressively enhance this group in three ways:

1. 1. Modify the DOM to allow for flexible...