Text box OnClick event to remove default data


Enter User ID
Here is the code.

<form name=form1 method=post action='test.php'>
<b>Type</b><input type=text name=type value=''Enter your user id '' 
onclick="document.form1.type.value ='''';">Enter User ID
<input type=submit value=Submit> </form>
Text OnClick We can remove the default text from an input box by connecting it to OnClick event of the text box element. You must have seen this in many web sites where we are asked to enter our user id. Once we click inside the text box the default message vanishes. This is done by using OnClick event of the text box.



We will try this by adding the OnClick command embedded within the text box and then by calling a different function where we will keep the code to make the text box blank. This way we will try to learn how to integrate a function with the OnClick event of a text box.


We can integrate a function with the OnClick event of the text box. Here is the code
<html><head><title>(Type a title for your page here)</title>

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

</head>
<body >

<form name=form1 method=post action='test.php'>
<b>Type</b><input type=text name=type value='Enter your user id' onclick="make_blank();">Enter User ID
<input type=submit value=Submit> </form>

</body>
</html>
Keep a file test.php in same directory to receive data of the form
Event Handling onKeyPress Mouse event Textarea onClick event onKeyDown Mouse event

Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer