HTML Labels & Placeholders

Label Tag

The <label> tag is used to define a label for an input element. When clicked, the label focuses the associated input field.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
            

The for attribute in the label must match the id of the input to link them.

Placeholder Attribute

The placeholder attribute displays temporary text in the input field. It gives a hint about what to enter.

<input type="text" name="name" placeholder="Enter your full name">
            

Placeholders disappear when the user starts typing and should not be used as a replacement for labels.

Example: Using Labels and Placeholders

<form action="submit.php" method="post">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" placeholder="John Doe"><br><br>

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

  <input type="submit" value="Submit">
</form>
            

Best Practices

• Always use labels to improve form accessibility.
• Placeholders should be short and helpful hints, not detailed instructions.
• Don’t rely solely on placeholders—they vanish once the user starts typing.