In-field labels are one of the recent design adaptations for HTML forms. Instead of placing a label and corresponding element next to each other, placing the label inside the input element itself makes it looks elegant and conveys the expected input value more easily. jQuery can be very helpful in creating such in-field labels. There are already few jQuery libraries available which can be used for this purpose. But, here I’m trying to show a rather simple, image based in-field labeling technique using pure css and jquery functions only. This may not be very elegant technique but, it does serves the purpose :-P
Here are the steps involved in trying out this technique.
Here are the steps involved in trying out this technique.
- Create a html file (let’s call it test.html) with the contents below.
<html>
<head>
<title>Welcome to Testbed</title>
<script type=’text/javascript’ src=”jquery.js”></script>
<style>
.inline-bg-image {
background-image: url(‘passwd.png’);
background-repeat: no-repeat;
background-position: +2px +2px;
}
</style>
<script type=’text/javascript’>
$(document).ready( function() {
$(‘#inline-image’).click(function() {
$(‘#inline-image’).removeClass(‘inline-bg-image’);
});
$(‘#inline-image’).focusout(function() {
if(! $(‘#inline-image’).val()) {
$(‘#inline-image’).addClass(‘inline-bg-image’);
}
});
});
</script>
</head>
<body>
<p>Welcome user :-)</p>
<input id=’inline-image’ style=’height: 32px;’
size=22 type=password value="" class=’inline-bg-image’/>
</body>
</html> - Create a PNG image called passwd.png with height of 24px. For example, you can type ‘Password’ in Inkscape, select the text and export it as PNG.
- Download the latest jQuery library from www.jquery.com and rename it as jquery.js
- Create an empty folder inside your accessible webroot (Ex., ~/public_html directory in *IX systems) and put the files, test.html, passwd.png and jquery.js into it