Placeholder vs Value Attributes in HTML

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:
<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
HTML-Attributes
HTML-Questions
Difference Between
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between Synchronous and Asynchronous Transmission
Difference Between Method Overloading and Method Overriding in Java
Difference Between Go-Back-N and Selective Repeat Protocol
Time complexities of different data structures
Difference between Compile-time and Run-time Polymorphism in Java
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property