Inline hints method 2: The placeholder attribute

Home | Full results | Github page

Some authors use the placeholder to provide hints to users. Even though the placeholder content is often announced along with the form control, this method is not recommended. The hint disappears as soon as users interact with the form control, and the placeholder text is often displayed in a very soft colour.

Example

Markup

<div class="form-container">
  <label class="form-label" for="hint1">Email</label>
  <input class="form-input" id="hint1" type="text" placeholder="Add your email address">
</div>

Results

Home | Full results | Github page