HTML5 e Css3 - 7 | WebMaster & WebDesigner

Molto Lavoro!
● Layout
● Validation
● Suggest

More Javascript →

Responsabilita'
dei
Browser

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

placeholder

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

Placeholder

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

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 ANDROID
10.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">
</form>

Web Addresses
<form>
<input type="url">
</form>

Number
<form>
    <input name="n"
      type="number"
      min="0" max="10"
      step="2" value="6">
  </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 ● 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

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

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">
  </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/>
</form>

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

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

Validate

<form>
<input type="email">
value="Go">
</form>

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

required

<form>
<input id="q" required>
value="Search">
</form>

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

HTML5 e Css3 - 7 | WebMaster & WebDesigner

More Related Content

What's hot (20)

Similar to HTML5 e Css3 - 7 | WebMaster & WebDesigner (20)

More from Matteo Magni (20)

Recently uploaded (20)

HTML5 e Css3 - 7 | WebMaster & WebDesigner