Label inside text area

[iashraf]

Hey, im new here :)

I was wondering how to put a label inside the textbox, such as seen on www.digg.com (the top search bar) it sais "search" in it, when it is clicked, the search disapears. I have been told that this is to do with labels?

_{Any help and code would be appreciated ;)}

[AWildman]

Welcome!

Well, looking at their code, I don't know exactly why they did it that way, but I would do something like:

<input type = "text" name = "searchbox" value = "search">

Search will show up in the text box.

[iashraf]

Thanks for the very swift reply.

I know of this Value="" method, but it doesnt serve the same purpose. With this method the user has to erase this text from the textarea before they type their own in. With the Digg method, when the inner of the textarea is clicked, the "search" automatically disappears. And when the textarea is left and you click outside of it, the "search" re-appears.

[tedster]

Hello iashraf, and welcome to the forums

They use the label element over at digg:

digg code:

<form action="/search" method="get" name="thisform" id="top-search">
<label for="top-keywords" accesskey="2" class="inside">search</label>
<input type="text" name="search" id="top-keywords" value="" />
<input type="submit" name="submit" id="search-submit" value="Submit" />
</form>

W3C information:

The LABEL element may be used to attach information to controls.
Each LABEL element is associated with exactly one form control.

The for attribute associates a label with another control explicitly:
the value of the for attribute must be the same as the value of the
id attribute of the associated control element.

[w3.org...]

[iashraf]

Hi Tedster,

I figured how to do this, Here is how:

FIrstly create a .js file called whatever (in this case - "labels.js") Inside put:

addEvent(window,"load",labels_init);function labels_init(){if(document.getElementById&&document.styleSheets){try{var s=document.styleSheets[document.styleSheets.length-1];addStyleRule(s,"label.inside","position:absolute; visibility:hidden;");for(var i=0,label=null;(label=document.getElementsByTagName("label")[i]);i++)
{if(label.className=='inside'){label_init(label);}}
addEvent(document.forms[0],"submit",labels_uninit);}
catch(e){}}}
function labels_uninit(e){if(document.getElementById&&document.styleSheets){for(var i=0,label=null;(label=document.getElementsByTagName("label")[i]);i++)
{var el=document.getElementById(label.htmlFor);if(el&&el.value==el._labeltext)label_hide(el);}}}
function label_init(label){try{var el=document.getElementById(label.htmlFor);var elName=el.nodeName;var elType=el.getAttribute("type");if(elName=="TEXTAREA"¦¦(elType=="text"¦¦elType=="password")){el._labeltext=label.firstChild.nodeValue;el._type=el.getAttribute("type");addEvent(el,"focus",label_focused);addEvent(el,"blur",label_blurred);label_blurred({currentTarget:el});}else{label.style.position="static";label.style.visibility="visible";}}
catch(e){label.style.position="static";label.style.visibility="visible";}}
function label_focused(e){e=fix_e(e);var el=e.currentTarget;if(el.value==el._labeltext)el=label_hide(el)
el.select();}
function label_hide(el){if(el._type=="password")el=label_setInputType(el,"password");el.value="";return el;}
function label_blurred(e){e=fix_e(e);var el=e.currentTarget;if(el.value=="")el=label_show(el);}
function label_show(el){if(el._type=="password")el=label_setInputType(el,"text");el.value=el._labeltext;return el;}
function label_setInputType(el,type){if(navigator.appName=="Microsoft Internet Explorer"){var newEl=document.createElement("SPAN");newEl.innerHTML='<input type="'+type+'" />';newEl=newEl.firstChild;var s='';for(prop in el){try{if(prop!="type"&&prop!="height"&&prop!="width")newEl[prop]=el[prop];}
catch(e){}}
addEvent(newEl,"focus",label_focused);addEvent(newEl,"blur",label_blurred);el.parentNode.replaceChild(newEl,el);return newEl;}else{el.setAttribute("type",type);return el;}}
function addEvent(obj,evType,fn){if(obj.addEventListener){obj.addEventListener(evType,fn,true);return true;}else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}else{return false;}}
function addStyleRule(stylesheet,selector,rule){if(stylesheet.addRule)stylesheet.addRule(selector,rule);else{var index=stylesheet.cssRules.length;stylesheet.insertRule(selector+"{"+rule+"}",index);}}
function fix_e(e){if(!e&&window.event)e=window.event;if(!e.currentTarget&&e.srcElement)e.currentTarget=e.srcElement;if(!e.originalTarget&&e.srcElement)e.originalTarget=e.srcElement;return e;}

Next inside the CSS file, I put:

label.inside {
color: #145693;
position:absolute;
visibility:hidden;
}
input#top-keywords {
width:98px;
}

And the HTML file looks as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Label Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
<link rel="stylesheet" href="global.css" type="text/css" media="screen" />
<script type="text/javascript" src="labels.js"></script>
</head>
<body>
<form action="{U_SEARCH}" method="get">
<label for="top-keywords" accesskey="2" class="inside">search</label>
<input name="search_keywords" type="text" id="top-keywords" value="" accesskey="s" />
<input type="image" src="spacer.gif" style="width:20px;height20px;border0;" title="SEARCH!" value="{L_SEARCH}" />
</form>
</body>
</html>

Thanks for the help!

[iashraf]

Ugh, the [code] Tags didn't work :/

[neither1nor0]

there is an easier way:

just add:

onclick="this.value='' "

-flo