placeholder

placeholder attribute

The placeholder attribute offers a brief hint indicating the expected value for an <input> or <textarea> field. It appears before the user inputs any value and vanishes as soon as they begin typing.

Syntax

<input placeholder="text">

Example

<h1>The input placeholder attribute</h1>
<form>
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit">
</form>

Definition and Usage

The placeholder attribute provides a brief hint about the expected value of an input field (e.g., a sample value or format description).

This hint is shown in the input field before the user enters any data.

Key Points

Used in <input> and <textarea> fields, it offers a visual cue for the expected input. The hint disappears when the field is focused or when the user starts typing.

Values

• text
  • A string value that appears inside the input field when it is empty.

Applies To

The placeholder attribute can be used on the following HTML elements.

• <input>
• <textarea>

Conclusion

The placeholder attribute provides a brief, temporary hint within an input or textarea field to guide users on the expected input. It disappears once the user starts typing. This attribute improves user experience by offering visual cues for various input types.