Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

11. HTML Form Enhancements with Plugins > 11.8. Displaying Labels Above Input F...

11.8. Displaying Labels Above Input Fields

Problem

A page layout doesn’t have enough space in front of an input element to display a label, the function of the input is obscured, and a title alone isn’t visible enough.

Search and login forms are often subject to space constraints. There just isn’t enough visual space to display a label in front of the input field. Though without the label, the function of the input is obscured. A title attribute isn’t enough to fix the problem, because it’s rather hard to spot, requiring the user to mouse over the input and rest there.

Solution

The most common example, the search field, can be solved by displaying “search” inside the field with a light gray to emphasize that it’s just a label, not the actual text to search for. When focusing the field, the text is removed. When blurring the field, the text is returned, unless something else was entered.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint