Before you try to “fix” or “improve” forms on the web…

…it is prudent to think of a few things:

• Forms are incredibly important for the web. People enter data into them and the data goes to a server (via HTTP and a page reload, into a frame, or via XHR).
• Entering forms is annoying and frustrating as in many cases you need to look up data elsewhere (your credit card number, itinerary numbers…). This is why your main goal should be to create a working form that needs the least amount of information labeled in an understandable fashion. The look of the form is less important than that – this pleases us and our clients but a pretty form that isn’t understandable is not good for your users
• A form that points nowhere is not a form. Have an action attribute that points to a server-side script and a submit button to enable sending the form by hitting enter. If and when there is a JS error, people can still send the data which is what you want.
• Label elements are incredibly important. They tell assistive technology what a certain input element is and they allow users to click the label instead of clicking on the small checkbox. This is very important on touch devices (ever tried to check-in at the British Airways boarding pass on your phone? The checkbox is under a link. Guess what I click in 99% of the cases). There are two ways to connect input elements and labels:
  • You can just embed the input in the label:

    <label>Your web site <input placeholder="http://example.com" type="url"> </label>

    <label>Your web site <input placeholder="http://example.com" type="url"> </label>

  • Or you can connect them with a for/ID:

    <input type="checkbox" id="uni"> <label for="uni">Add unicorns?</label>

    <input type="checkbox" id="uni"> <label for="uni">Add unicorns?</label>

• Every input element needs a label (arguably the submit button doesn’t – if you have an action forms can be sent by hitting enter), this can be annoying with radio boxes, but you want them to be understandable, don’t you? Also, adding a label gives you a handle to create elements with CSS using ::before and ::after. As input elements are replaced elements that doesn’t work on them.
• Labels without for attributes or input elements in them are pointless.
• If you replace input element with your own styled elements (using image replacement techniques) think of the following:
  • What happens when the image/icon font can’t be loaded?
  • How does it look when you zoom into the page?
  • Is there enough contrast to the background and is it obvious that this is an input element?

It is very easy to replace forms with “nicer” things. It is also too easy to block out a lot of users when you do.