PDA

View Full Version : <input type="text" -- add text in the background



utnalove
Jun 16th, 2010, 08:34 PM
Hello...

I have the following field:


<p><input type="text" style="width:140px" name="email"/></p>

<p>
<input type="hidden" value="przepiekna" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="here is my text" />

What should I do in order for a text to appear inside the box, and when the box is clicked, the text disappears?

Scriptet
Jun 16th, 2010, 08:41 PM
You can use JavaScript so that onclick of the button you set the CSS for the text to either display:none;/visibility:hidden;/left:-999em;

utnalove
Jun 16th, 2010, 08:42 PM
is it an edit to that code, or it should be added somewhere?

P.s. what button you are talking about?

I mean the text box that you see straight under Wpisz swój adres email: in www.przepiekna.pl

conecode
Jun 16th, 2010, 08:45 PM
in HTML5 you can use the placeholder attribute. this should work with chrome 4+, safari 4+, and firefox 3.7.


<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>


here's a link that explains a javascript solution.
http://www.yourhtmlsource.com/forms/clearingdefaulttext.html

utnalove
Jun 16th, 2010, 09:01 PM
I don't understand how to make that javascript code... nowere there is written where the clearing text needs to be writter (or I don't get it).

How to use the html that you wrote? Why you wrote about "Search Bookmarks and History" it is completely not related to my case...

Apostropartheid
Jun 16th, 2010, 09:37 PM
What is a writter?

It wasn't incredibly hard to find the answer you were looking for on Google:
http://www.siteexperts.com/tips/elements/ts27/page1.asp

utnalove
Jun 16th, 2010, 09:53 PM
What is a writter?

It wasn't incredibly hard to find the answer you were looking for on Google:
http://www.siteexperts.com/tips/elements/ts27/page1.asp

Thanks... it just works and it is easy to understand :)

writter is a typo... it had to be "written" :)

Dean440
Jun 16th, 2010, 10:03 PM
<!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
function clearText(field){
if(field.value === field.defaultValue){
field.value="";
}
}
function replaceText(field){
if(field.value === ""){
field.value=field.defaultValue;
}
}
</script>
</head>
<body>

<form action="#">
<input onfocus="clearText(this);" onblur="replaceText(this);" type="text" value="First Name" /> <br />
<input onfocus="clearText(this);" onblur="replaceText(this);" type="text" value="Telephone" /> <br />
<input type="submit" value="Submit" />
</form>

</body>
</html>