Add Form Field Hints using JavaScript

Web forms are common element on the Internet.
They allow user to enter data (like credit card details) or retrieve data (like advance search on searching engines).

E-commerce websites often spend a good amount to get their web forms in search results (most likely on first page or in first place).
But there is no use if people find the form but form is not user-centric or confusing.

So if we spend a little effort on forms we could make them user-friendly or interesting.
Lets give the user feedback by showing hints for each input field.
Today I am going to explain a tutorial where by using a small JavaScript we can simply put hints inside form fields.

VW6N2XGJW3SS

HTML Part

Let’s create a simple form using definition list.

<div id=”hform”>

<dl>

<dt><label for=”firstname”>First Name:</label></dt>

<dd><input name=”firstname” id=”firstname” type=”text” /><span class=”hint”>Plz put your first name here.<span class=”hint-pointer”>&nbsp;</span></span></dd>

<dt><label for=”lastname”>Last Name:</label></dt>

<dd><input name=”lastname” id=”lastname”type=”text” /><span class=”hint”>Plz put your last name here.<span class=”hint-pointer”>&nbsp;</span></span></dd>

<dt><label for=”email”>Email:</label></dt>

<dd><input name=”email” id=”email” type=”text” /><span class=”hint”>The thing with the @ symbol and the dot com at the end.<span>&nbsp;</span></span></dd>

<dt><label for=”year”>Date of birth:</label></dt>

<dd><select id=”year” name=”year”>

<option value=””>YYYY</option>

<option value=”1990″>1990</option>

<option value=”1991″>1991</option>

<option value=”1992″>1992</option>

<option value=”1993″>1993</option>

</select>

<span>Pick a year to be born in.<span class=”hint-pointer”>&nbsp;</span></span>

</dd>

<dt><label for=”username”>Username:</label></dt>

<dd><input name=”username” id=”username”type=”text” /><span class=”hint”>Between 4-12 characters.<span class=”hint-pointer”>&nbsp;</span></span>

</dd>

<dt><label for=”password”>Password:</label></dt>

<dd><input name=”password” id=”password” type=”password” /><span class=”hint”>Between 5-11 characters.<span class=”hint-pointer”>&nbsp;</span></span></dd>

<dt>&nbsp;</dt>

<dd><input type=”submit” value=”Submit” /></dd>

</dl>

</div>

CSS Part

input:focus, select:focus, textarea:focus {background:#c6d8cf;color:#000;}
body{ font:12px Arial, Helvetica, sans-serif;}
#hform{ width:400px; margin:0 auto;}
dl {position: relative; width: 350px;float:left;background-color:#B7DBC9; padding:10px;}
dt { clear: both; float:left; width:140px;padding: 4px 0 2px 0;text-align: left;}
dd {float: left;width:190px;margin: 0 0 8px 0;padding-left: 6px;}
/* css for hint */
.hint {display: none;position: absolute; right: -250px; width: 200px; margin-top: -4px; border: 1px solid #3ca289; padding: 10px 12px; background: #cffff4 url(pointer.gif) no-repeat -10px 5px;}
.hint .hint-pointer { width: 10px; height: 19px; position:absolute; left:-10px; top: 5px; background: url(pointer.gif) left top no-repeat;}

JavaScript Part

just add this function in to your HTML head.

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function prepareInputsForHints() {
var inputs = document.getElementsByTagName(“input”);
for (var i=0; i
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName(“span”)[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName(“span”)[0].style.display = “inline”;
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName(“span”)[0].style.display = “none”;
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName(“select”);
for (var k=0; k

if (selects[k].parentNode.getElementsByTagName(“span”)[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName(“span”)[0].style.display = “inline”;
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName(“span”)[0].style.display = “none”;
}
}
}
}
addLoadEvent(prepareInputsForHints);

To see a Live demo. Click here
To download a demo file. Click here

Cheers!!
Joginder Poswal

Tags: , ,

This entry was posted on Thursday, December 31st, 2009 at 4:21 am and is filed under CSS, Design, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Add Form Field Hints using JavaScript”

  1. lalit Says:

    Very cool. Thanks for the write up and examples. Love the space one!

  2. jposwal Says:

    thanks lalit

Leave a Reply

This blog is kept spam free by WP-SpamFree.

 

Get Adobe Flash player