2010-01-17

HTML5 Tech Talk #3 -- HTML5 Forms 編

HTML5 の Tech Talk #3 に一昨日、参加した。セッションは 3 つ。

  1. HTML5 Forms (羽田野氏)
  2. Canvas と Transform (羽田野氏)
  3. 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 をサポートすると、随分とフォーム作成が楽になる。かなり楽しみ。

No comments:

Post a Comment