Web Forms 2 で healthy living!

HTML5 Forms で healthy living!

Opera logo
World map
I love the web

 

I love the web

だけど…

Choice between usability and design
Unhealthy working
Getting stressed
rakuten.co.jp and amazon.co.jp

解決策は…

XForms Basic

 

 

XForms Basic

Web Forms 2.0

 

XForms Basic

Web Forms 2.0

HTML5 Forms

  • number
  • range
  • url
  • email
  • date
  • month
  • week
  • time
  • datetime
  • datetime-local
  • search
  • color
  • tel
  • [autofocus]
  • [pattern]
  • [placeholder]
  • [required]

ブラウザ対応の判定方法(要素)

var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

ブラウザ対応の判定方法(要素)

// Modernizr の使い方(modernizr.com)
if (!Modernizr.inputtypes.date) {
	// 対応していない場合
}

ブラウザ対応の判定方法(属性)

var i = document.createElement('input');
return 'autofocus' in i;

結果は…

Relaxed
Jogging
Life of luxury

Thank you!

@ourmaninjapan