I have been going on about badly implemented forms in the past, so I see no reason to stop.

For some people forms are really hard to do well. Thinking about all of your users, accessing your form with many different tools, that is apparently really hard to do well.

But sometimes I just think that developers are just having a laugh at our expense. Let me show you a few examples of real live code I found on one the pages of a service for dutch municipalities.

<div class="form-item webform-component webform-component-select webform-component--mijn-melding-betreft"
    style="clear:both;">
    <div style="float:left;">
        <p style="width:200px;float:left;margin:0;">
            Plaats *
        </p>
    </div>
    <select
        onchange="afterChange(this)"
        name="meldingWoonplaats"
        class="form-select required">
            <option value="0">Kies een woonplaats</option>
            <!-- options -->
    </select>
</div>

There a lots of things wrong here:

  • inline styles
  • inline javaScript
  • no label

I can live with the first two, these do not affect the user as much as the third one does. That one actually harms users using assistive technologies. Users that are actual people living in this actual town. Users that will have trouble filling in the form because the company building it, didn’t give a damn.

Sad thing is that the form was built using money that they paid with taxes to the town, thus they are being robbed and neglected.

Maybe, you say, this is because nobody knows what to do with forms in html. The sad thing is that in the Netherlands we have a thing called webrichtlijnen, a number of rules which Dutch government web sites have to follow. Also third parties, building stuff for them.

And in said rules there is a special section for forms, filled with tips on how to do this. Like the very first point in this article:

Een formulier toegankelijk maken begint bij degelijke code: de onderliggende structuur van het formulier. In deze structuur moeten labels (instructies) en invoervelden aan elkaar gekoppeld zijn. Zo kunnen ook bezoekers die bijvoorbeeld voorleessoftware gebruiken het formulier invullen.

This says, in dutch, that you have to link labels and input fields, so all users can use the form. It actually says so in the rules, what to do.

It’s not that this is very new or difficult. You don’t need to be a frigging rocket scientist to know this stuff. It’s not new tech, it’s been around for only about 20 years.

So let me show Beheervisie how to improve some of their mistakes…

<div class="form-item webform-component webform-component-select webform-component--mijn-melding-betreft">
    <label for="meldingWoonplaats">
        Plaats *
    </label>
    <select
        name="meldingWoonplaats"
        id="meldingWoonplaats"
        class="form-select required">
            <option value="0">Kies een woonplaats</option>
            <!-- options -->
    </select>
</div>

Things done are:

  • get rid of inline styles, not needed, bad developer.
  • deleted inline JavaScript, not needed, dumb developer.
  • added a label with a for attribute, corresponding with the id of the select, thus linking them, do this please.

But beware, this is not the only or the worst example I could find of this service. They also do tables for layout, fail to provide correct input types or don’t tell you correctly what’s mandatory to fill in. Of course the web doesn’t need to be responsive nor do placeholders help you keep your responses more real…

But on a brighter note, some at least let you use a fax machine