Forgot Password / Register
Site Statistics
Total Members: 520
Total Tutorials: 242
Newsest User: 8884244477
Todays Unique Hits: 281
0 Users 2 Guests Online

Clear Input Form

Clear Text Box

--------------------------------------------------------------------------------

Before I start this nice and simple (but effective code) I would like to

Note: That there is not much to comment on here, as it is kinda self explanatory (I will try to comment it best I can at the end), and you can not (as I know of) use this in like a textarea but only an are such like a Login Box.

And We Are Off:


Code

Username: <input size="15" name="login" class="forminputb" onclick="if (this.value == 'Username') { this.value = ''; }" onfocus="if (this.value == 'Username') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Username'; }" type="username" value="Username" /><br />



Obviously, this would be part of a login script or register script.
To start off We have the word Username: Which says what you input into that box. Then We follow up by making the <input> code which makes the text box to put the info in.

Next we define how long we want it (size="15") so its 15 pixel long. Then we just give it a name. And then we give it a class to edit it in our css if wanted.

Now comes some more advanced stuff which I may not be able to explain to offel well but Ill try. So we start with this.


Code

onclick="if (this.value == 'Username') { this.value = ''; }"


This is saying that when you dont have your mouse (cursor) in the input box, it will say Username, and when your mouse (cursor) is in the input box, it will go to be blank so you are able to type in your info.

Next we have This:


Code

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


This is basically doing the same thing only you are able to click out of it and your info you have put in it will stay there instead of reseting itself.

And now we have This:


Code

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


This is saying is when you have clicked in the box, and typed nothing, then clicked out of it, it will return back to the word Username.

And now is just some of the easier stuff to explain again:


Code

type="username" value="Username" />


All this is doing (type="username") is defining what type of text to use, such as if you have a password one it would put in astrics (*'s) or some other character, and the other one (value="Username") is just saying what to start off with in the box.

I hope I did this well enough for you to at least understand a little bit. If I didnt you could always just copy and paste it lol.

(P.S. = In the


Code

onclick="if (this.value == 'Username') { this.value = ''; }"


code, after this.value = it is not a quotation but 2 single quotes, so as not to confuse neone.)

So The Whole Code Would Be (Yes I Know I Am Reposting It):

Code

Username: <input size="15" name="login" class="forminputb" onclick="if (this.value == 'Username') { this.value = ''; }" onfocus="if (this.value == 'Username') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Username'; }" type="username" value="Username" /><br />



I Tried to explain this the best I could, so please dont be to harsh. And to change it to password or something else, just change everything where it says username. If you dont get it Im sorry, and post a reply I will try to help.
FtH8er
Author:
Views:
1846
Rating:
Posted on Thursday 9th August 2007 at 03:49 PM
ilyas-shezad
ilyas-shezad
Hehe i think is more or less dhtml
Posted on Sunday 3rd June 2007 at 09:28 PM
SkillMaster
SkillMaster
Great work looks good.