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://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

matteo@magni.me