Christian Heilmann

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

Thursday, July 4th, 2013 at 5:06 pm

…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>

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

      <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.

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Dev Digest 146: 🥱 React fatigue 📊 Query anything with SQL 🧠 AI News

Why it may not be needed to learn React, why Deepfake masks will be a big problem and your spirit animal in body fat! 

Dev Digest 147: Free Copilot! Panel: AI and devs! RTO is bad! Pi plays!

Free Copilot! Experts discuss what AI means for devs. Don't trust containers. Mandated RTO means brain drain. And Pi plays Pokemon!

Dev Digest 148: Behind the scenes of Dev Digest & end of the year reports.

In 50 editions of Dev Digest we gave you 2081 resources. Join us in looking back and learn about all the trends this year.

Dev Digest 149: Wordpress break, VW tracking leak, ChatGPT vs Google.

Slowly starting 2025 we look at ChatGPT vs Google, Copilot vs. Cursor and the state of AI crawlers to replace web search…

Dev Digest 150: Shifting manually to AI.

Manual coding is becoming less of a skill. How can we ensure the quality of generated code? Also, unpacking an APK can get you an AI model.

My other work: