Placeholder Text for Fields

Some forms are much simpler than contact forms. In fact, many sites incorporate a single-field form on every single page—a search function for the site. The usual trappings of a form—field labels, submit buttons, and the text—are cumbersome for such a small, single-purpose part of the page. We can use jQuery to help us slim down the form while retaining its functionalities.

The label element for a form field is an essential component of accessible websites. Every field should be labeled, so that screen readers and other assistive devices can identify which field is used for which purpose. Even in the HTML source, the label helps describe the field:

<form id="search" action="search/index.php" method="get">
  <label for="search-text">search the site</label>
  <input type="text" name="search-text" id="search-text" />
</form>

Without styling, we see the label right before the field:

While this doesn’t take up much room, in some site layouts...