HTML and CSS Reference
A word about accessibility
We've cr eated a complete version
of the B ean Ma chine wit h labels,
and upd ated the CSS to go with
it. Chec k out ac cessform .html
and acc essform.c ss in the code
So far we've been labeling our form elements with simple text, but we should
really be using the <label> element to mark up these labels. The <label>
element provides further information about the structure of your page, allows
you to style your labels using CSS more easily, and helps screen readers for the
visually impaired to correctly identify form elements.
<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot"> hot </label>
<input type="radio" name="hotornot" value="not" id="not">
<label for="not"> not </label>
By default, labels don't look any different from just normal text. However, they can
make a big difference when it comes to accessibility. You can use the <label> element
with any form control, so we can add a label to each part of our Bean Machine form.
For instance, we could add a label to the number input for the number of bags like this:
<label for="bags"> Number of bags: </label>
<input type="number" id="bags" name="bags" min="1" max="10">
It's oka y to hav e the nam e and id
attribu tes use t he same value, in
this cas e, “bags” .
When you add labels to radio or checkbox controls, remember that the id of each
control needs to be unique, even though the name of all the controls in a group is the
same. So, to add labels to the “beantype” radio control in the Bean Machine, create
unique ids for both the whole and ground options:
B ut each id needs to be un ique.
<input type="radio" id="whole_beantype" name="beantype" value="whole">
<label for="whole_beantype"> Whole bean </label><br>
<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<label for="ground_beantype"> Ground </label>
N otice tha t a labe l can com e before or afte r the co ntrol
it 's associa ted with ; as long as the v alue of the for attribute
m atches t he id, it doesn't matter w here the label is .