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

A good ie6 cheatsheet (25 bugs fixed)

Jan 01

didierbrowsers No Comments

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

Share