HTML & CSS Interview Question #36

What is the difference between placeholder and value in an input?

Forms, Validation, Metadata, Media, Responsive Images & Accessibility Junior Beginner

Quick Interview Answer

value represents the current value of a form control and can be submitted with the form. placeholder provides a short hint displayed when an applicable input is empty.

Detailed Explanation

value represents the current value of a form control and can be submitted with the form. placeholder provides a short hint displayed when an applicable input is empty.

Placeholder text is not a replacement for a label because it can disappear after the user enters data and may not provide a reliable accessible name. Use a persistent label and treat placeholder as optional supporting guidance.

Code Example

<label for="search">Search products</label>
<input id="search"
       name="q"
       type="search"
       placeholder="e.g. wireless charger"
       value="">