Forms with HTML5

Jan 06

didierbrowsers, Web No Comments

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

Web Trend map by IA jp

Sep 13

didierWeb 2 Comments

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