Forum Moderators: open
I'm setting up a site with a newsletter subscription button, and I'm wondering how to set up the disappearing "grayed out" text in a form field. So when you first see the form it would say along the lines of "Enter E-mail address here" but when you click on it, the gray text disappears and you get your input field to enter your email address.
A perfect example of this would be at facebook.com on the top right, it says E-mail and Password, but if you click on them they disappear.
I took a quick look at facebook's Form tags and didn't see anything that would input the grayed out text.
is this a javascript function?
any information/links would be helpful.
Thanks a lot guys.
Inline method:
<input type="text" name="email" id="email" value="Enter Email" onFocus="this.value='';">
A more graceful method attaches the behavior on window load, leaving the HTML clean:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); };
function attachBehaviors () {
if (document.getElementById('email')) {
document.getElementById('email').onfocus=function() { this.value=''; };
}
}
</script>
</head>
<body>
<form method="post" action="">
<input type="text" name="email" id="email" value="Enter Email">
</form>
</body>
</html>
You could also use onClick, but then if someone's tabbing through the fields instead of using their mouse it won't fire the onClick event.
[2]
<title>Untitled</title>
[b]<script language="javascript" type="text/javascript" src="default.js">[/b]</script>
[/2]This helps to cut down page load time which is always handy.
