SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Struggling With 2 HTML Validator Errors

    Hi,

    I have 2 HTML errors which I am struggling to fix as the error description doesn't explain clearly what I should do.

    How to underline one word in a sentence:

    Code:
    Everything <u>Vital</u> For Amazing Holidays
    How to add a placeholder to a search box. So the search form has an entry in

    Code:
    "text" name="keywords" placeholder='perform a search...' class="homepagesea…
    Does anyone have any suggestions on how to fix these please?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    The <u> tag is deprecated as it has no semantic meaning. Technically , you should use a <span class="underline"> or something like that OR <em class="underline"> (if there is some actualsemantic emphasis to this content) and use CSS to style the tag eg.: .underline{ text-decoration: underline; }.

    Unless you are using an HTML5 doctype, 'placeholder' IS NOT a valid attribute. I am not sure if this has anything to do with it, but you have single quotes for your placeholder and double quotes for everything else.

    Hope that helps.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I sorted the Underline with a DIV and inline CSS.

    This is the DOC type I am using. What placeholder should I use with this?


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    I sorted the Underline with a DIV and inline CSS.
    The reason that <u>...</u> is deprecated is because webmasters are strongly advised not to underline text on a web page except for clickable links. Unless there's a very good reason for underlining the text, you should generally use <strong> or <em> instead if you want the text to stand out.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What about the placeholder. Can anyone advise what placeholder I should use?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    What about the placeholder. Can anyone advise what placeholder I should use?
    The placeholder attribute is not supported in IE9 and under but most other modern browsers versions support it including IE10. It is only valid in the html5 doctype but will work in other doctypes in those browsers that support it but just will not be valid.
    Code:
    <form name="form1" method="post" action="">
    		<fieldset>
    				<legend>Placeholder test</legend>
    				<label for="test">test</label>
    				<input type="text" name="test" id="test" placeholder="Enter name...">
    		</fieldset>
    </form>

    You could add js support for other browsers as mentioned in this article.

  7. #7
    SitePoint Member
    Join Date
    Aug 2012
    Location
    israel
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think that placeholder is just for HTML5

    <input type="text" name="test" id="test" placeholder="Enter name...">

    you need to change your doctype to HTML5 and fix all issues becuse of the change or!! you can use javascript insted of the placeholder.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by canabatz View Post
    i think that placeholder is just for HTML5

    <input type="text" name="test" id="test" placeholder="Enter name...">

    you need to change your doctype to HTML5 and fix all issues becuse of the change or!! you can use javascript insted of the placeholder.
    Thanks for posting but please read previous posts before making a reply as duplicating information already provided is not necessary and will look like fluff. Thank You.

  9. #9
    SitePoint Member
    Join Date
    Aug 2012
    Location
    israel
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, my mistake!! i hope he solved it!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    What about the placeholder. Can anyone advise what placeholder I should use?
    You can also use JavaScript for this, which will work on all browsers (as long as the user has JS enabled).

  11. #11
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Does anyone know the Javascript for a placeholder?

  12. #12
    SitePoint Member
    Join Date
    Aug 2012
    Location
    israel
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:
    Code:
    <script type="text/javascript">
    <!--
    function clearDefault(el) {
    if (el.defaultValue==el.value) el.value = ""
    }
    // -->
    </script>


    <input type="text" value="search this site..." name="query" id="searchinput" onfocus="clearDefault(this)" />

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Here's another example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Placeholder text</title>	
    	
    <script type="text/javascript" >
    
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    function resetFields(whichform) {
      for (var i=0; i<whichform.elements.length; i++) {
        var element = whichform.elements[i];
        if (element.type == "submit") continue;
        if (!element.defaultValue) continue;
        element.onfocus = function() {
        if (this.value == this.defaultValue) {
          this.value = "";
         }
        }
        element.onblur = function() {
          if (this.value == "") {
            this.value = this.defaultValue;
          }
        }
      }
    }
    
    
    function prepareForms() {
      for (var i=0; i<document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        thisform.onsubmit = function() {
          return validateForm(this);
        }
      }
    }
    
    addLoadEvent(prepareForms);
    </script>
    	
    	
    </head>
    
    <body>
    	<form method="post" action="">
    		<label for="name">Name</label><br>
    		<input name="name" type="text" id="name" value="Name"><br>
    		
    		<label for="email">Email Address</label><br>
    		<input name="email" type="text" id="email" value="Email"><br>
    		
    		<label for="phone">Telephone</label><br>
    		<input name="phone" type="text" id="phone" value="Telephone"><br>
    		
    		<input type="submit" name="submitted" value="Send">
    	</form>
    </body>
    </html>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Thanks,

    Does anyone know the Javascript for a placeholder?
    I gave you a link in my original post

  15. #15
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried this but couldn't get it work.


    Code:
    <script type="text/javascript">
    <!--
    function clearDefault(el) {
    if (el.defaultValue==el.value) el.value = ""
    }
    // -->
    </script>
    I tried this an a few other layouts.

    Code:
    <form action="/test/searchresults.php" method="post">
    <script type="text/javascript">
    <!--
    function clearDefault(el) {
    if (el.defaultValue==el.value) el.value = ""
    }
    // -->
    </script>
    </form>
    The others appear to be HTML5 but I am using XHTML1.0.

    Do I need to change something to use these?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    That's an incomplete script and won't work.

    Ralph has given you a full working example in Post #13 so just copy that example. It will work with whatever doctype you use but as long as JS is enabled. Just copy and paste and you will see that it works.

    (Even the html5 placeholder attribute will work in other doctypes as long as the browsers supports it but will of course not be valid. )

  17. #17
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    That's an incomplete script and won't work.

    Ralph has given you a full working example in Post #13 so just copy that example. It will work with whatever doctype you use but as long as JS is enabled. Just copy and paste and you will see that it works.

    (Even the html5 placeholder attribute will work in other doctypes as long as the browsers supports it but will of course not be valid. )
    The code above works fine but when I change it XHTML1.0 which I am using it creates 36 HTML errors in the validator.

    Is there a placeholder for XHTML1.0? I tried searching Google but didn't find anything that worked.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You can't just change the doctype without changing the html so that it is valid for the doctype you are using.

    If you want to use xhtml then you need to self close empty elements (tags like <br />, <input />, <img /> etc..)

    Here is Ralph's example in valid xhtml:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" >
    //<![CDATA[
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }
    
    function resetFields(whichform) {
      for (var i=0; i<whichform.elements.length; i++) {
        var element = whichform.elements[i];
        if (element.type == "submit") continue;
        if (!element.defaultValue) continue;
        element.onfocus = function() {
        if (this.value == this.defaultValue) {
          this.value = "";
         }
        }
        element.onblur = function() {
          if (this.value == "") {
            this.value = this.defaultValue;
          }
        }
      }
    }
    
    
    function prepareForms() {
      for (var i=0; i<document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        thisform.onsubmit = function() {
          return validateForm(this);
        }
      }
    }
    
    addLoadEvent(prepareForms);
    //]]>
    </script>
    </head>
    
    <body>
    <form method="post" action="">
    		<fieldset>
    				<legend>Placeholder test</legend>
    				<label for="name">Name</label>
    				<br />
    				<input name="name" type="text" id="name" value="Name" />
    				<br />
    				<label for="email">Email Address</label>
    				<br />
    				<input name="email" type="text" id="email" value="Email" />
    				<br />
    				<label for="phone">Telephone</label>
    				<br />
    				<input name="phone" type="text" id="phone" value="Telephone" />
    				<br />
    				<input type="submit" name="submitted" value="Send" />
    		</fieldset>
    </form>
    </body>
    </html>

    Is there a placeholder for XHTML1.0? I tried searching Google but didn't find anything that worked.
    I've answered this a few times now but I'll try again

    The "placeholder" attribute is a new attribute added to html5 only. There was never anything before this - all you had was the value attribute for the default value.

    Modern browsers ie10 and latest Fifexox, Safari etc all support the placeholder attribute but it will only be valid if you use the html5 doctype. As I said above the placeholder attribute will still work in those same browsers with any other doctype but just not be valid.

  19. #19
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cheers dude, thats really good of you.

    Im using the search on each pages of my site. Can I place the code onto one page and include it using PHP or making it any simpler to use?

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Im using the search on each pages of my site. Can I place the code onto one page and include it using PHP or making it any simpler to use?
    Yes, it's fine to do that. You can place the form itself in an include file and place it on every page, and you can place the script in an external js file and link to it on each page where the forum appears. Normally I would place all of the links in the <head> of the document and put them inside a single include file, so that I only have to edit them in one place. But this is a separate include from the form.


Bookmarks

Posting Permissions

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