Web Forms - Disappearing Default Form Text - Neils Resource WebWeb Forms - Disappearing Default Form Text - Neils Resource WebDefault Text - Forms Design - WEB DEV. - NEILS RESOURCE WEB

Contract Menu | Expand Menu

Summary of Content
This little JavaScript will enable you to display some example default text within a text box that will disappear when clicked on. Using the Onfocus tag. All it does is save a manual clearing of the initial text, but its that little bit of extra consideration for the user.

Default Form Text that Disappears with mouse on focus
 Example: Place your mouse pointer over the text box.


Place the following code between your <HEAD> and </HEAD> tags:

<script language=JavaScript>
<!--
function clear_textbox()
{
if (document.form1.text1.value == "Enter Your Default Text Here")
document.form1.text1.value = "";
}
-->
</script>

Place your form code within your HTML like this:

<form name="form1" action="http://www.yourwebaddress.com/form.cgi" method=post>
<input name=text1 onFocus=clear_textbox() value="Enter Your Default Text Here">
<input type=submit value=Submit>
</form>

Change the web address indicated in red to your form address. If you'd like to change the default text displayed within your text box, make sure you change it in both the JavaScript code and your form code as indicated in bold.

wwwThis Site

Last Update: 13/02/2008 - Web Forms - Disappearing Default Form Text - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2