HTML - placeholder Attribute

The HTML placeholder attribute is used to define a short hint that helps the user with data entry. It appears when there is no value in the input field and automatically disappears when the user starts entering a value in the field.

The hint is just a sample value or a brief description of the expected format. The placeholder attribute works with the search, text, number, email, password input types.

Syntax

Following is the syntax of the HTML placeholder attribute −

<tag placeholder = "value"></tag>

Example

In the following example, we are going to use the placeholder attribute with the input type=text.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'placeholder' attribute</title>
   <style>
      input {
         width: 200px;
         padding: 7px;
      }

      button {
         padding: 7px;
      }
   </style>
</head>
<body>
   <!--HTML 'placeholder' attribute-->
   <p>Example of the HTML 'placeholder' attribute</p>
   <form>
      <h3>Login page</h3>
      <input type="text" placeholder="Username(email or mobile)">
      <br>
      <br>
      <input type="password" placeholder="Password(Abc#2245)">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input field mentioned with placeholder along with a click button on the webpage.

Example

Consider the another scenario, where we are going to use the placeholder attribute with the textarea field.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'placeholder' attribute</title>
   <style>
      input {
         width: 200px;
         padding: 7px;
      }

      button {
         padding: 7px;
      }
   </style>
</head>
<body>
   <!--HTML 'placeholder' attribute-->
   <p>Example of the HTML 'placeholder' attribute</p>
   <form>
      <textarea cols="30" rows="10" placeholder="Write your feedback...."></textarea>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the textarea field along with a click button on the webpage.

html_attributes_reference.htm
Advertisements