Code, Angular, iOS and more by Aviv Ben-Yosef

Please Use Labels Properly

| Comments

Another issue that I frequently see junior web developers have trouble with is proper use of the <label> element.

First, let’s have a look at a lousy, label-less control:

<input type="checkbox"> This is my sucky control

This is my sucky control

To check that box one has to carefully aim her cursor to a tiny square with ninja-like precision. Doable, but no fun.

Many think that labels are just a semantic element for writing text next to controls and so just don’t use them. After all, if we wrap the above text so it becomes <label>This is my sucky control</label> nothing changes, so why bother?

Enter: labels

Labels are a magic way of getting the browser to do work for you. Connecting a label with an input field has some magic effects:

<input type="checkbox" id="check">
<label for="check">This is my better control</label>

All of a sudden we can also click on the text and the checkbox will change value! Life have just become that easier. Labels are also used for different accessibility measures.

Awesomer labeling

There’s another syntax for associating labels with inputs which I prefer. The problem with the above syntax is that it requires us to have a specific ID for each input element to then put in the label’s for attribute. This is usually messy and even requires extra coding if, for example, you’re generating forms on the fly.

Lucky for us, if a label contains a single input element it is automatically associated with it, meaning we can now write:

    <input type="checkbox"> This is my awesome control

Happy coding!

“Maintaining AngularJS feels like Cobol 🤷…”

You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?

It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.

Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.

Get the modernization email course!