The Label Tag Helper

The HTML Label element is normally used in combination with another control, to convey the purpose of the other control - in other words and as the name implies, it can label another control. Visually, you could achieve the same by placing a piece of text next to the control, but when you use a Label, the browser knows that these two items belong together. This gives you a couple of advantages, where the most notable one is the fact that when you click the Label, the linked control is automatically activated. This is nice for e.g. a text field, but it's even nicer for a checkbox or radio button, where the clickable part of the control is very small.

Linking a Label with another control is normally done by using the HTML property called "for" and referring to the ID property of the other control, like this:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" />

However, when using the Label Tag Helper, you get the advantage of a strongly typed connection between the Model and the Label - if you change the the property on the Model, the change is automatically reflected in all places where you use the Tag Helper.

The for property

As with several other Tag Helpers, the connection to the Model is created with the "for" property, and as with any other Tag Helper property, it requires a prefix. This prefix is usually "asp", unless you specifically change this. In other words, a Tag Helper enabled Label would look like this:

<label asp-for="FirstName"></label>
<input asp-for="FirstName" />

Notice how you no longer have to specify the text of the Label - it will be automatically pulled from the Model, and the HTML "for" attribute will be automatically filled to match the designated input element. The resulting HTML will look like this:

<label for="FirstName">FirstName</label>
<input type="text" id="FirstName" name="FirstName" value="" />

The Display Data Annotation

When looking at the two examples, you'll notice a small difference: In the first one, where I used an old-school HTML Label, the text was set to "First name:". When using the Tag Helper, the text was automatically pulled from the Model and the result was "FirstName", because that's the property name. However, often you'll find that property names doesn't make good labels. I mean, surely anyone would understand the purpose of "FirstName", but "First name:" is more correct and makes more sense.

Fortunately for us, this is easy to change - simply use the Display Data Annotation on your Model, like this:

public class WebUser
{
    [Display(Name = "First name:")]
    public string FirstName { get; set; }
    ....

The generated HTML will now look like this instead:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" name="FirstName" value="" />

And the cool thing here is of course that whenever you change the Name property of the Display Data Annotation on your Model, it will be reflected anywhere you use it, so if you have multiple Views using your Model, you don't have to manually edit them to reflect this change.

Summary

The Label Tag Helper is one of the simplest Tag Helpers in the framework, but it's still very useful, allowing you to easily generate Labels for your FORM's and tying them together with the relevant field.