Related Articles

Related Articles

HTML | placeholder Attribute
  • Difficulty Level : Basic
  • Last Updated : 22 Jul, 2019

The placeholder attribute specifies a short hint that describes the expected value of an input field/text area. The short hint is displayed in the field before the user enters a value.

Syntax:

<element palceholder="">

Elements: This method can have following attributes:

  • <input>
  • <textarea>

Attribute: The attribute for each of the above element is placeholder.

Example: With <input> element



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="font-size:25px;font-style:italic;">
            GeeksforGeeks
        </h1>
        <h2 style="font-size:25px;font-style:italic;">
          Placeholder Attribute in Input Element
        </h2>
        <form action=" ">
            <input type="text" name="fname" 
                             placeholder="First name">
            <br>
            <input type="text" name="lname" 
                              placeholder="Last name">
            <br>
            <input type="submit" value="Submit">
        </form>
  </center>
</body>
  
</html>

chevron_right


Output:

Example: With <textarea> element

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="font-size:25px;font-style:italic;">
          GeeksForGeeks
        </h1>
        <h2 style="font-size:25px;font-style:italic;">
          Placeholder Attribute in Textarea Element
        </h2
        Give your Intro:
        <textarea rows="4" cols="40" 
          placeholder="Write something here about yourself...">
        </textarea>
  </center>
</body>
  
</html>

chevron_right


Output:

Supported Browsers: The browser supported by placeholder Attribute are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :