www.webdeveloper.com
Results 1 to 4 of 4

Thread: Placeholder setting in pre and post HTML5

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255

    Question Placeholder setting in pre and post HTML5

    I have the following script that could be use in pre-HTML5 and a current HTML5 program.

    Is there a way to use the pre-HTML version if the current browser does not support HTML5?

    How do you determine if HTML5 is the working browser so that I would know which version of the <input> tag to use?

    Note: I don't know if this is purely a JS problem or just an HTML set-up problem.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <script type="text/javascript">
    
    // Cross-browser compliant "PlaceHolder" function
    // From: http://help.dottoro.com/ljgugboo.php
    
    function ClearPlaceHolder (input) { if (input.value == input.defaultValue) { input.value = ""; } }
    function SetPlaceHolder (input) { if (input.value == "") { input.value = input.defaultValue; } }
    
    </script>
    </head> 
    <body>
     <input type="text" value="Please fill this field" onfocus="ClearPlaceHolder(this)" onblur="SetPlaceHolder(this)" /> 
    
     <input type="text" value="" placeholder="Zipcode" />
    </body>
    
    </body>
    </html>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    There is no need of placeholder to build accessible forms.
    Here is an old example.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor,  www.pspad.com">
    <title>Formulaire</title>
    <style type="text/css">
    body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
    #frm {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;border:1px solid #000;}
    h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
    input {padding:3px;font:16px Georgia,Garamond,Serif;background:#ffc;border:1px solid #000;}
    #page a {text-decoration:none;color:#600}
    #page a:hover {text-decoration:underline;font-weight:bold;}
    </style>
    <script type="text/javascript">
    var t_f=null;
    function fcs(t){
        if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
    }
    function blr(t){
        if (t.value=='') {t.value=t.defaultValue;}
    }
    </script>
    </head>
    <body>
    <form id="frm" method="POST" action="#">
    <h1>For new forms</h1>
    <p><input id="pre" name="pre" type="text" value="Your vorname" onfocus="fcs(this)" onblur="blr(this)"></p>
    <p><input id="nom" name="nom" type="text" value="Your name" onfocus="fcs(this)" onblur="blr(this)"></p>
    <p><input id="crl" name="crl" type="text" value="Your adress" onfocus="fcs(this)" onblur="blr(this)"></p>
    <p><input id="nrg" name="nrg" type="submit" title="Submit the form" value="Register"></p>
    <p><input type="reset" title="Reset the form" value="Reset"></p>
    </form>
    </body>
    </html>
    It's more difficult with password. Some browser don't accept to modify the type (passeword) of input... the solution consists to build a new input.
    I discover recently on this page an other cunning solution with labels with a demo there
    Last edited by 007Julien; 08-05-2013 at 10:22 AM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Thanks for the reply.

    Further clarification please:
    So are you saying to wait until HTML5 is more popular to use the 'placeholder=xxx' attribute?
    Or don't bother to use it at all, now or in the future?

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    I think a lot of gadgets are presented as innovations (to sell new products), while we can do many things with JavaScript and HTML4 (XHTML are now old-fashioned when it was, a few years ago, presented as the only future). We lose a lot of flexibility with some new gadgets... I am saying to wait time remove all useless gadgets.

    (*) For example labels are usful for robots. Then they needs captcha...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles