html5 e css3 - 7 | webmaster & webdesigner

HTML5 e Css3 [7]Matteo Magni

Form

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>

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="datetime­local"><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://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me