1. HTML5でユーザビリティを高めるための
フォーム構築法
株式会社ピクルス 山下美緒

2. MAX 2011
・HTML5の基本に忠実にコーディングしよう！
・HTML5をもっと積極的に使おう！

3. Adobe TV
http://www.adobe.com/jp/joc/max2011/

4. HTML5/CSSのおすすめセッション
・HTML5 Semantic Web
・HTML5: The 2012 of the Web
・CSS Takes Over the World

5. FORM
HTML5 Semantic Web
HTML5: The 2012 of the Web
HTML5: The 2012 of the Web

6. （1） 閲覧するコンテンツ→ユーザーが作るコンテンツへのシフト
「使うサービス」（SNS、コミュニケーション）、
「作るコンテンツ」（ユーザージェネレート型）が主流に
（2） マルチデバイスへのシフト
スマートフォンやタブレットなどのタッチパネルデバイス
入力のしやすさは、とても大切
フォームは、とても大切！！
フォームのユーザビリティを高めることが大切

7. HTML5でユーザビリティを高めるための
フォーム構築法

13. ユーザビリティが高いとは…

14. ストレスフリー

15. こんなストレスを感じたことはないですか？
・文字が小さすぎる
デザイン
・どこをクリックすればいいのか、わからない
・なかなかページが表示されない
・ブックマークしたら、タイトルが「無題ドキュメント」だった
・スマートフォンでボタンがクリックしづらい HTML
・フォームに何を入力すればよいのかわからない…
・フォームで警告がでるけど、どこを直したらいいのかわからない

16. HTMLで解決できること
・文書の構造に適したマークアップ
・meta、title、altなど見えない部分もきちんと
・様々な環境への配慮
・サイトのパフォーマンスの向上
・フォームのユーザビリティを高める

17. HTML5のフォームだと…
・入力補助
・バリデート（エラーチェック）
・項目に適した入力方法が選べる
・（スマートフォンの場合）入力項
目
に適したキーボードが表示できる

18. input type属性値
hidden search datetime
text tel date
password url month
checkbox email week
radio number time
file range datetime-local
submit color
image
reset
button

19. 予想通りかもしれませんが…
すべてのブラウザで、
この新しいType属性値が
使える訳ではありません。

20. ただし！！
新しいType属性値に対応してないブラウザは…
認識できなかった属性値を
<input type=“text”>
と同等に扱います。

21. <input type=”url" name=”url”>

22. <input type=”url" name=”url”>
【特徴1】バリデーション

23. <input type=”url" name=”url”>
【特徴2】書式を整えてくれる
「http://」が補完されます

24. <input type=”url" name=”url”>
【特徴3】入力に適したキーボードを表示
※注意！！

25. <input type=”email" name=”email”>

26. <input type=”email" name=”url”>
【特徴1】バリデーション

27. <input type=”email" name=”url”>
【特徴2】入力に適したキーボードを表示
※注意！！

28. <input type=”tel" name=”tel”>

29. <input type=”tel" name=”tel”>
【特徴】入力に適したキーボードを表示
GALAXY S

30. <input type=”number" name=”number”>

31. <input type=”number" name=”number”>
【特徴1】スピンボックスの表示

32. <input type=”number" name=”number”>
※さらに…
属性を追加すると、もっと便利になります。
<input type="number" name=“age”
min="0" max="10" step=”1”>
0（minの値）〜10（max）の数値の間で、
1(step)刻みでコントロールすることができます。

33. <input type=”number" name=”number”>
【特徴2】バリデート
エラー表示は出ません…が、数値以外の入力ができません。

34. <input type=”number" name=”number”>
【特徴3】入力に適したキーボードを表示
GALAXY S

35. 組み合わせて使いたい属性

36. required
必須項目が指定できます
<input type=”text" name=”text” required>

37. pattern
正規表現を使った入力チェック
<input type=”text" name=”text” pattern=“^[abc]$”>

38. novalidate
エラー表示を無効にする
<form novalidate>

39. placeholder
ボックス内にガイドテキストを表示します
<input type=”text" name=” text”
placeholder=“お名前(漢字)”>

40. ちなみに…
・required
・pattern
・novalidate
・placeholder
も、対応していないブラウザは無視してくれます。

41. これから期待のType属性値

42. <input type="range" name=” range”>

43. <input type=”range" name=”range”>
【特徴1】スライダ表示

44. <input type=”range" name=”range”>
※さらに…
属性を追加すると、もっと便利になります。
<input type=”range" name=“range”
min="0" max="10" step=”1”>
0（minの値）〜10（max）の数値の間で、
1(step)刻みでコントロールすることができます。

45. <input type="color" name=“color”>

46. <input type=”color" name=”color”>
【特徴1】カラーピッカー表示

47. <input type="date” name=“date”>

48. <input type=”date" name=”date”>
【特徴1】日付ピッカーの表示

49. <input type=”date" name=”date”>
※chrome、Safari
スピンコントローラーが表示されます

50. <input type="datetime” name=“date”>
<input type=”month” name=“date”>
<input type=”week” name=“date”>
<input type=”time” name=“date”>
<input type=”datetime-local” name=“date”>

51. <input type=”search" name=”search”>

52. <input type=”search" name=”search”>
【特徴1】ブラウザの表示が変わります

53. 使いやすいフォーム
入力しやすくなる
ストレスフリー!!

54. ご清聴ありがとうございました！！

55. 参考サイト
The Current State of HTML5 Forms - wufoo
http://wufoo.com/html5/
HTML5 Doctor
http://html5doctor.com/