2011/5/18

フォームがパワーアップ

HTML5では、簡単な記述でフォームを装飾することができるようになりました。
ただし、ブラウザごとに対応がまちまちであるため、全てのブラウザで利用可能でないという点だけ注意が必要です。
Opera, Firefox が、他のブラウザと比べると、サポートされている属性が多いようです。

placeholder		対応ブラウザ：Firefox、opera、chrome、safari
autocomplete		対応ブラウザ：Firefox、opera
url		対応ブラウザ：Firefox、chrome
email		対応ブラウザ：Firefox、chrome
datetime		対応ブラウザ：opera
number		対応ブラウザ：opera
range		対応ブラウザ：opera、chrome、safari
color		対応ブラウザ：opera
required		対応ブラウザ：Firefox、chrome、safari
pattern(^\w*$)		対応ブラウザ：Firefox、chrome

　←まずはクリックしてみよう

コードの解説

placeholder

<table> <tr> <td>placeholder</td> <td><input type="text" placeholder="input me"></td> </tr>

フォームのテキスト入力欄に、ガイドテキストを表示することができます。

autocomplete

<tr> <td>autocomplete</td> <td><input type="text" autocomplete="on" list="ac_list"></td> <datalist id="ac_list" style="display:none;"> <option value="Great">Great <option value="Good">Good <option value="Bad">Bad <option value="Too bad...">Too bad... </datalist> </tr>

入力候補を提示して、入力内容を自動補完することができます。
input タグの list 属性で、補完候補の要素のIDを指定します。
補完候補は datalist + option タグで記述します。

url

<tr> <td>url</td> <td><input type="url"></td> </tr>

URL以外のものを入力すると、フォームの SUBMIT 時にエラーポップアップが表示されます。

email

<tr> <td>email</td> <td><input type="email"></td> </tr>

メールアドレス以外のものを入力すると、フォームの SUBMIT 時にエラーポップアップが表示されます。

datetime

<tr> <td>datetime</td> <td><input type="datetime-local"></td> </tr>

日時以外のものを入力すると、フォームの SUBMIT 時にエラーポップアップが表示されます。

number

<tr> <td>number</td> <td><input type="number"></td> </tr>

数値以外のものを入力すると、フォームの SUBMIT 時にエラーポップアップが表示されます。

range

<tr> <td>range</td> <td><input type="range" min="-100" max="100"></td> </tr>

指定した範囲外のものを入力すると、フォームの SUBMIT 時にエラーポップアップが表示されます。

color

<tr> <td>color</td> <td><input type="color"></td> </tr>

色選択のパレットを表示します。

required

<tr> <td>required</td> <td><input type="text" required></td> </tr>

テキストフォームに入力が何もされていないと、SUBMIT時にエラーポップアップが表示されます。

pattern

<tr> <td>pattern(^\w*$)</td> <td><input type="text" pattern="^\w*$"></td> </tr>

正規表現に引っかからない文字列が入力されていると、SUBMIT時にエラーポップアップが表示されます。
サンプルで指定しているのは、0 文字以上の単語に該当する正規表現です。

試しに "text word" などと入力して、submit ボタンを押してみてください。
ブラウザが対応していれば、エラーポップアップが表示されます。