Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    <input type="text" -- add text in the background

    Hello...

    I have the following field:

    Code:
    <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?
    Last edited by utnalove; 06-16-2010 at 07:39 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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;

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    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

  • #4
    New Coder
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    13
    Thanks
    0
    Thanked 3 Times in 3 Posts
    in HTML5 you can use the placeholder attribute. this should work with chrome 4+, safari 4+, and firefox 3.7.

    Code:
    <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/...faulttext.html
    Las Vegas Web Design and Development - Cone Code Development

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    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...

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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

  • Users who have thanked Apostropartheid for this post:

    utnalove (06-16-2010)

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Apostropartheid View Post
    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"

  • #8
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •