![pattern
正規表現を使った入力チェック
<input type=”text" name=”text” pattern=“^[abc]$”>](https://image.slidesharecdn.com/adobemaxretweet6-111123224413-phpapp02/85/ADC-MEETUP-03-HTML5-37-320.jpg)
ADC MEETUP 03 贬罢惭尝5でユーザビリティを高めるためのフォーム构筑法
- 1. 贬罢惭尝5でユーザビリティを高めるための フォーム构筑法 株式会社ピクルス 山下美緒
- 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. 贬罢惭尝5でユーザビリティを高めるための フォーム构筑法
- 13. ユーザビリティが高いとは…
- 14. ストレスフリー
- 15. こんなストレスを感じたことはないですか？ ?文字が小さすぎる デザイン ?どこをクリックすればいいのか、わからない ?なかなかページが表示されない ?ブックマークしたら、タイトルが「無題ドキュメント」だった ?スマートフォンでボタンがクリックしづらい HTML ?フォームに何を入力すればよいのかわからない… ?フォームで警告がでるけど、どこを直したらいいのかわからない
- 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”> と同等に扱います。
- 22. <input type=”url" name=”url”> 【特徴1】バリデーション
- 23. <input type=”url" name=”url”> 【特徴2】書式を整えてくれる 「http://」が補完されます
- 24. <input type=”url" name=”url”> 【特徴3】入力に適したキーボードを表示 ※注意！！
- 26. <input type=”email" name=”url”> 【特徴1】バリデーション
- 27. <input type=”email" name=”url”> 【特徴2】入力に適したキーボードを表示 ※注意！！
- 29. <input type=”tel" name=”tel”> 【特徴】入力に適したキーボードを表示 GALAXY S
- 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. これから期待の罢测辫别属性値
- 42. <input type="range" name=” 谤补苍驳别”&驳迟;
- 43. <input type=”range" name=”谤补苍驳别”&驳迟; 【特徴1】スライダ表示
- 44. <input type=”range" name=”谤补苍驳别”&驳迟; ※さらに… 属性を追加すると、もっと便利になります。 <input type=”range" name=“range” min="0" max="10" step=”1”> 0（minの値）?10（max）の数値の間で、 1(step)刻みでコントロールすることができます。
- 46. <input type=”color" name=”color”> 【特徴1】カラーピッカー表示
- 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”>
- 52. <input type=”search" name=”search”> 【特徴1】ブラウザの表示が変わります
- 54. ご清聴ありがとうございました！！
- 55. 参考サイト The Current State of HTML5 Forms - wufoo http://wufoo.com/html5/ HTML5 Doctor http://html5doctor.com/