Skip to content

Instantly share code, notes, and snippets.

@derekjohnson

derekjohnson/form.html

Last active December 23, 2015 19:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save derekjohnson/6681158 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save derekjohnson/6681158 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. derekjohnson revised this gist Sep 24, 2013. 3 changed files with 0 additions and 0 deletions.
    0 gistfile1.html → form.html
    View file
    File renamed without changes.
    0 gistfile3.js → script.js
    View file
    File renamed without changes.
    0 gistfile2.css → style.css
    View file
    File renamed without changes.
  2. derekjohnson created this gist Sep 24, 2013.
    15 changes: 15 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <form>
    <label class="js-placeholded" for="first-name">First name</label>
    <input type="text" required aria-required="true" placeholder="First name" id="first-name">

    <label class="js-placeholded" for="last-name">Last name</label>
    <input type="text" required aria-required="true" placeholder="Last name" id="last-name">

    <label class="js-placeholded" for="telephone">Telephone</label>
    <input type="tel" required aria-required="true" placeholder="Telephone" id="telephone">

    <label class="js-placeholded" for="email">Email</label>
    <input type="email" required aria-required="true" placeholder="Email" id="email">

    <input type="submit" value="Send">
    </form>
    10 changes: 10 additions & 0 deletions gistfile2.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }
    19 changes: 19 additions & 0 deletions gistfile3.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
    * Build: http://modernizr.com/download/#-input
    */
    ;window.Modernizr=function(a,b,c){function t(a){i.cssText=a}function u(a,b){return t(prefixes.join(a+";")+(b||""))}function v(a,b){return typeof a===b}function w(a,b){return!!~(""+a).indexOf(b)}function x(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:v(f,"function")?f.bind(d||b):f}return!1}function y(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)n[c[d]]=c[d]in j;return n.list&&(n.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),n}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "))}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j=b.createElement("input"),k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r={}.hasOwnProperty,s;!v(r,"undefined")&&!v(r.call,"undefined")?s=function(a,b){return r.call(a,b)}:s=function(a,b){return b in a&&v(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var z in l)s(l,z)&&(q=z.toLowerCase(),e[q]=l[z](),o.push((e[q]?"":"no-")+q));return e.input||y(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)s(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},t(""),h=j=null,e._version=d,e}(this,this.document);

    (function(win, doc, Modernizr) {
    if(Modernizr.input.placeholder) {
    /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
    if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){if(!("HTMLElement" in j)&&!("Element" in j)){return}var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.className),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.className=this.toString()}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(){var s=arguments,r=0,p=s.length,q,o=false;do{q=s[r]+"";if(g(this,q)===-1){this.push(q);o=true}}while(++r<p);if(o){this._updateClassName()}};e.remove=function(){var t=arguments,s=0,p=t.length,r,o=false;do{r=t[s]+"";var q=g(this,r);if(q!==-1){this.splice(q,1);o=true}}while(++s<p);if(o){this._updateClassName()}};e.toggle=function(p,q){p+="";var o=this.contains(p),r=o?q!==true&&"remove":q!==false&&"add";if(r){this[r](p)}return !o};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};

    var labels = doc.querySelectorAll('.js-placeholded'),
    i = 0,
    ii = labels.length;

    for(i; i<ii; i++) {
    labels[i].classList.add('visuallyhidden');
    }
    }
    })(window, document, window.Modernizr);