HTML5 の Tech Talk #3 に一昨日、参加した。セッションは 3 つ。
- HTML5 Forms (羽田野氏)
- Canvas と Transform (羽田野氏)
- HTML5 の記し方 (白石氏)
1 つ目は HTML5 Forms の話。本エントリーで紹介する。2 つ目は HTML5 で絵を描く「Canvas」要素の中で、特に扱いが難しい (?) Transform の実演とソースコード紹介。これは実演メインだったのでエントリーにはしない。3 つ目は HTML5 の簡単な文法。スライドがポンポン進んだのでメモしきれなかった。資料がネットに上がったら、エントリーを書くつもり。
HTML5 Forms
HTML5 Forms は昔 Web Forms 2.0 とも呼ばれていたもので、Tech Talk #2 においても Opera のダニエル・デイビス氏が紹介していた。
本セッションは、Tech Talk #2 での Forms 編と重複・補完する形となっている。なので、Tech Talk #2 - Forms 編と併せて読んで頂ければ理解も深まると思う。
input type
HTML5 Forms の input 要素には、type 属性に数多くの追加が行なわれた。使い方は次の通り。
<input type="...">
... の新属性値を説明する。
date
日付入力用のカレンダーが現れる。
データ形式は「2009-01-13」。
time
日時入力用のボックスが現れる。
データ形式のデフォールトは「09:00」。オプションを追加することで、「秒 (09:00:01)」から「ミリ秒 (09:00:01.004)」までのデータ形式を取ることができる。
datetime
date と time が一緒になったもの。カレンダーから日付を選んで、日時入力ボックスで日付けを入力する。
注意すべきは、タイムゾーンが UTC 固定なこと。というわけで、おそらく国内で利用する人はほとんどいないと思われる。
datetime-local
タイムゾーン指定がない datetime (タイムゾーンを指定できるわけではない。紛らわしいね)。
month
date と同じやうにカレンダーが現れる。
データ形式は「2010-01」。
week
date と同じやうにカレンダーが現れる。
データ形式は「2010-W51」。
週の基準は ISO8601 準拠。つまり、第一週は 1/4 を含む週とし、週の始まりは月曜日 (日本は普通、日曜日始まり)。ISO8601 については過去エントリーも参照されたし。
number
値を変更するボタンが現れる。デフォールトのステップ値は 1。
step 属性でステップ値を変更可能。小数も指定可:
<input type="number" step="0.1">
range
スライダーが現れる。
デフォールトの範囲は 0 〜 100、ステップ幅は 1 で、デフォールト値は 50。required 属性は無効。その代わり、値を未設定には出来ない。
例:
<input type="range" min="-100" max="100" step="0.1">
この range タイプは Opera の他 Safari, Google Chrome4 がサポートしている。
email
メール・アドレス用の validation が実行される。
ウェブ・ブラウザーはメアド入力用であることをユーザーに知らせる実装が可能になる。例えば Opera だと「メール」のアイコンが入力欄に表示される。
url
URL 用の validation が実行される。FTP も OK。
ウェブ・ブラウザーは URL 入力用であることをユーザーに知らせる実装が可能になる。
tel
電話の書式は各国色々なので、validation 機能は提供されない。
ウェブ・ブラウザーは電話番号入力用であることをユーザーに知らせる実装が可能になる。例えば iPhone 版 Safari だと、入力用のソフトウェア・キーボードとしてキーパッドが現れる (普通は日本語や英語のキーボードが現れる)。
search
ウェブ・ブラウザーは URL 入力用であることをユーザーに知らせる実装が可能になる。例えば、Mac のブラウザーは入力ボックスの角を丸くすることで、検索用ボックスであることをマック・ユーザーに知らせることが出来る (Mac の検索ボックスは普通、角が丸くなっている)
color
どのウェブ・ブラウザーも実装していないので、例を示せない未知のタイプ。おそらくカラー・ピッカーが現れるのではないか? との予想。
データ形式は「#FFFFFF」、デフォールト値は「#000000」(Black)。値を未設定に出来ないため、required 属性は使えない。
type 以外の属性
HTML5 Forms では色々な属性が追加された。
required
この属性が設定されていると、送信ボタンを押した時、値が未設定だと送信エラーになる。
placeholder
ヒント用の文字を表示する。
<input type="search" placeholder="例: HTML5">
pattern
入力値の validation check を正規表現で行なえる。
例えば郵便番号 (例: 229-0031) を入力するようにするなら、こんな感じ。
<input type="text" pattern="\d{3}-\d{4}" placeholder="郵便番号: 229-0031">
正規表現は部分一致ではなく完全一致となる。入力した正規表現は ^ と $ に挟まれているのと同じになる。
正規表現例:
- \d{1,3} ... 数字一桁から三桁まで
- [\u3041-\u3093] ... ひらがな
- [\u30A1-\u30F6] ... カタカナ (全角)
form
form 要素の外で (本来 form 要素の中でしか使えない) 要素を書くことができるやうになる。
利用法はこんな感じ。form 属性の値には、form 要素の id 値を設定する。
<form action="order.cgi" id="order-form">
ごにょごにょ
</form>
長〜いテキスト
<input type="name" value="申し込む" form="order-form">
formaction
form 要素の action 属性を上書きする。
例:
<form action="post.cgi">
<button type="submit" formaction="preview.cgi">Preview</button>
<button type="submit">Post</button>
</form>
list
datalist 要素と一緒に使って、Google Suggest のような効果を提供する。
例:
<input type="search" list="suggest">
<datalist id="suggest">
<option value="HTML5" label="214件"/>
<option value="canvas" label="59件"/>
<option value="video" label="21件"/>
</datalist>
select 要素を併用すると、HTML5 Forms 非対応ブラウザーに対しても同じような (ただし機能は制限されている) UI を提供できる。
例:
<input type="search" list="suggest">
<datalist id="suggest">
<select>
<option value="HTML5" label="214件">HTML5</option>
<option value="canvas" label="59件">canvas</option>
<option value="video" label="21件">video</option>
</select>
</datalist>
注意事項
ブラウザー上で validation はあるけれど
サーバー側の validation は欠かせないよ。
あとがき
ほとんどの HTML5 Forms 要素は Opera 最新版で実装されている。他のブラウザーは、それを追いかけている感じ。全てのブラウザーが HTML5 Forms をサポートすると、随分とフォーム作成が楽になる。かなり楽しみ。