Man Filling out Form

Labels Inside Form Text Inputs With Javascript

Form text inputs play some role in practically every website. It could be as simple as a search box or as complicated as a medical questionnaire. Sometimes having a label and explanation separate from the input works well. Other times there will be space or aesthetic requirements, specific formats data needs to be entered in, or slightly ambiguous fields that could use clarification. Additionally, one may want a default value for a text input to be automatically filled. In such cases, it could be useful to place the label or additional instruction [i]inside[/i] the text input itself.

1. Default Value

<form name="TestForm" id="TestForm" action="" method="Post">
<input name="name" id="name" type="text" value="Your Name" />
<input name="record" id="record" type="submit" value="Record Name" />
</form>

This creates a form called “TestForm” with a single input for a name. By setting the value in Line 2, a default value of “Your Name” is automatically filled in. Unfortunately, while it seems to satisfy the goals, it has a fatal flaw that becomes apparent when you click the field: it doesn’t disappear, forcing you to manually delete it before entering real data.

2. Clear Out The Field On Focus

<form name="TestForm" id="TestForm" action="" method="Post">
<input name="name" id="name" type="text" value="Your Name" onfocus="if (this.value == this.defaultValue) {this.value=''}" />
<input name="record" id="record" type="submit" value="Record Name" />
</form>

In Line 2, an onfocus was added. When focus is brought to the name field, either through mouse clicking or tabbing, it will check to see what the value is. If the value is the default value, then it will be erased. If not, it will leave the current input. It is very important to have this check instead of simply setting the value to nothing. Otherwise, if a user types information in and comes back to alter it, it won’t be erased entirely. One problem does crop up with this, though: if a user brings focus to the field, but doesn’t fill anything in before moving on, the field would now be unlabeled when the user goes back to it.

3. Peekaboo

<form name="TestForm" id="TestForm" action="" method="Post">
<input name="name" id="name" type="text" value="Your Name" onblur="if(this.value == '') { this.value=this.defaultValue}" onfocus="if (this.value == this.defaultValue) {this.value=''}" />
<input name="record" id="record" type="submit" value="Record Name" />
</form>

An onblur check can be added to Line 2. When the focus leaves the field, it will check whether the field is empty. If so, it will revert back to the default value. Seems like the perfect deal, right? Not quite yet. Since we’re using this as a label and not true default information, we don’t want it being submitted and recorded as such if the user doesn’t enter anything.

4. Quick Validation – Clean the Input

<script type="text/javascript">
function scrub_input ( ) {
	if ( document.TestForm.name.value == "Your Name" ){
		document.TestForm.name.value = ""
	}
}
</script>
<form name="TestForm" id="TestForm" action="" method="Post" onsubmit="scrub_input();">
<input name="name" id="name" type="text" value="Your Name" onblur="if(this.value == '') { this.value=this.defaultValue}" onfocus="if (this.value == this.defaultValue) {this.value=''}" />
<input name="record" id="record" type="submit" value="Record Name" />
</form>

Many things can be done within the realm of validation. Alerts can be sent to the user and submission can be halted until information is properly filled in, for example. Here, for simplicity, we’re simply going to clean out any default information that’s been sent in. This would make more sense as part of a larger form than our single input here, but it’s good for illustrative purposes.

The first portion defines the javascript function that will do the cleaning. The function itself, scrub_input(), is contained within script tags, and the whole thing should be placed within the page head. When run, the function will check the value of the name input of the TestForm form within the document, which is identified as such by document.TestForm.name.value. If it is the default value of “Your Name”, it will redefine it to be an empty string before submitting. To call upon this function at the appropriate time, an onsubmit portion was added to the first line of the form.

5. Adding A Bit Of Elegance – The Final Form

<script type="text/javascript">
function clean_form(id, blur=false){
	if (blur != true){
		if ( document.getElementById(id).value == document.getElementById(id).defaultValue ){
			document.getElementById(id).value = "";
		}
	}
	else if (document.getElementById(id).value == ""){
			document.getElementById(id).value = document.getElementById(id).defaultValue;
	}
}

function scrub_input ( ) {
	x = document.getElementsByTagName('input');
	for(i=0; i<x.length; i++){
		if (x[i].type="text" && x[i].value == x[i].defaultValue){
			x[i].value = "";
		}
	}
}
</script>
<form name="TestForm" id="TestForm" action="" method="Post" onsubmit="scrub_input();">
<input name="name" id="name" type="text" value="Your Name" onblur="clean_form(this.id, true)" onfocus="clean_form(this.id, false)" />
<input name="record" id="record" type="submit" value="Record Name" />
</form>

Up to this point, everything has been explicitly hardcoded. That was intentional, for purposes of conceptual clarity. In practice, once you understand the underlying process, it’s much better to use more general functions to take care of business.

The function scrub_inputs has been given an overhaul. The javascript function getElementByTagName() is used to find all of the input elements that have been submitted. It then iterates through each element. Since we’re only concerned here with text inputs, it checks for that first, followed by a check of its current value against its default value. If it finds a text input with a default value, it wipes the value to an empty string.

A new function has been defined to handle the disappear/reappear behavior, called clear_form. It takes two inputs, the first of which is the input id, with the second being a boolean flag of which behavior we want. A true flag will initiate the onBlur behavior, while false will do the onFocus behavior. In either case, it grabs the input field using getElementById() and uses the same underlying process as before, comparing the current value to the default and either wiping or redefining the current.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>