HTML5 workshop, forms

  • View
    1.870

  • Download
    0

Embed Size (px)

DESCRIPTION

Workshop given at Jfokus 2012

Text of HTML5 workshop, forms

  • HTML5 Forms - KISS time
  • Forms
  • Thou shalt make things simple
  • Types
  • New form types autosave="saved-searches">
  • Attributes
  • New form attributes
  • Elements
  • New form elements
  • 70%
  • Validation
  • Only spaces are regarded as input :-(
  • No dialog, wont submit formDialog at elementNo dialog, wont submit formDialog at top left of screen (notbrowser)
  • No support for internationalcharacters, i.e.rja@kissonline.com wont work
  • Empty elds are seen as valid
  • elm.setCustomValidity("No, thats wrong!");
  • Remove custom validation messageby setting it to an empty string...
  • elm.setCustomValidity("");
  • Using setCustomValidity totallykills the checkValidity method
  • (function () { var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function () { this.setCustomValidity(""); }, false); oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, thats wrong!"); }, false);})();
  • Styling
  • input:required { border: 1px solid #00f;}
  • input:valid { border: 1px solid #0f0;}input:invalid { border: 1px solid #f00;}input:out-of-range { border: 1px solid #f00;}
  • 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; background: yellow;}
  • Works in Safari, but only with thetext color, not the background
  • 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;}
  • http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  • Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/