Here we have a farm with several controls.
A single line text input text area a check box and some radio buttons and there's a simple piece of
text describing each one.
In the browser it looks like this.
And we can enter values and select options as expected.
At the moment the text describing each control is just that same text.
There's a better way to do this however using a label element label elements are used to describe form
input controls.
So let's wrap this text in a label element like that.
In the browser nothing has changed.
To use a label element properly we need to associate it with a form control.
We do this by first assigning of value to the attribute of the input elements the I.D. attribute is
used to uniquely identify an element in an estimate document any elements can have an IP attribute.
But it has to have a unique value within the page.
Then we add a value for the FA attributes to the label that matches this idae.
So the FA attribute on the label links the label to the input element that has the same value for the
idea.
So let's do that with the first input on our farm.
First add an I.D. to the input then a FA attribute to the label that matches it.
In the browser it doesn't look any different but if I click on the label it puts the focus on the associated
control so the cursor is there and I can enter text into the control.
So this is better for usability.
There's also a bigger advantage the assistive technologies like screen reader software will use the
label to describe the control.
So it's much better for accessibility to use labels on your farms.
It's particularly important to use labels for radio buttons and check boxes as we saw previously the
clickable area of a check box our radio button is really small and therefore hard to select.
We can fix this with a label.
Let's give this checkbox element an idea then wrap this text in a label that has a matching four attribute.
Now in the browser in addition to being able to click on the checkbox itself we can click on the label
and it will toggle the checkbox on and off.
Much easier to use.
Let's do the same for the radio buttons.
First let's add a unique I.D. to each input element.
Remembering that this value has to be unique within the page.
Then we'll wrap the text in label elements with far attributes that match these idees.
Now in the browser we can click the text next to each radio button to select that option.
Far check boxes and radio buttons.
There's an alternative way to use labels instead of having the input element and label elements separate.
You can wrap the input and the label text inside the label tag like this.
Doing it this way means you dont need an I.D. attribute on the check box and a far attributes on the
label.
This is a perfectly valid way of using the label element and it does save you from having to add a unique
I.D. to each checkbox.
In the browser.
It works in exactly the same way.
We can do the same.
Father radio buttons change the label to wrap the inputs and doing it this way we can get rid of the
idea that you buttes the input elements.
Again in the browser it works in the same way.
Either method is valid whichever you prefer.
Note however that including the inputs inside a label like this is only a valid technique for check
boxes and radio buttons.