HTML5 Tech Talk #2 -- Forms 編

告知通り、HTML5 の Tech Talk #2 に参加した。セッションは 2 つ。

• HTML5 で非常に強力になった Forms の説明
• HTML5 を使ったデモ・サイトの紹介とソースコード解説

今回は、どちらのセッションもサンプルを見せて、その場で解説を加える形式を取っていた。

この方式。メモを取るには、非常に都合が悪い。話の展開が速くて、メモがついていかない。おまけに、サンプルが面白いものだから、目を奪われ圧倒されてしまう。特に後半のセッションはメモを取るどころじゃなかった (良い意味で)。

というわけで、今回は Forms の話のみをメモ形式で書くに留める。

HTML5 Forms

講演者は、Opera の中の人ダニエル・デイビス氏。自作のウェブ・ページを使って、PowerPoint っぽくプレゼンなさっていた。本エントリーのメモ書きは、このウェブ・ページの補助的解説と思って構わない。

• Web Forms 2 で healthy living!

このページには HTML5 Forms のデモが見られるが、Opera 10 でしか動作しない。もし Opera を持っているなら、Opera で見ることをお勧めする。HTML5 Forms については、流石の Safari も Chrome も対応がまだまだらしい。

• HTML5 Forms はもともと Web Forms 2.0 と呼ばれていた。
• Web Forms 2.0 の前は XForms Basic と呼ばれていた。
• XForms Basic の仕様策定は、もともと Opera が進めていたものだった (だから Opera の実装が一番進んでる)
• HTML5 Forms では input 要素に type 属性が 13 個追加された。

Web Forms 2 で healthy living! にスクリーン・ショットのやうなページ (?) がある。ここで「HTML」の部分に HTML のソースコードを入力すると、下の大きなウィンドウに結果がリアル・タイムに表示される。スクリーン・ショットは、13 のうち type="date" を指定したところ。単に input 要素を使っているだけなのに、カレンダーが表示される!! これは是非 Opera を使って遊んで欲しい。

簡単に各項目の説明を書いておく。

<input type="number">

マウスでも数字を入力できるように、右端にピッカーが付く。max 属性・min 属性を追加可能。

<input type="range">

入力欄がシークバーになる。デフォールトでは 0 〜 100。max 属性・min 属性を追加可能。

<input type="url">

URL 入力用であることを表わすアイコンが入力欄左端に現れる

<input type="email">

メール入力用であることを表わすアイコンが入力欄左端に現れる

<input type="date">

日付選択用のカレンダーが現れる

<input type="month">

date と同じ。戻り値が月単位になる

<input type="week">

date と同じ。戻り値が週単位になる

<input type="time">

時間入力用の画面 (「時:分」という形式)

<input type="datetime">

date と time を組み合わせたもの

<input type="datetime-local">

datetime と同じ。時間がローカル時間に対応する。

<input type="search">

未実装

<input type="color">

未実装

<input type="tel">

未実装

あとは落ち穂払い的に箇条書き。

• HTML5 Forms 対応でないブラウザーでは、普通の空ボックスが表示されるだけなので、どのような入力値をサーバー側が要求しているのかという例 (ex. カレンダーなら「例: 2009-12-15」のようなもの) を書いておくと親切
• 「autofocus」属性を付けると、ページを開いた時にその input 要素に自動でフォーカスが当たる。
• 「required」属性を付けると、未入力でのフォーム送信時にエラーが出る。
• CSS で :invalid { color: red; } と書くと、valid でない入力値が赤色で表示される。ただし、HTML5 Forms 非対応なブラウザーも考遇して、サーバー側での validation は必ずすること。
• カレンダーが小さい時は、CSS のフォントでサイズを大きくできる。

以上。他にも色んな話が出たけれどメモしきれなかった。

でも、ここに出てきた話題だけでも、Form 作成が随分楽しいことになっていると感じられる。Opera はこれから Forms の拡充よりも (Forms 以外の) HTML5 の仕様を満たす方向に力を入れていく。そして、他のブラウザー (Safari や Firefox) が Forms への対応を深めたら次のアクションを起こしたいと考えているそうな。

ref

今回の Tech Talk で司会進行をなさっていた白石氏のエントリー。各種リンクが揃っている。

• HTML5 Techtalk#2開催しました - IT-Walker on hatena