Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Forms - KISS time - Fronteers

HTML5 Forms - KISS time - Fronteers

Robert Nyman

October 06, 2011
Tweet

More Decks by Robert Nyman

Other Decks in Technology

Transcript

  1. Mozilla is a global non-profit dedicated to putting you in

    control of your online experience and shaping the future of the Web for the public good
  2. <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email">

    <input type="month"> <input type="number"> <input type="range"> <input type="search" results="5" autosave="saved-searches"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> New form types
  3. <input type="text" autocomplete="off"> <input type="text" autofocus> <input type="submit" formaction="http://example.org/save" value="Save">

    <input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"> <input type="submit" formmethod="POST" value="Send as POST"> <input type="submit" formnovalidate value="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window"> New form attributes
  4. <input type="text" list="data-list"> <input type="range" max="95"> <input type="range" min="2"> <input

    type="file" multiple> <input type="text" readonly> <input type="text" required> <input type="text" pattern="[A-Z]*"> <input type="text" placeholder="E.g. Robocop"> <input type="text" spellcheck="true"> <input type="number" step="5">
  5. <input type="text" list="data-list"> <datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack

    Shephard"> <option value="James 'Sawyer' Ford"> <option value="John Locke"> <option value="Sayid Jarrah"> </datalist> New form elements
  6. <input type="range" id="da-range"> <output id="da-range-output"></output> <script> (function () { var

    range = document.getElementById("da-range"), output = document.getElementById("da-range-output"); range.addEventListener("input", function () { output.value = this.value; }, false); })(); </script>
  7. No dialog, won't submit form Dialog at element No dialog,

    won't submit form Dialog at top left of screen (not browser)
  8. (function () { var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function ()

    { this.setCustomValidity(""); }, false); oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, that's wrong!"); }, false); })();
  9. input:valid { border: 1px solid #0f0; } input:invalid { border:

    1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
  10. input::-webkit-validation-bubble-message { color: #f00; background: #000; border: 10px solid #f00;

    -webkit-box-shadow: 0 0 0 0; } input::-webkit-validation-bubble-arrow { background: #ff3456; border-color: orange; -webkit-box-shadow: 0 0 0 0; }