Computing

HTML Label Tag Examples

See the HTML Label Tag in Action

The label tag is a very useful tag for creating HTML forms because it makes those forms much more usable. But reading about how the label tag can help is very different from seeing how it affects your forms. The below examples will show you a form element without a label and with one, so that you can see the difference in how the web browsers display the contents.

A Simple Form With and Without Labels
A Checkbox With and Without Labels
A Form in a Table With and Without Labels
Styling a Form Element with Labels

A Simple Form, with No Labels

Try clicking on the field names ("First Name:", etc.) in both examples and see what happens.

First Name:
Last Name:
Comments:

The Same Form, with Labels Added

First Name:
Last Name:
Comments:

Return to the The HTML Label Tag article.

Checkbox Without Labels

What do you need to click to get the checkbox to be checked in both examples?

I use labels all the time:

Checkbox With Labels

I use labels all the time:

Return to the The HTML Label Tag article.

Form Layout in a Table Without Labels

Tables are a great way to lay out your forms, but labels make them much easier to use.

First Name	Last Name	Email

Form Layout in a Table With Labels

The labels make it easier to click and navigate between the different form elements.

First Name	Last Name	Email

Return to the The HTML Label Tag article.

Styling a Form with Labels

This example shows how you can take one of the above form elements and add simple CSS to it to make it look nicer.

First Name:

Return to the The HTML Label Tag article.

This article is part of the HTML Forms Tutorial

Jennifer Kyrnin
Web Design / HTML Guide

Sign up for My Newsletter

Discuss in my forum