What is Labels and placeholders in HTML?

HTMLmarkup~5 mins

Labels and placeholders in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Labels and placeholders help people understand what to type in a form. They make forms easier and faster to fill out.

When you want to tell users what information to enter in a text box.

When you want to improve accessibility for screen readers.

When you want to make your form clear and user-friendly.

When you want to show example text inside an input field.

When you want to connect a text description to a form control.

Syntax

HTML

<label for="inputId">Label text</label>
<input id="inputId" type="text" placeholder="Example text">

The for attribute in <label> must match the id of the input.

The placeholder attribute shows example text inside the input box.

Examples

This example shows a label linked to a text input with a placeholder.

HTML

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

Here, the label is for an email input with a placeholder showing an example email.

HTML

<label for="email">Email:</label>
<input id="email" type="email" placeholder="you@example.com">

This input is for a password with a placeholder giving a hint about length.

HTML

<label for="password">Password:</label>
<input id="password" type="password" placeholder="At least 8 characters">

Sample Program

This is a simple sign-up form. Each input has a label linked by for and id. Placeholders show example text inside inputs. Small text below inputs gives extra help. The form is easy to read and use.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Labels and Placeholders Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 400px;
      margin: auto;
    }
    label {
      display: block;
      margin-top: 1rem;
      font-weight: 600;
    }
    input {
      width: 100%;
      padding: 0.5rem;
      margin-top: 0.25rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Sign Up Form</h1>
  <form>
    <label for="username">Username</label>
    <input id="username" type="text" placeholder="Choose a username" aria-describedby="usernameHelp">
    <small id="usernameHelp">Your unique username to log in.</small>

    <label for="email">Email Address</label>
    <input id="email" type="email" placeholder="you@example.com" aria-describedby="emailHelp">
    <small id="emailHelp">We will never share your email.</small>

    <label for="password">Password</label>
    <input id="password" type="password" placeholder="At least 8 characters" aria-describedby="passwordHelp">
    <small id="passwordHelp">Make it strong and secure.</small>

    <button type="submit" style="margin-top:1rem; padding:0.5rem 1rem; font-size:1rem;">Sign Up</button>
  </form>
</body>
</html>

OutputSuccess

Important Notes

Always use <label> with the for attribute to improve accessibility.

Placeholders should be short hints, not full instructions.

Labels stay visible, placeholders disappear when typing starts.

Summary

Labels describe what the input is for and help screen readers.

Placeholders show example text inside input fields as a hint.

Use both together to make forms clear and easy to use.