How to set placeholder text on form fields

**mkersgard** · Oct 29, 2012 18:42

Is there a way, I know there is, in which I set initial Values for Form Fields, and when the user clicks inside the field, the initial value is reset

example:

<div style="background-color: #999999">
<p style="text-align: center;"><span style="color: #0000ff;">Fill Out This Form to get a Free Uniform, <br>
Free Private lesson &
Free 30 Days of Training!</span></p>
<form id="rmform" name="rmform" method="post" action="https://addmembers.com/rainmaker/process/">
<table border="0" cellspacing="3" cellpadding="3" >
<tr>
<td width="5%"><input name="SID" type="hidden" id="SID" value="1197" />
<input name="AutoResponder" type="hidden" id="AutoResponder" value="True" />
<input name="Tags" type="hidden" id="Tags" value="" />
<input name="SendTo" type="hidden" id="SendTo" value="XXX@xyz.com" />
<input name="rmid" type="hidden" id="rmid" value="" />
<input name="formID" type="hidden" id="formID" value="6BAD62B41BB0E8DA42E62E9A" /></td>
</tr>
<tr>
<td> </td>
<td ><label for="FName"></label>
<input name="FName" type="text" id="FName" value="First Name" /> <---------------- User would Click In this Field to enter First Name, but upon clicking "First Name" is cleared out
<input name="FNameReq" type="hidden" id="FNameReq" value="true" /> </td></tr>
<tr>
<td> </td>
<td><label for="LName"></label>
<input name="LName" type="text" id="LName" value="Last Name" /> <---------------- User would Click In this Field to enter LAST Name, but upon clicking "Last Name" is cleared out
<input name="LNameReq" type="hidden" id="LNameReq" value="true" /></td></tr>
<tr>
<td> </td>
<td><label for="Email"></label>
<input name="Email" type="text" id="Email" value="Email" />
<input name="EmailReq" type="hidden" id="EmailReq" value="true" /></td></tr>
<tr>
<td> </td>
<td><label for="Phone"></label>
<input name="Phone" type="text" id="Phone" value="Phone Number" />
<input name="PhoneReq" type="hidden" id="PhoneReq" value="true" /></td></tr>
<tr>
<td colspan="2" align="center">30 Days Free!</td>
</tr>
<tr>
<td colspan="2" align="center"><input id="FlowTags" name="FlowTags" type="checkbox" value="prospect" /></td>
</tr>
<tr><td> </td><td><input name="ReturnURL" type="hidden" id="ReturnURL" value="http://hermosaboxingworks.com" /></td></tr><tr><td> </td><td><input type="submit" name="Submit" id="Submit" value="Submit" /></td></tr>
</table>
</form>

My .js Skills are Feeble, but from a class I took awhile back, I do recall a function that would do this, My
Emailer platform has rendered "First Name JOE BLOW", "Last Name Jebadiah"
when they entered their information, the end user, but NOT clear out the form field manually.

Thanks

Mike

**ralph.m** · Oct 29, 2012 23:40

Hi mkersgard. Welcome to the forums.

(This seemed better as a separate thread.)

You can do it with JavaScript, but also with HTML5. With the patter, you can just add

Code:

placeholder="Last Name"

etc. to your form inputs.

However, that won't work in older browsers.

Let us know if you'd prefer some JS.

**mkersgard** · Oct 30, 2012 09:50

Originally Posted by ralph.m

Hi mkersgard. Welcome to the forums.

(This seemed better as a separate thread.)

You can do it with JavaScript, but also with HTML5. With the patter, you can just add

Code:

placeholder="Last Name"

etc. to your form inputs.

However, that won't work in older browsers.

Let us know if you'd prefer some JS.

Thanks!! Which ever one would be easiest, my .js skills are quite feeble

thanks

**mkersgard** · Oct 30, 2012 09:50

Thanks!! Which ever one would be easiest, my .js skills are quite feeble

thanks

**paul_wilkins** · Oct 30, 2012 15:13

Originally Posted by mkersgard

Thanks!! Which ever one would be easiest, my .js skills are quite feeble

Then use the HTML5 placeholder - it means no JavaScript code at all.

HTML Code:

<input type="text" name="username" placeholder="Enter your username">

When you click in there and start typing, the placeholder then goes away.

**ralph.m** · Oct 30, 2012 17:00

Anyhow, now that I'm home, here's a JS example I've found useful. It's from Jeremy Keith's DOM Scripting book.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Placeholder text</title>	
	
<script type="text/javascript" >

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function resetFields(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.defaultValue) continue;
    element.onfocus = function() {
    if (this.value == this.defaultValue) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.defaultValue;
      }
    }
  }
}


function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    thisform.onsubmit = function() {
      return validateForm(this);
    }
  }
}

addLoadEvent(prepareForms);
</script>
	
	
</head>

<body>
	<form method="post" action="">
		<label for="name">Name</label><br>
		<input name="name" type="text" id="name" value="Name"><br>
		
		<label for="email">Email Address</label><br>
		<input name="email" type="text" id="email" value="Email"><br>
		
		<label for="phone">Telephone</label><br>
		<input name="phone" type="text" id="phone" value="Telephone"><br>
		
		<input type="submit" name="submitted" value="Send">
	</form>
</body>
</html>

User Tag List

Thread: How to set placeholder text on form fields

Thread Tools

Display

How to set placeholder text on form fields

Bookmarks

Bookmarks

Posting Permissions