Hi. I'm working on a simple script that takes the value of a <label> and put's it in to the associated <input>. The code isn't commented very well but it's pretty straightforward.

So the method I use is
  1. Find all labels
  2. Use the contents of the for attribute to find the input element (via getElementById)
  3. Looks for the classname that flags this behaviour
  4. Create a new attribute for later use with type=password
  5. Hide the label with CSS through dom
  6. Set the onfocus event on the input to empty it if the string is == the label text
  7. Set the onblur event to replace an empty input with the label text


So like I said this is pretty straightforward.

I'm no hero javascript programmer so I guess there might be a better method but for starters I'd like to get this working under IE.

Feel free comment on my coding too if you don't mind.

Notice that I use innerHTML to get the <label> content - know a better idea?

Also notice that for each onblur onfocus event I need to loop through the labels until I find the label associated with the input to get the labels content.

I tried to avoid that by using an array that's set when I initialize the script like so:

var labelText = new Array();

and then set the variable when I loop by doing var labelText[i] = label[i].innerHTML; but I always got an error.


labels.js
Code JavaScript:
function labelsInit() {
 
	var label = document.getElementsByTagName('label');
 
	for(var i=0;i<label.length;i++) {
 
 
	// Get the input element
	var labelText = label[i].innerHTML;
	var input = document.getElementById(label[i].getAttribute("for"));
 
	// Only touch the elements flagged with a class
	if(input.className.match('labelslabels')) {	
 
		if(input.type == 'password') { 
			input.type = 'text';
			input.setAttribute('labelspassword', 'true')
		 }
 
		input.value = labelText;
		if(input.getAttribute('title') == null) { input.setAttribute('title', labelText); }
 
		// Hide the label
		label[i].style.display = 'none';
 
		input.onfocus = function() {
			var labels = document.getElementsByTagName('label');
			var labelText;
 
			for(i=0;i<labels.length;i++)
			{
				if(labels[i].getAttribute("for") == this.id)
				{
					labelText = labels[i].innerHTML;
					break;
				}
 
			}
 
			if(this.value.match(labelText))  { this.value = ''; }
 
			if(this.getAttribute('labelspassword').match('true')) {
				this.type = 'password';
			}
 
		}
 
		input.onblur = function() {
			var labels = document.getElementsByTagName('label');
			var labelText;
 
			for(i=0;i<labels.length;i++)
			{
				if(labels[i].getAttribute("for") == this.id)
				{
					labelText = labels[i].innerHTML;
					break;
				}
 
			}
 
			if(!this.value) { 
				this.value = labelText;
				if(this.getAttribute('labelspassword').match('true')) { this.type = 'text'; }
			 }
		}
	}
}
 
 
}

labels.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Labels.js example</title>
<script src="labels.js"></script>
</head>
<body onload="labelsInit()">
<form>

<label for="username">Username: </label>
<input type="text" id="username" name="username" class="labelslabels"  /><br/>

<label for="password">Password: </label>
<input type="password" id="password" name="password" class="labelslabels" /><br> 

</form>
</body>
</html>
So do you think you can help me? I intent to give the code to the public domain when I'm done with it.