We will be needing a js file and a page containing form input field to do this task.
What we are planning is, The input field contains default value. Onclick default value disappears and allows the user to insert text.
If the user types anything it remains there but if he does not write anything and clicks at next input field than the default value reappears in previous field.
JS file Code:
function remName(a, b){
if(a.value==b){
a.value='';
}else if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}
function chkName(a, b){
if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}Two functions are controlling the event as above.
Call the js file in the page and define input fields and put some code like this.
Input Fields:
<font color="#ff0000"><code><input name="txtName" type="text" id="txtName" onfocus="remName(this, 'Name');" onblur="chkName(this, 'Name');" value="Name">
<input name="txtEmail" type="text" id="txtEmail" value="Email" onfocus="remName(this, 'Email');" onblur="chkName(this, 'Email');"></code></font>
and so on...
How to draw a border with caption around the data or form.
<fieldset>
<legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
If there is no border around the input form, your browser is too old.
<body onLoad="frm.name.focus();">
Onload, form field name will be focused. name is the first field value. frm is the form name here.
This is helpful when you want to give user facility to autoselect the field in form instead of go and click in the field to start typing in the form.
While clicking in input text field you can change its background color.
Place this code in head of your page.
var highlightcolor="#BFB9AE"
var ns6=document.getElementById&&!document.all
var previous=''
var eventobj
var intended=/INPUT|TEXTAREA|SELECT|OPTION/
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}
and
This is the input text code
<input name="email" id="email" type="text" onKeyUp="highlight(event)" onClick="highlight(event)">
Dont forget to use script tags for head section jaascript part.
Change the color value in script accordingly.
