Settima lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

1. HTML5 e Css3 [7]
Matteo Magni

2. Form

3. Molto Lavoro!
● Layout
● Validation
● Suggest
More Javascript →

5. Responsabilita'
dei
Browser

6. HTML5 WebForm
http://diveintohtml5.info/forms.html

7. placeholder
<form>
<input name="q" placeholder="Go to
a Website">
<input type="submit"
value="Search">
</form>

8. Support
IE FIREFOX SAFARI CHROME OPERA IPHONE
ANDROID
10.0+ 4.0+ 4.0+ 4.0+ 11.0+
4.0+ 2.1+
Placeholder

9. autofocus
<form>
<input name="b">
<input name="q" autofocus>
<input name="c">
<input type="submit"
value="Search">
</form>

10. Autofocus
Support
IE FIREFOX SAFARI CHROME OPERA IPHONE
ANDROID
10.0+ 4.0+ 4.0+ 3.0+ 10.0+ -
3.0+

11. 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>

12. Email addresses
<form>
<input type="email">
<input type="submit" value="Go">
</form>

14. Web Addresses
<form>
<input type="url">
<input type="submit" value="Go">
</form>

16. Number
<form>
<input name="n"
type="number"
min="0" max="10"
step="2" value="6">
<input type="submit" value="Go">
</form>

19. http://modernizr.com/
Modernizr is a JavaScript library that detects
HTML5 and CSS3 features in the user’s
browser.

20. Modernizr fa un test della presenza di oltre
20 features HTML5/CSS3, restituendo un
oggetto JavaScript e una serie di classi CSS
che lo sviluppatore può utilizzare per avere
un quadro preciso delle funzionalità
supportate dal browser che in quel
momento sta navigando le sue pagine

21. 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

22. 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

24. 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 framework
http://jqueryui.com/spinner/
}

25. range
<form>
<input name="n"
type="range"
min="0" max="10"
step="2" value="6">
<input type="submit" value="Go">
</form>

26. 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>

27. http://jqueryui.com/datepicker/
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
//jquery ui datepicker
}
</script>
Chrome
Chrome

28. Search
<form>
<input name="q" type="search">
<input type="submit" value="Find">
</form>

29. Chrome →
Safari →

30. Color
<form>
<input name="q" type="color">
<input type="submit" value="Send">
</form>

31. Chrome &

32. Validate
<form>
<input type="email">
<input type="submit"
value="Go">
</form>

33. No Validate
<form novalidate>
<input type="email" id="addr">
<input type="submit"
value="Subscribe">
</form>

34. required
<form>
<input id="q" required>
<input type="submit"
value="Search">
</form>

35. required

36. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me