HTML5 e Css3 - 7 | WebMaster & WebDesigner

733 views

Published on

Settima lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
733
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 e Css3 - 7 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [7]Matteo Magni
  2. 2. Form
  3. 3. Molto Lavoro!● Layout● Validation● Suggest More Javascript →
  4. 4. Responsabilita dei Browser
  5. 5. HTML5 WebFormhttp://diveintohtml5.info/forms.html
  6. 6. placeholder<form>  <input name="q" placeholder="Go to a Website">  <input type="submit" value="Search"></form>
  7. 7. Placeholder Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+ 4.0+ 2.1+
  8. 8. autofocus<form>  <input name="b">  <input name="q" autofocus>  <input name="c">  <input type="submit" value="Search"></form>
  9. 9. Autofocus Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 3.0+ 10.0+ - 3.0+
  10. 10. Js Or jQuery<script>$(document).ready(function() {  if (!("autofocus" in document.createElement("input"))) {      $("#q").focus();  }});</script><form name="f">  <input id="q" autofocus>  <input type="submit" value="Go"></form>
  11. 11. Email addresses<form>  <input type="email">  <input type="submit" value="Go"></form>
  12. 12. Web Addresses<form>  <input type="url">  <input type="submit" value="Go"></form>
  13. 13. Number<form>    <input name="n"       type="number"       min="0" max="10"       step="2" value="6">    <input type="submit" value="Go">  </form>
  14. 14. http://modernizr.com/Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  15. 15. Modernizr fa un test della presenza di oltre 20 features HTML5/CSS3, restituendo unoggetto JavaScript e una serie di classi CSSche lo sviluppatore può utilizzare per avere un quadro preciso delle funzionalità supportate dal browser che in quel momento sta navigando le sue pagine
  16. 16. Features● @font-face ● border-image● Canvas ● border-radius● Canvas Text ● box-shadow● WebGL ● text-shadow● HTML5 Audio ● Multiple backgrounds● HTML5 Audio formats ● background-size● HTML5 Video ● opacity● HTML5 Video formats ● CSS Animations● rgba() ● CSS Columns● Hsla() ● CSS Gradients
  17. 17. Features● CSS Reflections ● Inline SVG● CSS 2D Transforms ● SVG Clip paths● CSS 3D Transforms ● SMIL● Flexible Box Model● CSS Transitions ● Web SQL Database● Geolocation API ● IndexedDB● Input Types ● Web Sockets● Input Attributes ● hashchange Event● localStorage ● History Management● sessionStorage● Web Workers ● Drag and Drop● applicationCache ● Cross-window Messaging● SVG ● Touch Events
  18. 18. Use Modernizr<script src="/js/modernizr.js"></script>if (!Modernizr.inputtypes.number) {  // no native support for type=number fields  // maybe try jQuery or some other JavaScript frameworkhttp://jqueryui.com/spinner/}
  19. 19. range<form>    <input name="n"       type="range"       min="0" max="10"       step="2" value="6">    <input type="submit" value="Go">  </form>
  20. 20. Date<form>        <input type="date"><br/>        <input type="datetime"><br/>        <input type="datetime­local"><br/>        <input type="month"><br/>        <input type="week"><br/>        <input type="time"><br/>        <input type="submit" value="Go"></form>
  21. 21. <script>  var i = document.createElement("input");  i.setAttribute("type", "date");  if (i.type == "text") { //jquery ui datepicker  } http://jqueryui.com/datepicker/</script> Chrome Chrome
  22. 22. Search<form><input name="q" type="search"><input type="submit" value="Find"></form>
  23. 23. Chrome →Safari →
  24. 24. Color<form><input name="q" type="color"><input type="submit" value="Send"></form>
  25. 25. Chrome &
  26. 26. Validate<form>  <input type="email">  <input type="submit" value="Go"></form>
  27. 27. No Validate<form novalidate>  <input type="email" id="addr">  <input type="submit" value="Subscribe"></form>
  28. 28. required<form>  <input id="q" required>  <input type="submit" value="Search"></form>
  29. 29. required
  30. 30. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×