HTML5 e Css3 - 7 | WebMaster & WebDesigner

1,566 views
1,506 views

Published on

Settima lezione Modulo HTML5 e Css3 per il corso di 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
1,566
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
52
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● SuggestMore Javascript →
  4. 4. ResponsabilitadeiBrowser
  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. SupportIE FIREFOX SAFARI CHROME OPERA IPHONEANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+4.0+ 2.1+Placeholder
  8. 8. autofocus<form>  <input name="b">  <input name="q" autofocus>  <input name="c">  <input type="submit" value="Search"></form>
  9. 9. AutofocusSupportIE FIREFOX SAFARI CHROME OPERA IPHONEANDROID10.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 detectsHTML5 and CSS3 features in the user’sbrowser.
  15. 15. Modernizr fa un test della presenza di oltre20 features HTML5/CSS3, restituendo unoggetto JavaScript e una serie di classi CSSche lo sviluppatore può utilizzare per avereun quadro preciso delle funzionalitàsupportate dal browser che in quelmomento sta navigando le sue pagine
  16. 16. Features● @font-face● Canvas● Canvas Text● WebGL● HTML5 Audio● HTML5 Audio formats● HTML5 Video● HTML5 Video formats● rgba()● Hsla()● border-image● border-radius● box-shadow● text-shadow● Multiple backgrounds● background-size● opacity● CSS Animations● CSS Columns● CSS Gradients
  17. 17. Features●CSS Reflections● CSS 2D Transforms● CSS 3D Transforms● Flexible Box Model● CSS Transitions● Geolocation API●Input Types● Input Attributes● localStorage● sessionStorage● Web Workers● applicationCache● SVG●Inline SVG●SVG Clip paths●SMIL●Web SQL Database●IndexedDB●Web Sockets●hashchange Event●History Management●Drag and Drop●Cross-window Messaging●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. http://jqueryui.com/datepicker/<script>  var i = document.createElement("input");  i.setAttribute("type", "date");  if (i.type == "text") {//jquery ui datepicker  }</script>ChromeChrome
  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://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me

×