TipsInBox » Web http://www.didiergalland.com Hints and tips of a web worker Wed, 04 Jan 2012 00:35:19 +0000 en hourly 1 http://wordpress.org/?v=3.3 Forms with HTML5 http://www.didiergalland.com/2010/01/06/forms-with-html5/ http://www.didiergalland.com/2010/01/06/forms-with-html5/#comments Tue, 05 Jan 2010 22:58:57 +0000 didier http://www.didiergalland.com/2010/01/06/forms-with-html5/ A Form of Madness – Dive Into HTML5

Doctype : for HTML 5 : “<!DOCTYPE html>”.  (case-insensitive)

Placeholder

safari + chrome only

<input name="q" placeholder="Type your query here">

Autofocus

saf + chrome + opera (fallback)

<input name="q" autofocus>

Email and web addresses

“Browsers (even ie6!) that don’t recognize type=”email” will treat it as type=”text” and render it as a plain text field.” Iphone will adapt it’s virtual keyboard (no space, @…)

<input type="email">
<input type="url">

Number as spinboxes

Rendering depends on browser (iPhone optimizes the virtual keyboard for numeric input, opera renders as a spinbox control…). The browsers that don’t support type=”number” will render it as plain text field.

<input type="number" min="0" max="10" step="2" value="6">

Javascript methods available in HTML5 :

  • input.stepUp(n) increases the field’s value by n.
  • input.stepDown(n) decreases the field’s value by n.
  • input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)

Numbers as sliders

<input type="range" min="0" max="10" step="2" value="6">

Date picker

Supported only by opera, rendered as plain text boxes in browsers that don’t support.

<input type="date" />
<input type="datetime"/>
<input type="month" /> (month + year)
<input type="week"/>
<input type="time"/>

Search boxes

<input name="q" type="search">

Color picker

No browser supports it yet.

<input type="color">


Fallback code example for autofocus (jquery)

$(document).ready(function() {
  if (!("autofocus" in document.createElement("input"))) {
      $("#q").focus();
  }
});

Share

]]> http://www.didiergalland.com/2010/01/06/forms-with-html5/feed/ 0 Web Trend map by IA jp http://www.didiergalland.com/2009/09/13/web-trend-map-by-ia-jp/ http://www.didiergalland.com/2009/09/13/web-trend-map-by-ia-jp/#comments Sun, 13 Sep 2009 01:02:29 +0000 didier http://www.didiergalland.com/?p=71 Informationarchitects.jp presents the 200 most successful websites ordered in a mindmap onto the Tokyo Metro map. The websites are ordered by category (lines), proximity, success (big stack), etc. It offers a wide and significant view of the 2008′s web.

I ordered the printed (A0) version today ($70 including shipping).

Image (6740 x 4768) : http://informationarchitects.jp/wp-content/uploads/2009/07/wtm4-final.png and a local copy (just in case).

Interactive version (good idea for browser home page) : http://webtrendmap.com/

Zoom-able and draggable unofficial version : http://openzoom.org/webtrendmap/

wtm4

Share

]]> http://www.didiergalland.com/2009/09/13/web-trend-map-by-ia-jp/feed/ 2