HTML placeholder Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

placeholder

HTML AttributeThis attribute is supported by all modern browsers.

Updated 26th March 2024

Description

The HTML placeholder attribute provides a short hint that describes the expected value of an input field (e.g., a sample value or a brief description of the expected format). This hint appears within the input field before the user enters a value and disappears when the user starts typing. The placeholder attribute can be used with various form elements, such as <input>, <textarea>, and sometimes <select>, depending on the browser support. It's especially useful for providing guidance to the user on what information is required or the format it should be in, without cluttering the UI with additional labels or text outside the input field. This attribute is part of the HTML5 specification and is widely supported by modern web browsers.

Syntax

<input placeholder="text">

Values

textString value. Text to display inside the input field when it is empty.

Applies To

Example

HTML

<form action="formscript.php">

  <label for="fname">First Name:</label><br>

  <input type="text" id="fname" name="fname" placeholder="Enter your first name"><br><br>



  <label for="lname">Last Name:</label><br>

  <input type="text" id="lname" name="lname" placeholder="Enter your last name"><br><br>



  <label for="email">Email:</label><br>

  <input type="email" id="email" name="email" placeholder="john.doe@example.com"><br><br>



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

</form>

Result

Open in editor

Browser Support

The following information will show you the current browser support for the HTML placeholder attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.

This attribute is supported by all modern browsers.