Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 Forms - KISS time
@robertnyman
Mozilla is a global non-profit
dedicated to putting you in
control of your online experience
and shaping the future of the
...
Forms
Thou shalt make things simple
Types
New form types


<input type="color">             <input type="range">

<input type="date">              <input type="sear...
Siri, where is iPhone 5?
Attributes
New form attributes

<input type="text" autocomplete="off">

<input type="text" autofocus>

<input type="submit" formactio...
<input type="text" list="data-list">

<input type="range" max="95">

<input type="range" min="2">

<input type="file" mult...
<input type="text" mozactionhint="Next">
Elements
New form elements



<input type="text" list="data-list">

<datalist id="data-list">
    <option value="Hugo Reyes">
    <...
<keygen></keygen>

<meter min="0" max="10" value="7"></meter>

<input type="range" id="range">
<output for="range" id="out...
<input type="range" id="da-range">
<output id="da-range-output"></output>
<script>
    (function () {
         var range =...
Validation
<input type="text" required>
Only spaces are regarded as input :-(
<input type="text" required
style="visibility: hidden">
No dialog, won't submit form


Dialog at element


No dialog, won't submit form


Dialog at top left of screen (not
browse...
<input type="email" required>
No support for international
characters, i.e.
röbert@kissonline.com won't work
<input type="text" pattern="d{2}-d{5}">
Empty fields are seen as valid
<input type="text" title="So you tried
to skip me?" required>
<input type="text" pattern="d{2}-d{5}"
x-moz-errormessage="PLEASE, just do it
right!">
elm.setCustomValidity("No, that's wrong!");
Remove custom validation message
by setting it to an empty string...
elm.setCustomValidity("");
Using setCustomValidity totally
kills the checkValidity method
(function () {
    var oninvalidTest = document.getElementById("oninvalid-test");
    oninvalidTest.addEventListener("inpu...
Styling
input:required {
    border: 1px solid #00f;
}
input:valid {
    border: 1px solid #0f0;
}

input:invalid {
    border: 1px solid #f00;
}

input:out-of-range {
    borde...
input:focus:invalid {
    border: 1px solid #f00;
}
input:-moz-ui-valid {
    border: 1px solid #0f0;
}

input:-moz-ui-invalid {
    border: 1px solid #f00;
}
input:-moz-placeholder {
    color: #f00;
    background: yellow;
}

input::-webkit-input-placeholder {
    color: #f00;
 ...
Works in Safari, but only with the
text color, not the background
input::-webkit-validation-bubble-message {
    color: #f00;
    background: #000;
    border: 10px solid #f00;
    -webkit...
http://www.quirksmode.org/
                          html5/inputs.html

                          http://www.quirksmode.or...
Can I use it?
Can I use it?
http://caniuse.com
The beauty of HTML5 Forms
Help each other
Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/    Twitter: @robertnyman
robertnyman.co...
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Upcoming SlideShare
Loading in …5
×

of

HTML5 Forms - KISS time - Fronteers Slide 1 HTML5 Forms - KISS time - Fronteers Slide 2 HTML5 Forms - KISS time - Fronteers Slide 3 HTML5 Forms - KISS time - Fronteers Slide 4 HTML5 Forms - KISS time - Fronteers Slide 5 HTML5 Forms - KISS time - Fronteers Slide 6 HTML5 Forms - KISS time - Fronteers Slide 7 HTML5 Forms - KISS time - Fronteers Slide 8 HTML5 Forms - KISS time - Fronteers Slide 9 HTML5 Forms - KISS time - Fronteers Slide 10 HTML5 Forms - KISS time - Fronteers Slide 11 HTML5 Forms - KISS time - Fronteers Slide 12 HTML5 Forms - KISS time - Fronteers Slide 13 HTML5 Forms - KISS time - Fronteers Slide 14 HTML5 Forms - KISS time - Fronteers Slide 15 HTML5 Forms - KISS time - Fronteers Slide 16 HTML5 Forms - KISS time - Fronteers Slide 17 HTML5 Forms - KISS time - Fronteers Slide 18 HTML5 Forms - KISS time - Fronteers Slide 19 HTML5 Forms - KISS time - Fronteers Slide 20 HTML5 Forms - KISS time - Fronteers Slide 21 HTML5 Forms - KISS time - Fronteers Slide 22 HTML5 Forms - KISS time - Fronteers Slide 23 HTML5 Forms - KISS time - Fronteers Slide 24 HTML5 Forms - KISS time - Fronteers Slide 25 HTML5 Forms - KISS time - Fronteers Slide 26 HTML5 Forms - KISS time - Fronteers Slide 27 HTML5 Forms - KISS time - Fronteers Slide 28 HTML5 Forms - KISS time - Fronteers Slide 29 HTML5 Forms - KISS time - Fronteers Slide 30 HTML5 Forms - KISS time - Fronteers Slide 31 HTML5 Forms - KISS time - Fronteers Slide 32 HTML5 Forms - KISS time - Fronteers Slide 33 HTML5 Forms - KISS time - Fronteers Slide 34 HTML5 Forms - KISS time - Fronteers Slide 35 HTML5 Forms - KISS time - Fronteers Slide 36 HTML5 Forms - KISS time - Fronteers Slide 37 HTML5 Forms - KISS time - Fronteers Slide 38 HTML5 Forms - KISS time - Fronteers Slide 39 HTML5 Forms - KISS time - Fronteers Slide 40 HTML5 Forms - KISS time - Fronteers Slide 41 HTML5 Forms - KISS time - Fronteers Slide 42 HTML5 Forms - KISS time - Fronteers Slide 43 HTML5 Forms - KISS time - Fronteers Slide 44 HTML5 Forms - KISS time - Fronteers Slide 45 HTML5 Forms - KISS time - Fronteers Slide 46 HTML5 Forms - KISS time - Fronteers Slide 47 HTML5 Forms - KISS time - Fronteers Slide 48 HTML5 Forms - KISS time - Fronteers Slide 49 HTML5 Forms - KISS time - Fronteers Slide 50 HTML5 Forms - KISS time - Fronteers Slide 51 HTML5 Forms - KISS time - Fronteers Slide 52 HTML5 Forms - KISS time - Fronteers Slide 53 HTML5 Forms - KISS time - Fronteers Slide 54 HTML5 Forms - KISS time - Fronteers Slide 55 HTML5 Forms - KISS time - Fronteers Slide 56 HTML5 Forms - KISS time - Fronteers Slide 57 HTML5 Forms - KISS time - Fronteers Slide 58 HTML5 Forms - KISS time - Fronteers Slide 59 HTML5 Forms - KISS time - Fronteers Slide 60 HTML5 Forms - KISS time - Fronteers Slide 61 HTML5 Forms - KISS time - Fronteers Slide 62 HTML5 Forms - KISS time - Fronteers Slide 63 HTML5 Forms - KISS time - Fronteers Slide 64 HTML5 Forms - KISS time - Fronteers Slide 65 HTML5 Forms - KISS time - Fronteers Slide 66 HTML5 Forms - KISS time - Fronteers Slide 67 HTML5 Forms - KISS time - Fronteers Slide 68 HTML5 Forms - KISS time - Fronteers Slide 69 HTML5 Forms - KISS time - Fronteers Slide 70 HTML5 Forms - KISS time - Fronteers Slide 71 HTML5 Forms - KISS time - Fronteers Slide 72 HTML5 Forms - KISS time - Fronteers Slide 73 HTML5 Forms - KISS time - Fronteers Slide 74 HTML5 Forms - KISS time - Fronteers Slide 75 HTML5 Forms - KISS time - Fronteers Slide 76 HTML5 Forms - KISS time - Fronteers Slide 77
Upcoming SlideShare
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South Korea
Next
Download to read offline and view in fullscreen.

10 Likes

Share

Download to read offline

HTML5 Forms - KISS time - Fronteers

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5 Forms - KISS time - Fronteers

  1. HTML5 Forms - KISS time
  2. @robertnyman
  3. 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
  4. Forms
  5. Thou shalt make things simple
  6. Types
  7. New form types <input type="color"> <input type="range"> <input type="date"> <input type="search" results="5" <input type="datetime"> autosave="saved-searches"> <input type="datetime-local"> <input type="tel"> <input type="email"> <input type="time"> <input type="month"> <input type="url"> <input type="number"> <input type="week">
  8. Siri, where is iPhone 5?
  9. Attributes
  10. New form attributes <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">
  11. <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">
  12. <input type="text" mozactionhint="Next">
  13. Elements
  14. New form elements <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>
  15. <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>
  16. <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>
  17. Validation
  18. <input type="text" required>
  19. Only spaces are regarded as input :-(
  20. <input type="text" required style="visibility: hidden">
  21. No dialog, won't submit form Dialog at element No dialog, won't submit form Dialog at top left of screen (not browser)
  22. <input type="email" required>
  23. No support for international characters, i.e. röbert@kissonline.com won't work
  24. <input type="text" pattern="d{2}-d{5}">
  25. Empty fields are seen as valid
  26. <input type="text" title="So you tried to skip me?" required>
  27. <input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do it right!">
  28. elm.setCustomValidity("No, that's wrong!");
  29. Remove custom validation message by setting it to an empty string...
  30. elm.setCustomValidity("");
  31. Using setCustomValidity totally kills the checkValidity method
  32. (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); })();
  33. Styling
  34. input:required { border: 1px solid #00f; }
  35. input:valid { border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
  36. input:focus:invalid { border: 1px solid #f00; }
  37. input:-moz-ui-valid { border: 1px solid #0f0; } input:-moz-ui-invalid { border: 1px solid #f00; }
  38. input:-moz-placeholder { color: #f00; background: yellow; } input::-webkit-input-placeholder { color: #f00; background: yellow; }
  39. Works in Safari, but only with the text color, not the background
  40. 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; }
  41. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
  42. Can I use it?
  43. Can I use it?
  44. http://caniuse.com
  45. The beauty of HTML5 Forms
  46. Help each other
  47. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/
  • LucianoVolpe

    Dec. 3, 2014
  • jryoung

    Feb. 10, 2012
  • kogakure

    Oct. 20, 2011
  • pixelatorz

    Oct. 10, 2011
  • josemontiel

    Oct. 9, 2011
  • pilichph

    Oct. 8, 2011
  • hessi

    Oct. 7, 2011
  • cwebba1

    Oct. 7, 2011
  • zlulcon

    Oct. 7, 2011
  • russenreaktor

    Oct. 7, 2011

Views

Total views

16,496

On Slideshare

0

From embeds

0

Number of embeds

4,007

Actions

Downloads

151

Shares

0

Comments

0

Likes

10

×