Placeholder vs Value Attributes in HTML

Last Updated : 15 May, 2023

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:

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

Example 1: In this example, we will see the use of placeholder attribute.

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 2: In this example, we will see the use of value attribute.

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 3: In this example, we will see the use of default values.

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.