Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Placeholder vs Value Attributes in HTML

  • Last Updated : 12 Aug, 2021

Placeholder Attribute:The placeholder attribute specifies a short hint that describes the expected value of an input field/textarea. The short hint is revealed in the field before the user enters a value. It is just a temporary hint and has nothing to do with logical executions in the backend.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<input placeholder = "text"> 
<textarea placeholder = "text"> </textarea>

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Input Placeholder</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" placeholder="Enter your name" />
        <br><br>
          
        <label for="Age">Your age:</label>
        <input name="Age" placeholder="Enter your age" />
        <br><br>
          
        <button type="button">Submit</button>
    </form>
</body>
  
</html>

Output:



Value Attribute: The value attribute is used to set the default value to <input> elements. It represents the value related to the input and the content in the value set is sent to the server on form submission. If none of the manual values gets inserted, then the default value will get passed on submission.

Syntax:

<input value = "text">

Usage of value attributes:

1. Definition of text in buttons: For “button”, “reset”, and “submit” types of input tags, the text given in the button appears to be the text on the button.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" value="Your name" />
        <br><br>
          
        <label for="Age">Your age:</label>
        <input name="Age" value="18" />
        <br><br>
          
        <input type="button" value="Submit" />
    </form>
</body>
  
</html>

Output:



 

2. Defining default values: For “text”, “password”, and “hidden” types of input tag, the text is given as the default value. If no manual text is given, the default value will be taken into consideration during submission.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <form>
        <label for="Name">Name:</label>
        <input name="Name" type="text" 
            value="Your name" /><br><br>
  
        <label for="Password">Enter password:</label>
        <input name="Password" type="password" 
            value="12345" /><br><br>
              
        <input type="button" value="Submit" />
    </form>
</body>
  
</html>

Output:

Difference between placeholder and value attributes:

Placeholder Attribute

Value Attribute

The placeholder attribute specifies a short hint that describes the expected value (type of value) of an input field.The value attribute specifies the default value of an input field. If no value is specified,then default one will be taken during form submission. 
The short hint is revealed in the field before the user enters a value.You need to erase the value and then add the new value.
It is just a temporary hint and has nothing to do with logical executions in the backend.It is the default value and has much to do with logical executions in the backend. This means, when the value is not specified, then the default one will be taken during form submission. 
If none of the manual values gets inserted, then an empty value will get passed on submission.If none of the manual values gets inserted, then the default value will get passed on submission.
The actual value of the placeholder is empty. Once the user does enter something, the placeholder is no longer needed.So if you pre-populate the value via the HTML attribute and then submit the form, that’s the value that gets submitted back to your server.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!