HTML5 Forms - KISS time - Fronteers

HTML5 Forms - KISS time - Fronteers

00809b14f856d33156329188a5b6ecdc?s=128

Robert Nyman

October 06, 2011
Tweet

Transcript

  1. HTML5 Forms - KISS time

  2. None
  3. @robertnyman

  4. 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
  5. None
  6. None
  7. None
  8. Forms

  9. Thou shalt make things simple

  10. None
  11. None
  12. None
  13. None
  14. Types

  15. <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
  16. Siri, where is iPhone 5?

  17. None
  18. None
  19. Attributes

  20. <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
  21. <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">
  22. <input type="text" mozactionhint="Next">

  23. Elements

  24. <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
  25. <keygen></keygen> <meter min="0" max="10" value="7"></meter> <input type="range" id="range"> <output for="range"

    id="output"></output> <progress max="100" value="70">70%</progress>
  26. <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>
  27. Validation

  28. <input type="text" required>

  29. None
  30. Only spaces are regarded as input :-(

  31. <input type="text" required style="visibility: hidden">

  32. No dialog, won't submit form Dialog at element No dialog,

    won't submit form Dialog at top left of screen (not browser)
  33. <input type="email" required>

  34. None
  35. No support for international characters, i.e. röbert@kissonline.com won't work

  36. <input type="text" pattern="\d{2}\-\d{5}">

  37. None
  38. Empty fields are seen as valid

  39. <input type="text" title="So you tried to skip me?" required>

  40. None
  41. <input type="text" pattern="\d{2}\-\d{5}" x-moz-errormessage="PLEASE, just do it right!">

  42. None
  43. elm.setCustomValidity("No, that's wrong!");

  44. None
  45. Remove custom validation message by setting it to an empty

    string...
  46. elm.setCustomValidity("");

  47. Using setCustomValidity totally kills the checkValidity method

  48. None
  49. None
  50. (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); })();
  51. Styling

  52. input:required { border: 1px solid #00f; }

  53. None
  54. input:valid { border: 1px solid #0f0; } input:invalid { border:

    1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
  55. None
  56. None
  57. input:focus:invalid { border: 1px solid #f00; }

  58. input:-moz-ui-valid { border: 1px solid #0f0; } input:-moz-ui-invalid { border:

    1px solid #f00; }
  59. input:-moz-placeholder { color: #f00; background: yellow; } input::-webkit-input-placeholder { color:

    #f00; background: yellow; }
  60. None
  61. Works in Safari, but only with the text color, not

    the background
  62. 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; }
  63. None
  64. None
  65. None
  66. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/

  67. Can I use it?

  68. None
  69. Can I use it?

  70. None
  71. http://caniuse.com

  72. None
  73. None
  74. None
  75. The beauty of HTML5 Forms

  76. Help each other

  77. Robert Nyman robnyman@mozilla.com Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/