HTML Forms

1,734 views
1,658 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,734
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Forms

  1. 1. 2010 年 09 月 16 日 HTML5 Working Draft ( 2010/06/24 ) HTML Forms
  2. 2. アジェンダ Proprietary and Confidential to Lanchester Co.,LTD. CONTENTS 2. HTML Forms とは 3. input 要素の type 属性拡張 1. HTML5 の成り立ち 4.属性による既存 input 要素の変更 5. その他の変更
  3. 3. 1. HTML5 の成り立ち Proprietary and Confidential to Lanchester Co.,LTD. HTML4.01 (及び XHTML1.x )は「文書の構造化」を目的として策定されていた。 W3C としては HTML からより構造化された XML ベースの XHTML に完全移行を目論んでいた。 ところが、 XHTML ファミリーが勧告になっているにも関わらず普及していない現状を無視し、 W3C が XHTML 化の道を突き進む中、 Ajax を始めとした Web アプリケーションが台頭( GoogleMaps や Gmail など: 2004 年頃~)し、ブラウザベンダーが「 HTML 自体を拡張してくれよ!」と言うも、 W3C 「うちでは標準化しないけどやりたいならどーぞ」との回答。 2004 年、 Apple 、 Mozilla 、 Opera の従業員達により「 WHATWG (ほゎっとだぶるじー: Web Hypertext Application Technology Working Group )」を設立、 HTML4.01 との互換性も意識した新しい HTML と Web アプリケーションに必要となる API を開発することを目的とする。 基本骨子は「 Web Application 1.0 」と呼ばれる DOM と Scripting による API の整備と、その UI となる「 Web Forms2.0 」からなる。 2005 年、 Web Application1.0 と Web Forms2.0 の Editor をしていた Opera 社の Ian Hickson 氏が Google へ移籍、フルタイムで仕様の策定に取り掛かる。 2007 年、 W3C に HTML の改定を行う Working Group が誕生、 WHATWG と共同で次世代 HTML の策定にあたることに。 その後、 Web Application1.0 が HTML5 に改称し、 Web Forms2.0 を取り込む形となる。 2009 年、 W3C が注力していた次世代 XHTML 、「 XHTML2.0 」は策定打ち切り、 HTML5 へ仕様の一部を統合することとなる。
  4. 4. 2. HTML Forms とは Proprietary and Confidential to Lanchester Co.,LTD. 前述の「 Web Forms2.0 」が HTML5 に取り込まれたが、その部分を強調する場合には「 HTML Forms 」と呼ぶことがある。 HTML で利用されている Form で「頻繁に利用される入力項目」を HTML 側で定義してしまおうという動き。 さらにはクライアントサイドのチェックに有用な API も定義してしまう。
  5. 5. 3-1. input 要素の type 属性拡張 Proprietary and Confidential to Lanchester Co.,LTD. <input type=&quot;text&quot;> <input type=&quot;password&quot;> <input type=&quot;checkbox&quot;> <input type=&quot;radio&quot;> <input type=&quot;submit&quot;> <input type=&quot;reset&quot;> <input type=&quot;button&quot;> <input type=&quot;image&quot;> <input type=&quot;file&quot;> <input type=&quot;hidden&quot;> 今まではこれだけで頑張ってた form だが・・・
  6. 6. 3-2. input 要素の type 属性拡張 Proprietary and Confidential to Lanchester Co.,LTD. <input type=&quot;text&quot;> <input type=&quot;password&quot;> <input type=&quot;checkbox&quot;> <input type=&quot;radio&quot;> <input type=&quot;submit&quot;> <input type=&quot;reset&quot;> <input type=&quot;button&quot;> <input type=&quot;image&quot;> <input type=&quot;file&quot;> <input type=&quot;hidden&quot;> <input type=&quot; number &quot;> <input type=&quot; range &quot;> <input type=&quot; url &quot;> <input type=&quot; email &quot;> <input type=&quot; date &quot;> <input type=&quot; month &quot;> <input type=&quot; week &quot;> <input type=&quot; time &quot;> <input type=&quot; datetime &quot;> <input type=&quot; datetime-local &quot;> <input type=&quot; search &quot;> <input type=&quot; color &quot;> <input type=&quot; tel &quot;> なんとびっくり 13 種も追加に! UserAgent (ブラウザ)での挙動は厳密に定義されていないものの提出されるデータ形式は定義されているのでサーバサイドでのチェックルーチンが使いまわせるという利点がある。
  7. 7. 3-3. <input type=&quot;number&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 名前の通り、数値のみの入力を受け付ける。 コントロールタイプとしては通常のテキストフィールド、またはスピナーコントロール。 ※ スピナーコントロール-> 「ならでは」な属性を指定した例: 靴のサイズ: <input type=&quot;number&quot; min=&quot;22&quot; max=&quot;28&quot; step=&quot;0.5&quot;> 最小値 22 、最大値 28 で 0.5 刻みの数値(靴のサイズ)が提出されることを期待する入力。
  8. 8. 3-4. <input type=&quot;range&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 数値の入力用だが、 number と違い、「大体このくらい」という意味を暗黙的に含んでいる。 コントロールタイプとしてはスライダコントロール、またはそれに類するもの。 ※ スライダコントロール-> 「ならでは」な属性を指定した例: 現在の気力充実度: <input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;0.1&quot;> 最小値 0 、最大値 100 で 0.1 刻みの値(気力充実度)が提出されることを期待する入力。 実際に提出される値は number と同等だが、こちらは具体的な値を要求しておらず、「大体」のセマンティクス(意図・意味)での要求となる。 コントロールの都合上、未入力の値が提出されることはない。 ※ はず・・・
  9. 9. 3-5. <input type=&quot;url&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 絶対 URL の入力用。 コントロールタイプとしてはテキストフィールド。 必ずしも http/https のスキームとは限っておらず、標準状態では [RFC3986] によるバリデーションが行われる。 ・・・はずだが、 Opera10/Chrome の実装では「 a: 」で通ってしまう。 ※ RFC 的には最低でも「 a:// 」だと思うんだけど自信はない 実際に入力してもらいたい内容を pattern 属性で指定した方が良いかも。 「ならでは」な属性は特になく、実際に提出される値は text と同等だが、こちらは URL を入力させるようなセマンティクスを持った UI となっている。 かもしれない。
  10. 10. 3-6. <input type=&quot;email&quot;> Proprietary and Confidential to Lanchester Co.,LTD. メールアドレスの入力用。 コントロールタイプとしてはテキストフィールド。 multiple 属性を付加することで複数のメールアドレスを入力することもできる。 標準状態では dot-atom-text&quot;@&quot;dot-atom-text 形式にてバリデーションが行われる。 ※ dot-atom-text は [RFC5322] にて定義 つまり「 [email_address] 」でも valid となってしまう。 ※ 多分。なので pattern 属性で指定した方が良いかも。 multiple 属性が指定された場合は妥当なメールアドレスの &quot;,&quot; 区切りリストが提出される。 「ならでは」な属性は特になく、実際に提出される値は text と同等だが、こちらはメールアドレスを入力させるようなセマンティクスを持った UI となっている。 かもしれない。
  11. 11. 3-7. <input type=&quot;date&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンなしの日付(年月日)入力用。 コントロールタイプとしては日付コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想定される。 「ならでは」な属性は特になく、実際に提出される値は text と同等だが、提出されるデータは「 YYYY-MM-DD 」の形となる。 ※ 2010-09-20
  12. 12. 3-8. <input type=&quot;month&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンなしの年月入力用。 コントロールタイプとしては月コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助が出るなどが想定される。 「ならでは」な属性は特になく、実際に提出される値は text と同等だが、提出されるデータは「 YYYY-MM 」の形となる。 ※ 2010-09
  13. 13. 3-9. <input type=&quot;week&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンなしの年・週入力用。 コントロールタイプとしては週コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想定される。 日本では週の入力はあまり使われてない気がする。 「ならでは」な属性は特になく、実際に提出される値は text と同等だが、提出されるデータは「 YYYY-WMM 」の形となる。 ※ 2010-W38 「週」は月曜から始まり、また、「 1 月 4 日」を含む週を第 1 週とする「 ISO 8601 」を基準とした週数となる。 ※ ややこしすぎです
  14. 14. 3-10. <input type=&quot;time&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンなしの時間(時分秒、小数点以下の秒)入力用。 コントロールタイプとしては時間コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想定される。 パラメータの指定次第でミリ秒( 1/1000 秒)までの入力をさせることができる。 標準状態では 60 秒単位での入力(=時:分)となる。 提出されるデータ形式は「 HH:MM:SS.mmm 」( URL エンコーデッド) ただし必要に応じて「 :SS 」「 .mmm 」部分は省略される。 「ならでは」な属性を指定した例: 100m 走の世界記録: <input type=&quot;time&quot; min=&quot;0.001&quot; max=&quot;10&quot; step=&quot;0.001&quot;> 0.001 秒 ~ 10 秒の範囲で提出されることを期待する入力。
  15. 15. 3-11. <input type=&quot;datetime&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンが UTC にセットされた日付・時間入力用。 コントロールタイプとしては日時コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想定される。 パラメータの指定次第でミリ秒( 1/1000 秒)までの入力をさせることができる。 標準状態では 60 秒単位での入力(=時:分)となる。 提出されるデータ形式は「 YYYY-MM-DD&quot;T&quot;HH:MM:SS.mmm&quot;Z&quot; 」( URL エンコーデッド) ただし必要に応じて「 :SS 」「 .mmm 」部分は省略される。 ※ 2010-09-20T08:00Z このフォーマットは「 ISO 8601 」にて定義されている日付と時刻の表記に関する国際規格であり、最後の Z は UTC を表す。
  16. 16. 3-12. <input type=&quot;datetime-local&quot;> Proprietary and Confidential to Lanchester Co.,LTD. タイムゾーンなしの日付・時間入力用。 コントロールタイプとしては日時コントロール。 UserAgent の実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想定される。 パラメータの指定次第でミリ秒( 1/1000 秒)までの入力をさせることができる。 標準状態では 60 秒単位での入力(=時:分)となる。 提出されるデータ形式は「 YYYY-MM-DD&quot;T&quot;HH:MM:SS.mmm 」( URL エンコーデッド) ただし必要に応じて「 :SS 」「 .mmm 」部分は省略される。 ※ 2010-09-20T08:00 このフォーマットは「 ISO 8601 」にて定義されている日付と時刻の表記に関する国際規格だが、タイムゾーンを指定することはできない。
  17. 17. 3-13. <input type=&quot;search&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 検索ワードの入力用。 コントロールタイプとしては検索フィールド。 「検索用の入力フォーム」というセマンティクスを持った UI 以外の差は(恐らく)ない。
  18. 18. 3-14. <input type=&quot;color&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 8 ビットの深度を持つ RGB の入力用。 コントロールタイプとしては色選択。 現時点では実装がないが、カラーピッカーなどによる入力補助が想定される。 提出されるデータは HTML ではおなじみの「 #rrggbb 」形式となり、文字種も小文字と定義されている。
  19. 19. 3-15. <input type=&quot;tel&quot;> Proprietary and Confidential to Lanchester Co.,LTD. 電話番号の入力用。 コントロールタイプとしてはテキストフィールド。 現時点では実装がなく、 tel や email のような標準バリデータも持っていない。 これは国や UI で要求される内容が変わるためとなっている。 「電話番号用」というセマンティクスを持った UI となる。 かもしれない。
  20. 20. 4-1.属性による既存 input 要素の変更 Proprietary and Confidential to Lanchester Co.,LTD. 今までの input 要素で使われてきた value 、 checked 、 readonly などの他に新たな属性が追加・拡張され、 input 要素自体も機能追加・拡張される。 ただし、 type 属性の値によって適用の可否が定められている。
  21. 21. 4-2. autocomplete 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : text,search,url,tel,email,password,datetime,date,month,week,time,datetime-local,number,range,color 値: on / off / default この属性で on が指定された要素では過去に入力した内容を UserAgent が記憶してくれることを期待する。 また、 off が指定された場合には UserAgent に対して入力内容を記憶して欲しくない要素であることを指示する。 default は form 要素の値を引き継ぎます。 form 要素の autocomplete 属性は指定なしの場合 on となる。 <input type=&quot;text&quot; autocomplete=&quot;on&quot; name=&quot;username&quot;> <input type=&quot;password&quot; autocomplete=&quot;off&quot; name=&quot;password&quot;>
  22. 22. 4-3. list 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : text,search,url,tel,email,datetime,date,month,week,time,datetime-local,number,range,color 値: datalist 要素の ID 入力の候補となるリストを別途定義し、その内容を選択可能とする。 <input type=&quot;search&quot; list=&quot;suggest&quot;> <datalist id=&quot;suggest&quot;> <option value=&quot; のっち &quot; label=&quot; 大本彩乃 &quot;> <option value=&quot; かしゆか &quot; label=&quot; 樫野有香 &quot;> <option value=&quot; あ~ちゃん &quot; label=&quot; 西脇綾香 &quot;> </datalist>
  23. 23. 4-4. required 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : text,search,url,tel,email,password,datetime,date,month,week,time,datetime-local,number,checkbox,radio,file この属性が指定された要素が必須入力であることを UserAgent に指示する。 また、 CSS の擬似クラスを用いることで簡易に状態を表現できる。 input[type=text]:required { background:pink; } <input type=&quot;text&quot; required> <input type=&quot;text&quot;>
  24. 24. 4-5. multiple 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : email,file この属性が指定された要素が複数の入力を受け付けることを意味する。 <input type=&quot;email&quot; multiple> の場合は前述の通り &quot;,&quot; で区切られたメールアドレスが、 <input type=&quot;file&quot; multiple> の場合は <select multiple> や <input type=&quot;checkbox&quot;> のように同パラメータで複数のデータが提出される。
  25. 25. 4-6. pattern 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : text,search,url,tel,email,password 値:正規表現(ただし部分一致ではなく完全一致) この属性が指定された要素が空ではない場合に、指定された正規表現によってバリデートされる。 この属性を指定する際には併せて title 属性に入力内容の説明を入れることが推奨される。 また、 CSS の擬似クラスを用いることで簡易に検証結果を表現できる。 input[type=text]:invalid { background:pink; } input[type=text]:valid { background:white; } <input type=&quot;text&quot; pattern=&quot;[0-9]{3}-?[0-9]{4}&quot;> <input type=&quot;text&quot; pattern=&quot;[0-9]{3}-?[0-9]{4}&quot;>
  26. 26. 4-7. min/max/step 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : datetime,date,month,week,time,datetime-local,number,range 値:数値、または数値化可能文字列(加えて step 属性は「 any 」) この属性が指定された要素が取り得る数値範囲及び精度を指定する。 <input type=&quot;time&quot; min=&quot;10:00&quot; max=&quot;22:00&quot; step=&quot;900&quot;> 10:00 ~ 22:00 の間を 15 分( 900 秒)単位で入力させる。
  27. 27. 4-8. placeholder 属性 Proprietary and Confidential to Lanchester Co.,LTD. 適用 type : text,search,url,tel,email,password 値:文字列 ユーザのデータ入力を助けるような「短い」ヒントを表示する。 label の代わりに使用することは避けること。 <input type=&quot;search&quot; placeholder=&quot; 検索文字列 &quot;>
  28. 28. 5-1.その他の変更 Proprietary and Confidential to Lanchester Co.,LTD. その他にも要素、属性に対し追加・変更が行われている。 今までの HTML では面倒だったことがより簡単に出来るようになっている。
  29. 29. 5-2. autofocus 属性 Proprietary and Confidential to Lanchester Co.,LTD. この属性が指定された要素は、ページがロードされた後にユーザがすぐに入力できるように自動でフォーカスするようになる。 input 要素だけではなく select 要素や textarea 要素などにも適用。
  30. 30. 5-3. Form Submit Proprietary and Confidential to Lanchester Co.,LTD. これまでの HTML では 1 つのフォームで複数の処理を行う場合には type=&quot;submit&quot; の value 値で分岐や、 JavaScript で form.action プロパティを変更する必要があった。 または action 先を変えた(ほぼ)同じ 2 つのフォームを用意する必要があった。 <form action=&quot;back.cgi&quot; method=&quot;GET&quot; enctype=&quot;application/x-www-form-urlencoded &quot;> : <input type=&quot;submit&quot; value=&quot; 進む &quot;> : <input type=&quot;submit&quot; formaction=&quot;next.cgi&quot; formmethod=&quot;POST&quot; formenctype=&quot;multipart/form-data&quot;> </form> type=&quot;submit&quot; または type=&quot;image&quot; の input 要素に対し、 formaction/formmethod/formenctype 属性を指定することで form 要素の指定を上書きすることができる。 また、 UserAgent 側でのバリデート拒否のための属性も定義されている。 <form action=&quot; ~ &quot; novalidate> : <input type=&quot;submit&quot; formaction=&quot; ~ &quot; formnovalidate> </form>
  31. 31. 5-4. Form と Controll の関連付け Proprietary and Confidential to Lanchester Co.,LTD. 通常コントロール( input,select などの要素)は form 要素内に配置されない場合には提出されずに UI 用として扱われたが、明示的にフォーム・オーナーを指定することができるようになった。 <form action=&quot;server.cgi&quot; id=&quot;myform&quot;> : <input type=&quot;submit&quot; value=&quot; 送信 &quot;> </form> : <input type=&quot;text&quot; name=&quot;other&quot; form=&quot;myform&quot;>
  32. 32. 5-5. output 要素 Proprietary and Confidential to Lanchester Co.,LTD. フォーム関連要素として新たに追加されたコントロール。 ・・・ただし、前述の input:type 属性に比べて仕様が曖昧であり、今後の動き次第ではなくなる可能性もある。 ここでは概略のみの紹介とする。 ユーザの入力に対して変化のある項目(今まで JavaScript などで <span> や <input> に出力していたような内容)に対して用いる要素として想定。 for 属性を用いて関連する ID を列挙できる。(列挙してどうなるのか不明) name 属性を指定することで提出される。(と仕様には書いてあるように見える) Script からは value プロパティで値をセットするが value 属性は持っていない。(え?) 属性: for/form/name
  33. 33. 5-6. progress 要素 Proprietary and Confidential to Lanchester Co.,LTD. フォーム関連要素として新たに追加されたコントロール。 ・・・ただし、前述の input:type 属性に比べて仕様が曖昧であり、今後の動き次第ではなくなる可能性もある。 ここでは概略のみの紹介とする。 なんらかの進捗を表すための要素として使われることを想定。 なんらかのゲージとして用いるのは好ましくない。そのような場合には後述する meter 要素を使用する。 form と関連付けられるが提出はされない。(なんで関連付けるか全く不明) value 属性が未定義の場合は「未確定 progress 」となる。(一旦値を設定したらどうやって未定義に戻すんだろう?) 属性: value/max/form
  34. 34. 5-7. meter 要素 Proprietary and Confidential to Lanchester Co.,LTD. フォーム関連要素として新たに追加されたコントロール。 ・・・ただし、前述の input:type 属性に比べて仕様が曖昧であり、今後の動き次第ではなくなる可能性もある。 ここでは概略のみの紹介とする。 規定範囲内の値を表示するためのコントロール。ディスク使用量、検索適合率、候補者の得票数、などなど。 form と関連付けられるが提出はされない。(なんで関連付けるか全く不明) エリアとして「低い値」「高い値」「最適値」を定義できる。 ※ この「エリア」の概念が文章・実装から理解できませんでした・・・ 属性: min/max/value/low/high/optimum
  35. 35. 5-7. keygen 要素 Proprietary and Confidential to Lanchester Co.,LTD. フォーム関連要素として新たに追加されたコントロール。 フォーム送信前に秘密鍵・公開鍵がペアで生成され、秘密鍵はローカルに保存され、公開鍵はフォームの内容として提出される。 保存された秘密鍵の使い方は定義されていない。 具体的な使用法がイマイチ不明確。 属性: keytype/name/form/challenge

×