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

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

autocomplete

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

url

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

email

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

datetime

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

number

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

range

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

color

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

required

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

pattern

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

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

この記事に関するお問い合せ

株式会社クーシー 担当:三上
TEL:019-656-0003 E-mail:mikami@coosy.co.jp

HTML5の研究活動一覧へ戻る
COOSY Inc. Head Office : F Nissei Ebisu Bldg.7F 3-16-3 Higashi Shibuya-ku,Tokyo,Japan Laboratory : IPU Innovation Center 2-7, 152-409 Sugo Takizawa-shi,Iwate,Japan

Top of Page