HTML Input Label

Introduction

The HTML <label> tag is used to add a caption or label text to any HTML element on the webpage. In this lab, we will learn how to use the <label> tag in HTML.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Adding a Label to an Input Element

1. Open the index.html file in your preferred text editor.
2. Add the following code to create an input element with a label:

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

3. The label element's for attribute should match the id attribute of the input element it is associated with.

Using the Label Element to Create a Clickable Area

1. Open the index.html file in your preferred text editor.
2. Add the following code to create a clickable area around an input:

<label>
  <input type="checkbox" />
  Click here to select
</label>

3. Clicking on the "Click here to select" text will now select the checkbox.

Associating a Label with a Form Element

1. Open the index.html file in your preferred text editor.
2. Add the following code to create a form element with a label:

<form action="/" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>

3. The label element's for attribute should match the id attribute of the form element it is associated with.

Styling a Label

1. Open the index.html file in your preferred text editor.
2. Add the following code to create a label element with a CSS class:

<label class="large-label" for="name">Name:</label>
<input type="text" id="name" name="name" />

3. Add the following CSS to your stylesheet to style the label:

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Using the Label Element to Improve Accessibility

1. Open the index.html file in your preferred text editor.
2. Add the following code to create an input element with a label for screen reader accessibility:

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />

3. The aria-label attribute provides a textual label for the input element that is accessible for screen readers.

Summary

In this lab, we learned how to use the HTML <label> tag to add captions or label text to HTML elements on a webpage. The <label> tag is useful for improving accessibility and increasing the clickable area of an element. We also learned how to associate labels with form elements and style labels using CSS.