[HELP]php login default text

[D1zl3]

hey you know how for some sites where you fill in your username and pass, it says username by default and the pass is a bunch of dots, and when you click it, it disappears? How would I put that into this:

<?php
if (!defined('AXE'))
	exit;
//if session set, then we shoudlnt be here
if (isset($_SESSION['user'])) 
{
	print ""; include "footer.php"; exit;
}

if (isset($_POST['action'])) 
{
	if (pun_htmlspecialchars($_POST['username'])=='')
		{
			print "Login/username cannot be blank. <meta http-equiv='refresh' content='0;url=./quest.php?name=login'/>";
		}
		elseif (pun_htmlspecialchars($_POST['username'])=='')
		{
			print "Password cannot be blank! <meta http-equiv='refresh' content='0;url=./quest.php?name=login'/>";
		}
	//lets select acc db
	mysql_select_db($acc_db);
	$a  = mysql_query("SELECT password FROM accounts WHERE login = '".$db->escape(pun_htmlspecialchars($_POST['username']))."'") or die (mysql_error());
	$a2 = mysql_fetch_array($a);
	if ($a2[0]==pun_htmlspecialchars($_POST['password'])) 
	{
		if (pun_htmlspecialchars($_POST['username'])=='')
		{
			print "Login/username cannot be blank. <meta http-equiv='refresh' content='0;url=./quest.php?name=login'/>";
		}
		elseif (pun_htmlspecialchars($_POST['password'])=='')
		{
			print "Password cannot be blank! <meta http-equiv='refresh' content='0;url=./quest.php?name=login'/>";
		}
		else
		{
			$_SESSION['user']=pun_htmlspecialchars($_POST['username']);
			//
			// THIS script creates character info for points and progress for users characters
			//
			//first get characters ids
			$db->select_db($acc_db);
			//this is requred to get account 'acct' id
			$ba = $db->query("SELECT acct FROM accounts WHERE login='".pun_htmlspecialchars($_POST['username'])."'") or die (mysql_error());
			$ba2 = $db->fetch_assoc($ba);
			$cms_points = $db->query("SELECT guid FROM characters WHERE acct='".$ba2['acct']."'") or die(mysql_error());
			if ($db->num_rows($cms_points)<>'0')
			{
				while ($cms_points2=$db->fetch_assoc($cms_points))
				{
					
				}
			}
			$db->select_db($db_name);
			//end THIS
			print "You are now logged in! <meta http-equiv='refresh' content='0;url=./'/>";
		}
		include "footer.php"; exit;
	}
	else
	{
		$warn = "<font color='red'>(!)</font>";
		$warn2 = "<strong>Incorrect username or password!</strong>";
	}
} 


?>

					<div class="post2">
					
							<form action="" method="post">
								<table align="center" border="0">	
						

									<tr>
										<td class="td">
											<label for="username">
												                                	       </label>										</td>
										<td>
											<input type="text" id="username" maxlength="20" name="username" /> <?php echo $warn ?>									</td>
									</tr>

									<tr>
										<td class="td">
											<label for="password">
												                               	       </label>										</td>
										<td>
											<input type="password" id="password" maxlength="20" name="password" /> <?php echo $warn ?>									</td>
									</tr>
								</table>
								<?php print $warn2; ?>
								<br />
							  *Use your in-game account details*<br /><br />
								<a href="./quest.php?name=gimmepass">Forgot password?</a><br /><br />
								<input type="submit" name="action" value="Login" class="button doit" />
							</form>

thanks alot.

[Sirupsen]

You'll need a javascript which makes the text dissapears, and a HTML tag to get in the text you want. It've been a long time since I've last done this, so please tell me how it went. Here's the code I believe you gotta put in:

<input type="text" name="search">

Is your form, you gotta addd the default value to the form, which is: "Search..":

value="Search"

Now you gotta add the javascript:

onfocus="this.value=''" onblur="if (this.value == '') { this.value = 'Search'; }"

This should remove the text when you click the field, and else it'll stay there.

[D1zl3]

awesome thanks alot. I will try it out.

Edit: didnt work for me lol. Im sure its jsut me being a noob lol. +rep anyways

[Sirupsen]

Hmm, weird.. Anyways, then let's try with some Javascript.

Make a script like this between <head> </head>:

<script type="text/javascript"> 
function make_blank()
{
document.form1.type.value ="";
}
</script>

We made a function called "Make_Blank" this will empty the input, once called. So we call it on a click. We need to call this in our input field WHEN it gets clicken:

<input type="text" name="username" value="Username.." onclick="make_blank();">

[j9sjam3]

Try this:

<html>
<head>
<title>On blur?</title>
<script type="text/javascript">
      function disappera(input) {
                  if (input.value == "keywords") {
                               input.value = "";
                                            }
                              } 

function showKeywords(input) {
                  if (input.value == "") {
                               input.value = "keywords";
                                           }
                              }
</script>   		                      		  		  		   		
</head>
<body>
<!-- blah here -->

INPUT FORM:
<input type="text" value="keywords" onfocus="disappear(this);" onblur="showKeywords(this)" />

		</body>
</html>

[inoMod]

A better solution, which enables this feature on all inputs that has the class "focusclear", and separates the js from the html nicely.
It also uses the "defaultvalue" of the input, which means you dont need to write what the default value of your input is in the js, just change it normally in the html and the js still works.

<html>
<head>

	<title>On blur</title>
 		                      		  		  		   		
</head>
<body>

<input type="text" class="focusclear" value="Username..." />
<input type="password" class="focusclear" value="Password..." />

<script type="text/javascript">
Array.prototype.inArray = function(value) {
	for (var i = 0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};

var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
	if (!!input[i].className && input[i].className.split(' ').inArray('focusclear')) {
		input[i].onfocus = function() {
			if (this.value == this.defaultValue) {
				this.value = '';
			}
		};
		input[i].onblur = function() {
			if (this.value == '') {
				this.value = this.defaultValue;
			}
		};
	}
}
</script>  

</body>
</html>

Just remember that the js needs to run after the html for the inputs, because otherwise the code cannot find them, do this either by placing the code at the bottom of the page like I did, or enclosing it all in:

window.onload = function() { ... }

Also, here is a modified version which makes the value in password fields visible if it is the default value, but when you type in your password it changes to stars, and it also changes back to text if you remove focus from the field when it's empty.

<html>
<head>

	<title>On blur</title>
 		                      		  		  		   		
</head>
<body>

<input type="text" class="focusclear" value="Username..." />
<input type="text" class="focusclear password" value="Password..." />

<script type="text/javascript">
Array.prototype.inArray = function(value) {
	for (var i = 0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};

var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
	if (!!input[i].className && input[i].className.split(' ').inArray('focusclear')) {
		input[i].onfocus = function() {
			if (this.value == this.defaultValue) {
				if (this.className.split(' ').inArray('password')) {
					this.setAttribute('type', 'password');
				}
				this.value = '';
			}
		};
		input[i].onblur = function() {
			if (this.value == '') {
				if (this.className.split(' ').inArray('password')) {
					this.setAttribute('type', 'text');
				}
				this.value = this.defaultValue;
			}
		};
	}
}
</script>  

</body>
</html>

As you can see, you now need to set the type on your original field to text, and then give it a class of "password" for this to be enabled.

Hope I helped.