Submodule 8.1: The HTML of forms

Labels are important for accessible forms.

When you add a label you don't see any change in the HTML page. It is not easy to understand its function by looking the HTML output.

The importance of label elements lays in the fact that they enable us to use markup to create more accessible/ user-friendly form fields.

In practice, this means that we combine text with input fields, and thus if the user clicks on the title of an input field, the page will automatically navigate to this field.

Labels - Why?

• Associates the text wtih input elements 
• Helps with screen readers!
• Helps with both "clicks" and touch screens!

Labels - How?

• id value attribute for form input
• label element for input label
• for attribute in label to link label element with input via the value of id

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" placeholder="Your name goes here" minlength="10" required/>

First name: