Settima lezione del modulo HTML5 e Css3 del corso per 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. Placeholder
Support
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
10.0+ 4.0+ 4.0+ 4.0+ 11.0+ 4.0+ 2.1+

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 ● 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

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

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. <script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
//jquery ui datepicker
}
http://jqueryui.com/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://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me