Displaying Labels Above Input Fields - J Query

Problem
A page layout doesn't’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 is n’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.
The less common example is a space-constrained login form, consisting of username and password fields. The password field needs to display the watermark as plain text, while the password to be entered (or prefilled by the browser) must still be obfuscated.
In both cases, the watermark shouldn’t be submitted as a value.
The watermark plugin solves this problem by displaying a label element above the actual input, hiding the label when the input gets focus, and displaying it again when the empty field is blurred.
Using a label above the field, instead of modifying the text inside the field, makes this solution also work with password fields and avoids having to clear watermark values on submit.
The default usage calls the watermark plugin method and passes the value to display:

Discussion

Instead of passing the value to the plugin, it can also be specified as metadata, using the metadata plugin, in the markup, which is more practical when several watermarks are used or when those are generated on the server side:

Metadata has the drawback that it doesn’t build on progressive enhancement. To improve that, label elements should be used as for a normal form, with the plugin positioning the labels at the right position:

In this case, the plugin is applied to the labels instead of the inputs:

The plugin then uses the for attribute of each label to find the associated input and position it above the input.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics