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

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

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

Adobe TVhttp://www.adobe.com/jp/joc/max2011/

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

FORMHTML5 Semantic Web HTML5: The 2012 of the Web HTML5: The 2012 of the Web

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

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

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

ストレスフリー

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

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

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

input type属性値hidden search datetimetext tel datepassword url monthcheckbox email weekradio number timefile range datetime-localsubmit colorimageresetbutton

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これから期待のType属性値

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

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

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

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

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

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

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

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

参考サイトThe Current State of HTML5 Forms - wufoohttp://wufoo.com/html5/HTML5 Doctorhttp://html5doctor.com/

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

by Mio Yamashita on Nov 23, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

ADC MEETUP 03 HTML5でユーザビリティを高めるためのフォーム構築法 — Presentation Transcript