HTML5 Forms - Inputs, Attributes, Validation

Covering some HTML5 forms inputs, attributes and in-browser validation techniques available in Google Chrome, as of November 2011.

Presented at Adobe WebUP, in February 2012.

Transcript

1. Stop    collecting  data  like  it’s  2001!  
2. What  you’ll  learn  today  
3. Some  new  kids  on  the  block  
4. ¡  Creates  a  slider  with  a  thumb  button   ¡  Use  cases:   §  Setting  a  value  from  a  range  (ex:  max  price)   §  Setting  the  position  of  something   <input type=“range” />
5. ¡  min  =  <number>   ¡  max  =  <number>   ¡  step  =  <number>   ¡  value  =  <number>     <input type=“range” min=“0” max=“100” />
6. // range with default value <input type=“range” value=“5” /> // range within defined boundaries <input type=“range” min=“0” max=“100” /> // step of the input’s increment value <input type=“range” step=“5” min=“0” max=“100” />
7. ¡  No  native  support  for  “multiple  thumbs”   §  Use  case:  filtering  within  a  range  of  prices     (min/max)     ¡  Solution:  use  JS  widgets   §  jQuery  UI  Slider:     ▪  http://jqueryui.com/demos/slider/#range     <input type=“range” />
8. ¡  Accepts  valid  numbers     ¡  Creates  an  input  box  with  a  up/down  ticker   <input type=“number” />
9. // default value <input type=“number” value=“5” /> // accept numbers within boundaries <input type=“number” min=“0” max=“100” /> // step of the input’s up/down buttons <input type=“number” step=“5” min=“0” max=“100” />
10. // step of the input’s up/down buttons <input type=“number” step=“0.01” min=“0” max=“1” /> // negative to positive range <input type=“number” min=“-100” max=“100” />
11. ¡  Creates  an  input  box  with  a  “search”  icon  and   a  reset  button.     ¡  Has  a  “history”  option     <input type=“search” />
12. <input type=“search” />
13. <input type=“date” value=“2012-12-21” /> ¡  Accepts  valid  dates   ¡  Shows  native  date-­‐picker  in  some   implementations  (iOS,  Android,  Opera)  
15. // default value <input type=“date” value=“2012-12-21” /> // select between a range of dates <input type=“date” min=“2012-01-01” max=“2012-12-31” />
16. <input type=“url” value=“http://cnn.com” /> ¡  Accepts  valid  URLs   §  Protocol  not  enforced   ▪  http://     ▪  git://     ▪  xxx://  
17. <input type=“email” value=“quest@cnn.com” /> ¡  Accepts  valid*  email  addresses   §  *willful  violation  of  RFC  5322   ▪  user@localhost    
18. ¡  New  input  types   §  Range   §  Number   §  Search   §  Date   §  URL   §  Email   ¡  Rely  on  the  browser   for  usability   ¡  Upcoming:     Rely  on  the  browser   for  validation  
20. ¡  Temporary  informative  value  for  an  input   ¡  Common  in  search  boxes:   §  “Search  for  …”   §  “Type  your  question  here  …  ”        
21. // using a placeholder value <input type=“search” placeholder=“Search for …” />
22. ¡  Use  the  browser’s  local  form  history   §  Indexed  search  by  the  input  name:   ▪  email   ▪  first_name   ▪  url   ▪  …  
23. ¡  When  possible,  use  popular  input  names   §  Helps  the  user  fill  forms  faster     ¡  autocomplete=“off”  prevents  this  behavior    
24. // autocomplete when typing using the browser’s history for inputs with name = “email” <input type=“text” name=“email” autocomplete />
25. ¡  Focus  the  user  input  on  page  load   §  Lets  the  user  quickly  start  typing   §  Think  Google  homepage    
26. ¡  Mark  an  input  as  required  to  be  filled   ¡  The  browser  will  prevent  form  submit  if  the   input  isn’t  filled   ¡  Bonus:  in-­‐browser  validation    
27. // make an input required <input type=“text” name=“user” required />
28. // make an input required <input type=“text” name=“user” required /> var input = document.querySelector(‘input[name=“user”]’); // custom invalid message input.setCustomValidity(“What’s your name?");
29. Google  Chrome  default   Custom  
30. ¡  Regular  Expression  to  validate  the  input  value   §  Phone  number   §  Zip  code   §  URL   §  …   ¡  The  browser  will  prevent  form  submit  if  the   input  value  does  not  match  
31. // make the browser validate against a regex pattern <input type=“text” name=“credit_card” pattern=“[0-9]{13,16}” required />
32. ¡  Prevents  user  input   ¡  Input  renders  grayed-­‐out        
33. // prevent the user from changing the value <input type=“checkbox” disabled />
34. ¡  Prevents  user  input       ¡  Difference  from  “disabled”   §  Readonly  input  values  are  sent  on  form  submit   §  Disabled  input  values  are  not  sent    
35. // prevent the user from changing the value // sends the value on form submit <input type=“checkbox” checked readonly />
36. ¡  Rely  on  the  browser  for  usability   §  placeholder     §  autocomplete   §  autofocus   §  required   §  pattern   §  disabled   §  readonly  
37. ¡  The  browser  can  validate  client-­‐side   ¡  Give  the  browser  hints  to     §  what  is  required   §  what  is  valid   §  what  is  enabled  /  disabled   ¡  Input  types  help  with  validation   §  date,  number,  email,  etc…  
39. ¡  Use  event  listeners   ¡  Chrome,  Safari,  FireFox,  Opera,  IE9+   §  element.addEventListener()   ¡  IE  6  –  8   §  element.attachEvent()    
40. // Listening for events el.addEventListener(“click”, handler, false); function handler(e){ // “e” is the MouseEvent object }
41. ¡  Triggered  when  you  submit  a  form   §  Pressing  the  submit  button   §  Pressing  the  “Enter”  key  in  a  focused  input   ¡  Reloads  the  page    
42. ¡  event.preventDefault()   ¡  Useful  for     §  Validation   §  Submit  form  with  AJAX   §  Client-­‐side  processing    
43. // Listening for a form submit event form.addEventListener(“submit”, handler, false); function handler(e){ // prevent the form submit and page refresh e.preventDefault(); }
44. ¡  Triggered  on  an  input  when  it  is  “active”:   §  Can  type  into  a  text  field   §  Can  toggle  a  checkbox/radio  button      
45. // Listening for an input focus event input.addEventListener(“focus”, handler, false); function handler(e){ console.log(“Focused ” + e.target); }
46. ¡  Triggered  on  an  input  when  it  has  left  its   “active”  state:   §  Clicked  outside  it   §  Pressed  “Tab”  key  and  moved  to  another  element    
47. // Listening for an input blur event input.addEventListener(“blur”, handler, false); function handler(e){ console.log(“Left from ” + e.target); }
48. ¡  Triggered  on  an  input  when  its  value  changes   ¡  Important:     §  On  text-­‐like  inputs  it  is  triggered  only  after  the   “blur”  event   §  Listen  for  “keyup”  or  “keydown”  events  instead    
49. // Listening for a range input change event range.addEventListener(“change”, handler, false); function handler(e){ console.log(“Value ” + e.target.value); }
50. // Listening for a text input change event input.addEventListener(“keyup”, handler, false); function handler(e){ // e.keyCode tells you the key (27 = Esc) console.log(“The key code: ” + e.keyCode); }
51. ¡  Prevent  form  submit     ¡  Listen  for  input  state  changes   §  focus   §  blur       ¡  Listen  for  changes  on  inputs   §  change   §  keyup  
53. ¡  Spotty  support   ¡  Accelerated  pace  of  browser  updates   §  Firefox,  Chrome  1  –  1.5  month  /  cycle   ¡  https://wiki.mozilla.org/Releases   ¡  http://www.chromium.org/developers/ calendar    
54. ¡  http://html5test.com/     ¡  http://www.browserscope.org/   ¡  http://www.quirksmode.org/compatibility.html   ¡  Self-­‐service:   §  http://miketaylr.com/code/input-­‐type-­‐attr.html   §  http://miketaylr.com/code/html5-­‐forms-­‐ui-­‐ support.html    
55. http://www.netmarketshare.com/browser-­‐market-­‐share.aspx?qprid=1&qpcustomb=0    
56. ¡  IE  9,  IE10  work  only  with  Windows  7   §  Windows  XP  ~47%  OS  market   §  Windows  7  ~  36%     http://www.netmarketshare.com/operating-­‐system-­‐ market-­‐share.aspx?qprid=10&qpcustomd=0    
57. ¡  WebKit  is  becoming  the  mobile  web  platform   ¡  Mobile  browsers:   §  ~75  %  WebKit-­‐based  (iOS  +  Android)   §  ~  20  %  Opera  Mini     ¡  Fragmentation   §  iOS   §  Android  (latest)   §  Android  (vendor  “X”)    
58. ¡  http://www.modernizr.com/   §  Check  feature  availability  in  the  browser   §  Use  “polyfills”  for  old  browsers  
59. ¡  http://www.browserscope.org   §  Distributed  testing  by  crowdsourcing   §  Every  visitor  runs  the  the  tests  in  the  background   §  Write  your  own  JS  tests   §  Graphs,  feature  support  evolution  
60. ¡  http://www.browserscope.org/user/tests/ table/ agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQ GDA   ¡  Up  to  date  metrics  on  feature  support   ¡  Desktop  and  mobile  browser  coverage  
61. I skate to where the puck is going to be, not where it has been. Wayne Gretzky http://www.flickr.com/photos/tazphotos/4400220464/  
62. thanks!   Razvan  Caliman   rcaliman@adobe.com     razvan.caliman@gmail.com     now,  go  build  something  cool!