Again about forms: default values

jQuery provides almost unlimited possibilities for enriching the user interface, and the most interesting is often associated with controls on the pages, in particular with forms.

Modern interfaces often strive for minimalism. With the elegance of the design, web technologists strive for the elegance of the decisions made in the implementation process. I often develop interfaces, layout and client programming - and I am constantly looking for new solutions for old problems.

The article will discuss the values ​​in the default form fields, when the name of the field is its original content. And also about the elegant solution of this problem in practice.
')


Recently, I have more and more often come across forms similar to this web:


This is a good visual solution, but with obvious and not obvious features.

About searches

First, there is often explicitly inscribed (generated?) Javascript-code in the html-markup that handles onfocus / onblur events, and sometimes there are events for each element individually in the external javascript file, which also shows their default values. For example, when you lose focus:

$( "input#name" ).blur( function (){ $( this ).attr( "value" , " " )})

* This source code was highlighted with Source Code Highlighter .

Secondly, after the start of entry into such a field, one can’t see what the field is after all (of course, rarely large forms or questionnaires are designed in this way, but still it’s a drawback). It remains to erase the value so that the javascript handler worked, and the default value is returned.

Third, the currently popular semantic, convenience, separation of presentation and code - all this led to the fact that many of the studied methods simply swept aside. Why write the default field code in javascript?

In the network, people invented different bicycles, varying degrees from the options discussed above. Well, I thought, perhaps one bike will be more.

About the decision

Everything turned out to be very simple. After all, there is a very convenient attribute title that will help the user to know which field he is in when hovering over it with the mouse:


“So, stop! This is also the repository for the default value! ”- this was how the problem was solved. Just a few lines of code:

jQuery( document ).ready( function (){
$( "input, textarea" ).focus( function (){
if ($( this ).attr( "value" ) == $( this ).attr( "title" ))
$( this ).attr( "value" , "" )
});

$( "input, textarea" ).blur( function (){
if ($( this ).attr( "value" ) == "" )
$( this ).attr( "value" , $( this ).attr( "title" ))
});
});

* This source code was highlighted with Source Code Highlighter .

Just a few lines of code solve this problem in the best way I can imagine. Nothing superfluous, no duplication, simple, tasty, semantic. I can immediately say that saving the default value is a bad option. Updating the page does not always entail updating the form - a feature of many browsers who care about the safety of user data.

I hope that the method will be useful to the same seeker as I was some time ago.

UPD: Please do not accuse me of offering a cure-all. I did not say that. Refine, add field types, check entered values, and so on — all this is beyond the scope of the article and can be implemented by those in need on their own. I showed an approach to solving the problem.