HTML Forms

HTML5 Working Draft（2010/06/24） HTML Forms
2010年09月16日

株式会社ランチェスター
TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

アジェンダ
ＣＯＮＴＥＮＴＳ
１．HTML5の成り立ち

２．HTML Formsとは

３． input要素のtype属性拡張

４．属性による既存input要素の変更

５．その他の変更

Proprietary and Confidential to Lanchester Co.,LTD. Page 1

１．HTML5の成り立ち
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へ仕様の一部を統
合することとなる。

２．HTML Formsとは
前述の「Web Forms2.0」がHTML5に取り込まれたが、その部分を強調する場合には「HTML
Forms」と呼ぶことがある。

HTMLで利用されているFormで「頻繁に利用される入力項目」をHTML側で定義してしまおうと
いう動き。
さらにはクライアントサイドのチェックに有用なAPIも定義してしまう。


３－１．input要素のtype属性拡張
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">
<input type="file">
<input type="hidden">

今まではこれだけで頑張ってたformだが・・・


３－２．input要素のtype属性拡張
<input type="text"> <input type="number">
<input type="password"> <input type="range">
<input type="checkbox"> <input type="url">
<input type="radio"> <input type="email">
<input type="submit"> <input type="date">
<input type="reset"> <input type="month">
<input type="button"> <input type="week">
<input type="image"> <input type="time">
<input type="file"> <input type="datetime">
<input type="hidden"> <input type="datetime-local">
<input type="search">
<input type="color">
<input type="tel">

なんとびっくり13種も追加に！

UserAgent（ブラウザ）での挙動は厳密に定義されていないも
のの提出されるデータ形式は定義されているのでサーバサイド
でのチェックルーチンが使いまわせるという利点がある。


３－３．<input type="number">
名前の通り、数値のみの入力を受け付ける。
コントロールタイプとしては通常のテキストフィールド、またはスピナーコントロール。
※ スピナーコントロール→

「ならでは」な属性を指定した例：
靴のサイズ：<input type="number" min="22" max="28" step="0.5">

最小値22、最大値28で0.5刻みの数値（靴のサイズ）が提出されることを期待する入力。


３－４．<input type="range">
数値の入力用だが、numberと違い、「大体このくらい」という意味を暗黙的に含んでいる。
コントロールタイプとしてはスライダコントロール、またはそれに類するもの。
※ スライダコントロール→

現在の気力充実度：<input type="range" min="0" max="100" step="0.1">

最小値0、最大値100で0.1刻みの値（気力充実度）が提出されることを期待する入力。
実際に提出される値はnumberと同等だが、こちらは具体的な値を要求しておらず、「大体」のセ
マンティクス（意図・意味）での要求となる。

コントロールの都合上、未入力の値が提出されることはない。
※ はず・・・


３－５．<input type="url">
絶対URLの入力用。
コントロールタイプとしてはテキストフィールド。
必ずしもhttp/httpsのスキームとは限っておらず、標準状態では[RFC3986]によるバリデーショ
ンが行われる。
・・・はずだが、Opera10/Chromeの実装では「a:」で通ってしまう。
※ RFC的には最低でも「a://」だと思うんだけど自信はない
実際に入力してもらいたい内容をpattern属性で指定した方が良いかも。

「ならでは」な属性は特になく、実際に提出される値はtextと同等だが、こちらはURLを入力させ
るようなセマンティクスを持ったUIとなっている。
かもしれない。


３－６．<input type="email">
メールアドレスの入力用。
multiple属性を付加することで複数のメールアドレスを入力することもできる。
標準状態では dot-atom-text"@"dot-atom-text形式にてバリデーションが行われる。
※ dot-atom-textは[RFC5322]にて定義
つまり「a@a」でもvalidとなってしまう。
※ 多分。なのでpattern属性で指定した方が良いかも。

multiple属性が指定された場合は妥当なメールアドレスの","区切りリストが提出される。
「ならでは」な属性は特になく、実際に提出される値はtextと同等だが、こちらはメールアドレス
を入力させるようなセマンティクスを持ったUIとなっている。


３－７．<input type="date">
タイムゾーンなしの日付（年月日）入力用。
コントロールタイプとしては日付コントロール。
UserAgentの実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想
定される。

「ならでは」な属性は特になく、実際に提出される値はtextと同等だが、提出されるデータは「
YYYY-MM-DD」の形となる。
※ 2010-09-20


３－８．<input type="month">
タイムゾーンなしの年月入力用。
コントロールタイプとしては月コントロール。
UserAgentの実装にもよるがカレンダーやスピナーコントロールなどの入力補助が出るなどが想
定される。

YYYY-MM」の形となる。
※ 2010-09


３－９．<input type="week">
タイムゾーンなしの年・週入力用。
コントロールタイプとしては週コントロール。
定される。
日本では週の入力はあまり使われてない気がする。

YYYY-WMM」の形となる。
※ 2010-W38

「週」は月曜から始まり、また、「1月4日」を含む週を第1週とする「ISO 8601」を基準とした週
数となる。
※ ややこしすぎです


３－１０．<input type="time">
タイムゾーンなしの時間（時分秒、小数点以下の秒）入力用。
コントロールタイプとしては時間コントロール。
定される。

パラメータの指定次第でミリ秒（1/1000秒）までの入力をさせることができる。
標準状態では60秒単位での入力（＝時：分）となる。
提出されるデータ形式は「HH:MM:SS.mmm」（URLエンコーデッド）
ただし必要に応じて「:SS」「.mmm」部分は省略される。

100m走の世界記録：<input type="time" min="0.001" max="10" step="0.001">

0.001秒～ 10秒の範囲で提出されることを期待する入力。


３－１１．<input type="datetime">
タイムゾーンがUTCにセットされた日付・時間入力用。
コントロールタイプとしては日時コントロール。
定される。

提出されるデータ形式は「YYYY-MM-DD"T"HH:MM:SS.mmm"Z"」（URLエンコーデッド）
※ 2010-09-20T08:00Z

このフォーマットは「ISO 8601」にて定義されている日付と時刻の表記に関する国際規格であり
、最後のZはUTCを表す。


３－１２．<input type="datetime-local">
タイムゾーンなしの日付・時間入力用。
コントロールタイプとしては日時コントロール。
定される。

提出されるデータ形式は「YYYY-MM-DD"T"HH:MM:SS.mmm」（URLエンコーデッド）
※ 2010-09-20T08:00

このフォーマットは「ISO 8601」にて定義されている日付と時刻の表記に関する国際規格だが、
タイムゾーンを指定することはできない。


３－１３．<input type="search">
検索ワードの入力用。
コントロールタイプとしては検索フィールド。
「検索用の入力フォーム」というセマンティクスを持ったUI以外の差は（恐らく）ない。


３－１４．<input type="color">
8ビットの深度を持つRGBの入力用。
コントロールタイプとしては色選択。
現時点では実装がないが、カラーピッカーなどによる入力補助が想定される。

提出されるデータはHTMLではおなじみの「#rrggbb」形式となり、文字種も小文字と定義されて
いる。


３－１５．<input type="tel">
電話番号の入力用。
現時点では実装がなく、telやemailのような標準バリデータも持っていない。
これは国やUIで要求される内容が変わるためとなっている。
「電話番号用」というセマンティクスを持ったUIとなる。


４－１．属性による既存input要素の変更
今までのinput要素で使われてきたvalue、checked、readonlyなどの他に新たな属性が追加・拡
張され、input要素自体も機能追加・拡張される。
ただし、type属性の値によって適用の可否が定められている。


４－２．autocomplete属性
適用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="text" autocomplete="on" name="username">
<input type="password" autocomplete="off" name="password">


４－３．list属性
適用type：text,search,url,tel,email,datetime,date,month,week,time,datetime-
local,number,range,color
値：datalist要素のID

入力の候補となるリストを別途定義し、その内容を選択可能とする。

<input type="search" list="suggest">
<datalist id="suggest">
<option value="のっち" label="大本彩乃">
<option value="かしゆか" label="樫野有香">
<option value="あ～ちゃん" label="西脇綾香">
</datalist>


４－４．required属性
適用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="text" required>
<input type="text">


４－５．multiple属性
適用type：email,file

この属性が指定された要素が複数の入力を受け付けることを意味する。

<input type="email" multiple>の場合は前述の通り","で区切られたメールアドレスが、
<input type="file" multiple>の場合は<select multiple>や<input type="checkbox">のように
同パラメータで複数のデータが提出される。


４－６．pattern属性
適用type： text,search,url,tel,email,password
値：正規表現（ただし部分一致ではなく完全一致）

この属性が指定された要素が空ではない場合に、指定された正規表現によってバリデートされ
る。
この属性を指定する際には併せてtitle属性に入力内容の説明を入れることが推奨される。
また、CSSの擬似クラスを用いることで簡易に検証結果を表現できる。

input[type=text]:invalid { background:pink; }
input[type=text]:valid { background:white; }

<input type="text" pattern="[0-9]{3}-?[0-9]{4}">
<input type="text" pattern="[0-9]{3}-?[0-9]{4}">


４－７．min/max/step属性
適用type： datetime,date,month,week,time,datetime-local,number,range
値：数値、または数値化可能文字列（加えてstep属性は「any」）

この属性が指定された要素が取り得る数値範囲及び精度を指定する。

<input type="time" min="10:00" max="22:00" step="900">
10:00～22:00の間を15分（900秒）単位で入力させる。


４－８．placeholder属性
適用type： text,search,url,tel,email,password
値：文字列

ユーザのデータ入力を助けるような「短い」ヒントを表示する。
labelの代わりに使用することは避けること。

<input type="search" placeholder="検索文字列">


５－１．その他の変更
その他にも要素、属性に対し追加・変更が行われている。
今までのHTMLでは面倒だったことがより簡単に出来るようになっている。


５－２．autofocus属性
この属性が指定された要素は、ページがロードされた後にユーザがすぐに入力できるように自動
でフォーカスするようになる。
input要素だけではなくselect要素やtextarea要素などにも適用。


５－３．Form Submit
これまでのHTMLでは1つのフォームで複数の処理を行う場合にはtype="submit"のvalue値で分
岐や、JavaScriptでform.actionプロパティを変更する必要があった。
またはaction先を変えた（ほぼ）同じ2つのフォームを用意する必要があった。

<form action="back.cgi" method="GET" enctype="application/x-www-form-urlencoded ">
：
<input type="submit" value="進む">
：
<input type="submit" formaction="next.cgi" formmethod="POST" formenctype="multipart/form-data">
</form>

type="submit"またはtype="image"のinput要素に対し、
formaction/formmethod/formenctype属性を指定することでform要素の指定を上書きするこ
とができる。

また、UserAgent側でのバリデート拒否のための属性も定義されている。

<form action="～" novalidate>
:
<input type="submit" formaction="～" formnovalidate>
</form>


５－４．FormとControllの関連付け
通常コントロール（input,selectなどの要素）はform要素内に配置されない場合には提出されず
にUI用として扱われたが、明示的にフォーム・オーナーを指定することができるようになった。

<form action="server.cgi" id="myform">
：
<input type="submit" value="送信">
</form>
：
<input type="text" name="other" form="myform">


５－５．output要素
フォーム関連要素として新たに追加されたコントロール。
・・・ただし、前述のinput:type属性に比べて仕様が曖昧であり、今後の動き次第ではなくなる可
能性もある。
ここでは概略のみの紹介とする。

ユーザの入力に対して変化のある項目（今までJavaScriptなどで<span>や<input>に出力して
いたような内容）に対して用いる要素として想定。
for属性を用いて関連するIDを列挙できる。（列挙してどうなるのか不明）
name属性を指定することで提出される。（と仕様には書いてあるように見える）
Scriptからはvalueプロパティで値をセットするがvalue属性は持っていない。（え？）

属性：for/form/name


５－６．progress要素
能性もある。

なんらかの進捗を表すための要素として使われることを想定。
なんらかのゲージとして用いるのは好ましくない。そのような場合には後述するmeter要素を使
用する。
formと関連付けられるが提出はされない。（なんで関連付けるか全く不明）
value属性が未定義の場合は「未確定progress」となる。（一旦値を設定したらどうやって未定
義に戻すんだろう？）

属性：value/max/form


５－７．meter要素
能性もある。

規定範囲内の値を表示するためのコントロール。ディスク使用量、検索適合率、候補者の得票
数、などなど。
formと関連付けられるが提出はされない。（なんで関連付けるか全く不明）
エリアとして「低い値」「高い値」「最適値」を定義できる。
※ この「エリア」の概念が文章・実装から理解できませんでした・・・

属性：min/max/value/low/high/optimum


５－７．keygen要素
フォーム送信前に秘密鍵・公開鍵がペアで生成され、秘密鍵はローカルに保存され、公開鍵は
フォームの内容として提出される。

保存された秘密鍵の使い方は定義されていない。
具体的な使用法がイマイチ不明確。

属性：keytype/name/form/challenge


TEL: 03-5775-3395 Fax:03-5775-3396
URL: http://www.lanches.co.jp/

HTML Forms

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a HTML Forms

Semelhante a HTML Forms (20)

Mais de 株式会社ランチェスター

Mais de 株式会社ランチェスター (20)

Último

Último (9)

HTML Forms