html5 e css3 - 7 | webmaster & webdesigner
DESCRIPTION
Settima lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesignerTRANSCRIPT
HTML5 e Css3 [7]Matteo Magni
Form
Molto Lavoro!
● Layout● Validation● Suggest
More Javascript →
Responsabilita' dei
Browser
placeholder
<form>
<input name="q" placeholder="Go to a Website">
<input type="submit" value="Search">
</form>
Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 4.0+ 11.0+ 4.0+ 2.1+
Placeholder
autofocus
<form>
<input name="b">
<input name="q" autofocus>
<input name="c">
<input type="submit" value="Search">
</form>
Autofocus
Support IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID10.0+ 4.0+ 4.0+ 3.0+ 10.0+ - 3.0+
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>
Email addresses
<form>
<input type="email">
<input type="submit" value="Go">
</form>
Web Addresses
<form>
<input type="url">
<input type="submit" value="Go">
</form>
Number
<form>
<input name="n"
type="number"
min="0" max="10"
step="2" value="6">
<input type="submit" value="Go">
</form>
http://modernizr.com/
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s
browser.
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
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
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
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/
}
range
<form>
<input name="n"
type="range"
min="0" max="10"
step="2" value="6">
<input type="submit" value="Go">
</form>
Date
<form>
<input type="date"><br/>
<input type="datetime"><br/>
<input type="datetimelocal"><br/>
<input type="month"><br/>
<input type="week"><br/>
<input type="time"><br/>
<input type="submit" value="Go">
</form>
http://jqueryui.com/datepicker/
<script> var i = document.createElement("input"); i.setAttribute("type", "date"); if (i.type == "text") {
//jquery ui datepicker }</script>
Chrome
Chrome
Search
<form>
<input name="q" type="search">
<input type="submit" value="Find">
</form>
Chrome →
Safari →
Color
<form>
<input name="q" type="color">
<input type="submit" value="Send">
</form>
Chrome &
Validate
<form> <input type="email"> <input type="submit" value="Go"></form>
No Validate
<form novalidate>
<input type="email" id="addr">
<input type="submit" value="Subscribe">
</form>
required
<form> <input id="q" required> <input type="submit" value="Search"></form>
required
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: