Web Forms 2 で healthy living!

HTML5 Forms で healthy living!

だけど…

解決策は…

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

people.opera.com/danield/html5/forms-demo_ja.html

people.opera.com/danield/css3/text-shadow/

ブラウザ対応の判定方法（要素）

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;

結果は…

Thank you!

www.opera.com

@ourmaninjapan