Placeholder vs Value Attributes in HTML (original) (raw)

Last Updated : 23 Jul, 2025

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:

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

HTML `

    <label for="Age">Your age:</label>
    <input name="Age" placeholder="Enter your age" />
    <br><br>
    
    <button type="button">Submit</button>
</form>

`

Output:

Value Attribute: The value attribute is used to set the default value to 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:

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 `

    <label for="Age">Your age:</label>
    <input name="Age" value="18" />
    <br><br>
    
    <input type="button" value="Submit" />
</form>

`

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 `

    <label for="Password">Enter password:</label>
    <input name="Password" type="password" 
        value="12345" /><br><br>
        
    <input type="button" value="Submit" />
</form>

`

Output:

Difference between placeholder and value attributes: