HTML 5で導入される新しいフォームの機能について。

平成22年 3月 2日公開

テーマ

HTML 5

HTML 5で導入される新しいフォームの機能について、制作者が把握した範囲でのメモ。

平成22年 3月 2日現在の仕様草案を基にしているため、今後の変更も予想されます。

ウェブフォーム 2.0とは。

ウェブフォーム 2.0とは、WHATWGが策定しているフォームの規格です。

従来の<form>要素に対し、入力欄を拡張する事で、より直感的なフォームになるようにしております。

フォームの進化形としては、XHTML 2.0に導入される予定だったXForms(XMLフォーム言語)もありますが、XFormsが既存のHTMLのフォームとの互換性が全くないのに対し、ウェブフォーム 2.0では従来のウェブブラウザでも利用は可能になるように考案されたものとなっております。

正直、何処から何処までがウェブフォーム 2.0の範疇にあるか把握し切れていないので、取り敢えず以下ではこの表現は用いずに、HTML 5で導入される新機能とします。

新たな入力欄。

フォームでの入力欄である<input>要素については、type属性でその機能を指定する事が可能ですが、HTML 5では機能を拡張しております。

現状、最新のオペラとサファリのみが部分的にサポートしている状況ですが、非対応の環境でも通常のテキスト入力欄になるだけですので、受け取る側が入力されるデータの評価さえ正しく行えれば問題はない筈です。

ここでは、新たに追加されるもののみ挙げてみましょう。

`<input type="datetime">`要素…協定世界時での日時入力欄。

`<input type="datetime-local">`要素…現地時間での日時入力欄。

<input type="datetime">要素, 及び<input type="datetime-local">要素は、いずれも日時を入力する入力欄です。

入力欄では日付と時刻を入力するため、日付の入力欄をクリックするとカレンダが表示されてそこから希望する日を選択出来るようになり(海外の航空会社などが予約機能などで採用している機能をネイティヴで実装している訳です)、時刻欄もボタンなどで分単位で値を変えられるようになります。

例えば、対応しているウェブブラウザなら、以下のような表示が出来るでしょう。

日付入力欄をクリックすると、その下にカレンダが表示され、カレンダの日付をクリックする事で上の入力欄に日付データが入るようになります。また、日付入力欄の右には、時刻入力欄があり、クリックで一分単位でずらす事が可能になります。

実際に送られるデータは、ISO-8601形式に準じたもので、

type="datetime"属性を与えた場合はUTC(協定世界時)で末尾にZ(時差ゼロの意)が付くもの
type="datetime-local"属性を与えた場合は現地時間で末尾には時差が付かないもの

となります。

例えば、日本時間の平成22年 3月2日19時24分であれば、

type="datetime"属性を与えた場合は、
```
2010-03-02T10:24Z
```
type="datetime-local"属性を与えた場合は、
```
2010-03-02T19:24
```

となります。

`<input type="date">`要素…日付入力欄。

<input type="date">要素は、日付を入力する入力欄です。

入力欄をクリックするとカレンダが表示されてそこから希望する日を選択出来るようになります。

実際に送られるデータは、ISO-8601形式に準じたもので、例えば、平成22年 3月2日であれば、

2010-03-02

となります。

カレンダには、本日の日付を指定するボタンも用意される事が考えられますが(実際オペラがそうしている)、その場合協定世界時で日付を扱うので注意してください。

`<input type="month">`要素…月入力欄。

<input type="month">要素は、年号と月を入力する入力欄です。

オペラだと入力欄をクリックするとカレンダが表示され、それをクリックすると表示中の月が選択されるようになっているようですが、年号選択欄と 1月から12月までのプルダウンメニューを組み合わせたものにしても問題はありません。

例えば、以下のようなものでも可能です。

実際に送られるデータは、ISO-8601形式に準じたもので、例えば、平成22年 3月であれば、

2010-03

となります。

カレンダには、本日の日付を指定するボタンも用意される事が考えられますが(実際オペラがそうしている)、その場合協定世界時で日付を扱うので注意してください。

`<input type="week">`要素…週入力欄。

<input type="week">要素は、年号と週を入力する入力欄です。

オペラだと入力欄をクリックするとカレンダが表示され、該当する週の日をクリックする事で選択が出来るようになっているようですが、その他の形式でも入力出来れば問題はありません。

実際に送られるデータは「YYYY-WXX」と言う形で、

YYYYが年号四桁
XXがその年の初めての月曜日を含む週(月曜から日曜まで)を1とした週の番号二桁

となります。

例えば、平成22年 3月 2日を含む週を選択すると、

平成22年初めての月曜日は 1月 4日

であり、従って平成22年 1月 4日から同月10日までの週を 1として数えれば、平成22年 3月 2日は第 9週目(平成22年 3月 1日から同月 7日まで)となり、送られる値は

2010-W09

となります。

年初めての月曜日より前の日までは、前年の最終週に含まれていると見なされます。

`<input type="range">`要素…範囲を指定した数値入力欄。

<input type="range">要素は、範囲を指定した数値入力欄です。

min属性とmax属性で範囲の最小値と最大値を指定する事で、最小値から最大値までの選択が可能なスライドバーが表示されると言うのがオペラでの実装です。

一般にはこんな感じになるでしょう。

更にstep属性を指定すれば、入力される値の精度を指定出来ます。

step属性がない場合には step="1" すなわち、整数単位となります。

実際に送られるデータは通常の数値です。

`<input type="number">`要素…数値入力欄。

<input type="number">要素は、数値入力欄です。

通常のテキスト欄でも良いのですが、オペラの場合はボタンで数値の増減を行うようにも出来ます。

min属性とmax属性で範囲の最小値と最大値を指定する事で、入力可能な値の範囲を指定出来ます。

更にstep属性を指定すれば、許される数値の精度を指定出来ます。

step属性がない場合には step="1" すなわち、整数単位となります。

これらの属性で指定された数値以外の文字列を入力した場合にはエラーとなって入力送信を拒否されます。

実際に送られるデータはURLに準じた形式のテキストとなります。

`<input type="search">`要素…検索テキスト入力欄。

<input type="search">要素は、検索用のテキスト入力欄です。

通常のテキスト入力欄(type="text"属性を与えた場合)とはレンダリングを変える事で検索入力欄に相応しい形にすると言う意図があります。

従って、実際に送られるデータは通常のテキストとなります。

`<input type="url">`要素…URL入力欄。

<input type="url">要素は、URL入力欄です。

オペラの場合はURLの一部を入れると経歴から該当するURLの一覧を下にポップアップさせ、そこからの選択も可能になっております。

また、URLとして不適切な形式の場合にはエラーとなって入力送信を拒否されます。

実際に送られるデータはURLに準じた形式のテキストとなります。

`<input type="email">`要素…メールアドレス入力欄。

<input type="email">要素は、メールアドレス入力欄です。

オペラの場合はメールアドレスの一部を入れると経歴から該当するURLの一覧を下にポップアップさせ、そこからの選択も可能になっております。

また、メールアドレスとして不適切な形式の場合にはエラーとなって入力送信を拒否されます。

実際に送られるデータはメールアドレスに準じた形式のテキストとなります。

`<input type="tel">`要素…電話番号入力欄。

<input type="tel">要素は、電話番号入力欄です。

電話番号の表現にはいろいろなものがあるため、実は特に形式を指定したりはしませんし、エラーチェックも行わないとの事です。

例えば、日本では
- (048)***-****
- 048(***)****
- 048-***-****
などと言う形式が良く使われますが、米国ではこの他にも
- 048/***-****
と言う形式も用いられます。

更に、国番号込みの電話番号の場合もあり得るため、形式の統一は困難なのです。

実際に送られるデータはテキストとなります。

`<input type="color">`要素…色入力欄。

<input type="color">要素は、色指定欄です。

カラーピッカが表示されてそこから色を選択すると言う形式を想定しているようですが、未だオペラでも実装はされておりません。

サポートされるとしたら、こんな感じになるでしょう。

入力欄の下にカラーピッカが表示され、色を選択すると上の入力欄に対応するカラーコードが入力されます。

実際に送られるデータはCSSなどで用いられる、「#RRGGBB」と言う十六進数六桁形式のテキストとなります。

入力候補を指定する<datalist>要素とlist属性の導入。

HTML 5では、入力を助けるために入力候補を指定する機能が用意されます。

<datalist>要素は、入力候補の一覧です。

<datalist>要素はフロウ内容要素ですので、<body>要素直下にも記述可能です。

<datalist>要素の内容モデルとしては

フレージング内容(従来のインライン要素)か、
零箇以上の<option>要素

のいずれかとなります。

但し、前者の場合の扱いは仕様草案には書かれていないようです。

<datalist>要素に必須の属性などは特に定めていないようですが、実際に利用する際にはid属性で固有名を与える必要があります。

通常、<datalist>要素直下の<option>要素は内容を持たせずにvalue属性で入力候補となる値を記述しておく事で、HTML 5に非対応の場合でも変な表示にならないようにします。

<datalist>要素直下の<option>要素に内容を持たせても違反ではありませんが、そうした場合にはHTML 5非対応環境で意味不明の文字列が並ぶ事になるでしょう。

実際にこの候補リストを用いる場合には、適用したい<input>要素に当該<datalist>要素のid属性値を値としたlist属性を与える必要があります。

<datalist>要素とlist属性の具体例を挙げてみましょう。

<datalist id="CANDIDATE">
    <option value="堀北真希" />
    <option value="上戸彩" />
    …
    </datalist>

…

<form action="/cgi/favorite.cgi">
    <p>
        <label>
            あなたのお好きなキャラクタは？
            <input type="text" name="favorite" list="CANDIDATE" />
            </label>
        <input type="submit" value="投稿" />
        </p>
    </form>

上記の場合、入力欄を選択すると、堀北真希, 上戸彩, …と言った入力候補が入力欄の周りに表示され、入力したい選択肢があればそこから選択する事も可能になります

候補リストを無視して独自の値を入力する事も勿論可能です。候補リストは選択肢ではなく、あくまでも候補に過ぎないと言う事です。

form属性…対応するフォームの指定。

<input>要素, <textarea>要素, <select>要素, <button>要素, <fieldset>要素, <label>要素などに追加される、form属性は、対応するフォームを指定します。

従来のHTML/XHTMLでは、<input>要素, <textarea>要素, <select>要素, 及び<button>要素は全て対応する<form>要素内に置かなければなりませんでした。

これらの要素はHTML 4から<form>要素外に置いても構わない事とされましたが、その場合当該フォームをウェブプログラムに送る事はJAVAスクリプトの助けを借りない限り出来ません。

HTML 5では、これらの要素にform属性を定義する事で、対応するフォームを指定し、これに依り当該フォーム外に当該要素を置いても有効に機能するように出来るようになります。

具体的には、対応させたい<form>要素に与えたid属性値をform属性に与える事で、対応するフォームを指定する事が可能になります。

具体例を挙げてみましょう。

<form action="/cgi/favorite.cgi" id="FAVORITE_FORM">
    <p>
        <label>
            あなたのお好きなキャラクタは？
            <input type="text" value="-" name="favorite" />
            </label>
        <input type="submit" value="投稿" />
        </p>
    </form>

…

<p>
    <label form="FAVORITE_FORM">
        あなたのお好きなキャラクタは？
        <input type="text" value="-" name="favorite" />
        </label>
    <input type="submit" value="投稿" form="FAVORITE_FORM" />
    </p>

この場合、閲覧者の好きなキャラクタを入力する入力欄と投稿ボタンが複数ありますが、後方の<label>要素及び<input type="submit">要素はいずれも form="FAVORITE_FORM"属性が与えられており、前の方の id="FAVORITE_FORM"を与えられた<form>要素に対応している事になります。

こうする事で、文書の前の方でも後ろの方でも同じフォームに入力が可能になります。

この場合、同じクエリ名の入力が複数成される事になりますが、入力されなかった方のフォームには value属性でデフォルトの値として - が与えられるため、ウェブプログラム側で選別が可能になります。

その他の便利な属性。

HTML 5では、フォームでの入力欄である<input>要素などには、他にも便利な属性を追加しております。

沢山の属性が定義されておりますが、その中の一部をご紹介しましょう。

autocomplete属性…入力自動補完の指定。

HTML 5で<form>要素及び<input>要素に新たに追加されるautocomplete属性は、入力自動補完(オートコンプリート)の可否を指定します。

この属性を<form>要素に指定した場合には、当該フォームに含まれる<input>要素でのデフォルトの取り扱いを指定します。

値としては以下のものがあります。

on

自動入力補完を有効にします。

off

自動入力補完を無効にします。

defalut

当該入力欄が含まれる<form>要素での指定に従います。

この値は<form>要素では使えません。

required属性値…必須入力欄の指定。

HTML 5で<input>要素に新たに追加されるrequired属性値は、必須項目である事を指定します。

属性値のみが意味を持つため、HTML 5では値だけで有効ですが、XHTML 5やXHTMLとの互換性を維持する場合には、required="required" と記述します。

この属性が与えられた入力欄が空欄の場合は、送信しようとしてもエラーが表示されて送信を拒否されます。

pattern属性…入力パターンの正規表現。

HTML 5で<input>要素に新たに追加されるpattern属性は、求める入力形式をJAVAスクリプトで用いられる正規表現で指定します。

正規表現とは文字列の文字の並びパターンを指定するフォーマットの事です。

この属性で与えられた正規表現に従っていない場合、送信しようとしてもエラーが表示されて送信を拒否されます。

min属性…入力値の最小値。

HTML 5で<input>要素に新たに追加されるmin属性は、入力可能な数値の最小値を指定します。

type="range"属性やtype="number"属性などを与えられた入力欄で意味を持ちます。

値としては実数値となります。

省略した場合は、type="range"属性やtype="number"属性とも下限なしとなります。

max属性…入力値の最大値。

HTML 5で<input>要素に新たに追加されるmax属性は、入力可能な数値の最大値を指定します。

type="range"属性やtype="number"属性などを与えられた入力欄で意味を持ちます。

値としては実数値となります。

省略した場合は、type="range"属性やtype="number"属性とも上限なしとなります。

step属性…許される入力値の精度。

HTML 5で<input>要素に新たに追加されるstep属性は、入力可能な数値の精度を指定します。

type="range"属性やtype="number"属性などを与えられた入力欄で意味を持ちます。
step="any" とした場合には精度を規定しません。
省略時のデフォルトはtype="range", type="number"属性とも 1となります。

この属性値がanyでなく、有効な実数値である場合、この値に整数を掛けた値をmin属性値(min属性がないか値として無効な場合は 0)に加えた値のみが入力可能となります。

例えば、

min属性がなく、step="1"属性が与えられた場合…この場合、min属性がないので、step属性値の 1の整数倍の値を 0に加えた値、すなわち全整数が許される値となります。
min属性がなく、step="0.1"属性が与えられた場合…この場合、min属性がないので、step属性値の 0.1の整数倍の値を 0に加えた値、すなわち小数点以下第一位までの小数(整数は小数点以下第一位が 0となっているのでこれも含まれる)が許される値となります。
min="0.1"属性が与えられて、step属性が与えられていない場合…この場合、step属性値は 1と見なされるので、step属性値の 1の整数倍の値を 0.1に加えた値、すなわち、0.1, 1.1, 2.1, …が許される値となります。
min="1"属性が与えられて、step="2"属性が与えられた場合…この場合、step属性値の 2の整数倍の値を 1に加えた値、すなわち、…, -5, -3, -1, 1, 3, 5, …が許される値となります。

HTML 5でのフォームの新機能に関する制作者の雑感。

W3Cも次世代フォームとして、XFormsを考案しておりますが、過去との互換性が全くなく、ウェブコンテンツでは全く使い物になりません。

その点、HTML 5で導入されるフォームは過去との互換性も最大限に考慮されつつ拡張されており、従来の環境に対する配慮さえすればかなり実用的ではないかと思います。

これらの機能のうち、一部はJAVAスクリプトで補完出来るようですので、ブラウザが対応すれば利用も促進されるのではないかと思います。

ウェブフォーム 2.0とは。

新たな入力欄。

<input type="datetime">要素…協定世界時での日時入力欄。

<input type="datetime-local">要素…現地時間での日時入力欄。

<input type="date">要素…日付入力欄。

<input type="month">要素…月入力欄。

<input type="week">要素…週入力欄。

<input type="range">要素…範囲を指定した数値入力欄。

<input type="number">要素…数値入力欄。

<input type="search">要素…検索テキスト入力欄。

<input type="url">要素…URL入力欄。

<input type="email">要素…メールアドレス入力欄。

<input type="tel">要素…電話番号入力欄。

<input type="color">要素…色入力欄。

入力候補を指定する<datalist>要素とlist属性の導入。

form属性…対応するフォームの指定。

その他の便利な属性。

autocomplete属性…入力自動補完の指定。

required属性値…必須入力欄の指定。

pattern属性…入力パターンの正規表現。

min属性…入力値の最小値。

max属性…入力値の最大値。

step属性…許される入力値の精度。

HTML 5でのフォームの新機能に関する制作者の雑感。

`<input type="datetime">`要素…協定世界時での日時入力欄。

`<input type="datetime-local">`要素…現地時間での日時入力欄。

`<input type="date">`要素…日付入力欄。

`<input type="month">`要素…月入力欄。

`<input type="week">`要素…週入力欄。

`<input type="range">`要素…範囲を指定した数値入力欄。

`<input type="number">`要素…数値入力欄。

`<input type="search">`要素…検索テキスト入力欄。

`<input type="url">`要素…URL入力欄。

`<input type="email">`要素…メールアドレス入力欄。

`<input type="tel">`要素…電話番号入力欄。

`<input type="color">`要素…色入力欄。