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:


JavaScript Code
  1. 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" />



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.


JavaScript Code
  1. 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:


JavaScript Code
  1. 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:


JavaScript Code
  1. 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:


JavaScript Code
  1. 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


JavaScript Code
  1. 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):

JavaScript Code
  1. 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" />



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's Avatar
Author:
Views:
2,083
Rating:
Posted on Thursday 9th August 2007 at 03:49 PM
ilyas-shezad
ilyas-shezad's Avatar
Hehe i think is more or less dhtml
Posted on Sunday 3rd June 2007 at 09:28 PM
SkillMaster
SkillMaster's Avatar
Great work looks good.