Skip to content

Instantly share code, notes, and snippets.

@joshpalmeri

joshpalmeri/A-better-way-to-do-form-labels.markdown

Forked from anonymous/A-better-way-to-do-form-labels.markdown
Last active March 29, 2017 16:50
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. joshpalmeri revised this gist Mar 29, 2017. 1 changed file with 27 additions and 16 deletions.
    43 changes: 27 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,27 @@
    <p>Note: Need a solution for right-click -> paste</p>
    <form class="awesome-labels">
    <span class="input-element" data-input-order="1">
    <label>First Name</label>
    <input type="text" placeholder="First Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Last Name</label>
    <input type="text" placeholder="Last Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address" />
    </span>
    <button type="submit">Rock on, yo.</button>
    </form>
    <!doctype html>
    <html>
    <head>
    <title>A Better Way to Do Form Labels</title>
    <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <p>Note: Need a solution for right-click -> paste</p>
    <form class="awesome-labels">
    <span class="input-element" data-input-order="1">
    <label>First Name</label>
    <input type="text" placeholder="First Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Last Name</label>
    <input type="text" placeholder="Last Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address" />
    </span>
    <button type="submit">Rock on, yo.</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js" tyle="text/javascript"></script>
    </body>
    </html>
  2. @invalid-email-address Anonymous created this gist Feb 1, 2014.
    7 changes: 7 additions & 0 deletions A-better-way-to-do-form-labels.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    A better way to do form labels
    ------------------------------
    This pen was inspired by Brad's workshop presentation #bdconf in Nashville, TN, 10/23/13. We all know the problem. With only a placeholder label, once the user starts typing, he/she may not recall the label for that field. Oh what a dastardly thing! Well, here's a stab at using some JS to show a top-left aligned label when a value exists in the field.

    A [Pen](http://codepen.io/joshpalmeri/pen/IFhsg) by [Josh Palmeri](http://codepen.io/joshpalmeri) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/joshpalmeri/pen/IFhsg/license).
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <p>Note: Need a solution for right-click -> paste</p>
    <form class="awesome-labels">
    <span class="input-element" data-input-order="1">
    <label>First Name</label>
    <input type="text" placeholder="First Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Last Name</label>
    <input type="text" placeholder="Last Name" />
    </span>
    <span class="input-element" data-input-order="1">
    <label>Email Address</label>
    <input type="email" placeholder="Email Address" />
    </span>
    <button type="submit">Rock on, yo.</button>
    </form>
    199 changes: 199 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,199 @@
    $(document).ready(function() {
    $("label").hide();
    $("input").on("focus", function() {
    /*alert($(this).val().length);*/
    if($(this).val().length >= 0) {
    $(this).parent().find("label").fadeIn();
    }
    }).on("focusout", function() {
    if($(this).val()=='') {
    $(this).parent().find("label").fadeOut();
    }
    });
    });

    /*! http://mths.be/placeholder v2.0.7 by @mathias */
    ;(function(window, document, $) {

    // Opera Mini v7 doesn’t support placeholder although its DOM seems to indicate so
    var isOperaMini = Object.prototype.toString.call(window.operamini) == '[object OperaMini]';
    var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
    var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
    var prototype = $.fn;
    var valHooks = $.valHooks;
    var propHooks = $.propHooks;
    var hooks;
    var placeholder;

    if (isInputSupported && isTextareaSupported) {

    placeholder = prototype.placeholder = function() {
    return this;
    };

    placeholder.input = placeholder.textarea = true;

    } else {

    placeholder = prototype.placeholder = function() {
    var $this = this;
    $this
    .filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
    .not('.placeholder')
    .bind({
    'focus.placeholder': clearPlaceholder,
    'blur.placeholder': setPlaceholder
    })
    .data('placeholder-enabled', true)
    .trigger('blur.placeholder');
    return $this;
    };

    placeholder.input = isInputSupported;
    placeholder.textarea = isTextareaSupported;

    hooks = {
    'get': function(element) {
    var $element = $(element);

    var $passwordInput = $element.data('placeholder-password');
    if ($passwordInput) {
    return $passwordInput[0].value;
    }

    return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
    },
    'set': function(element, value) {
    var $element = $(element);

    var $passwordInput = $element.data('placeholder-password');
    if ($passwordInput) {
    return $passwordInput[0].value = value;
    }

    if (!$element.data('placeholder-enabled')) {
    return element.value = value;
    }
    if (value == '') {
    element.value = value;
    // Issue #56: Setting the placeholder causes problems if the element continues to have focus.
    if (element != safeActiveElement()) {
    // We can't use `triggerHandler` here because of dummy text/password inputs :(
    setPlaceholder.call(element);
    }
    } else if ($element.hasClass('placeholder')) {
    clearPlaceholder.call(element, true, value) || (element.value = value);
    } else {
    element.value = value;
    }
    // `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
    return $element;
    }
    };

    if (!isInputSupported) {
    valHooks.input = hooks;
    propHooks.value = hooks;
    }
    if (!isTextareaSupported) {
    valHooks.textarea = hooks;
    propHooks.value = hooks;
    }

    $(function() {
    // Look for forms
    $(document).delegate('form', 'submit.placeholder', function() {
    // Clear the placeholder values so they don't get submitted
    var $inputs = $('.placeholder', this).each(clearPlaceholder);
    setTimeout(function() {
    $inputs.each(setPlaceholder);
    }, 10);
    });
    });

    // Clear placeholder values upon page reload
    $(window).bind('beforeunload.placeholder', function() {
    $('.placeholder').each(function() {
    this.value = '';
    });
    });

    }

    function args(elem) {
    // Return an object of element attributes
    var newAttrs = {};
    var rinlinejQuery = /^jQuery\d+$/;
    $.each(elem.attributes, function(i, attr) {
    if (attr.specified && !rinlinejQuery.test(attr.name)) {
    newAttrs[attr.name] = attr.value;
    }
    });
    return newAttrs;
    }

    function clearPlaceholder(event, value) {
    var input = this;
    var $input = $(input);
    if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
    if ($input.data('placeholder-password')) {
    $input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
    // If `clearPlaceholder` was called from `$.valHooks.input.set`
    if (event === true) {
    return $input[0].value = value;
    }
    $input.focus();
    } else {
    input.value = '';
    $input.removeClass('placeholder');
    input == safeActiveElement() && input.select();
    }
    }
    }

    function setPlaceholder() {
    var $replacement;
    var input = this;
    var $input = $(input);
    var id = this.id;
    if (input.value == '') {
    if (input.type == 'password') {
    if (!$input.data('placeholder-textinput')) {
    try {
    $replacement = $input.clone().attr({ 'type': 'text' });
    } catch(e) {
    $replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
    }
    $replacement
    .removeAttr('name')
    .data({
    'placeholder-password': $input,
    'placeholder-id': id
    })
    .bind('focus.placeholder', clearPlaceholder);
    $input
    .data({
    'placeholder-textinput': $replacement,
    'placeholder-id': id
    })
    .before($replacement);
    }
    $input = $input.removeAttr('id').hide().prev().attr('id', id).show();
    // Note: `$input[0] != input` now!
    }
    $input.addClass('placeholder');
    $input[0].value = $input.attr('placeholder');
    } else {
    $input.removeClass('placeholder');
    }
    }

    function safeActiveElement() {
    // Avoid IE9 `document.activeElement` of death
    // https://github.com/mathiasbynens/jquery-placeholder/pull/99
    try {
    return document.activeElement;
    } catch (err) {}
    }

    }(this, document, jQuery));
    39 changes: 39 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    body {
    font: 12px arial, sans-serif;
    color: #555555;
    }

    form {
    display: inline-block;
    }

    .input-element {
    display: inline-block;
    width: 100%;
    height: 4.5em;
    position: relative;
    }

    form label {
    font: 12px arial, sans-serif;
    }

    form .input-element input {
    font: 12px arial, sans-serif;
    display: block;
    position: absolute;
    bottom: 0;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    padding: .625em .5em;
    margin: 0 0 .5em 0;
    }

    button {
    color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #333333;
    font-size: 1.2em;
    padding: .5em;
    }