入力フォームのフォーマットはtype属性の値で決定
入力欄を作るには、input要素を使います。これは従来のテキスト入力欄やチェックボックスなどを作る際と同様です。どんな入力欄にするかは、type属性の値で決定されます。このtype属性に指定できる値が、いろいろ追加されています。例えば、以下のようなものがあります。日付入力:<input name="datetime" type="datetime"><br> 時刻入力:<input name="time" type="time"><br> 番号入力:<input name="number" type="number"><br> スライダー:<input name="range" type="range"><br> メール入力:<input name="email" type="email"><br> URL入力:<input name="url" type="url"><br>
それぞれに、入力を補助するための機能があったり、条件に逸脱した入力を防ぐような仕組みがあります。
日付や数値など、様々な種類の入力欄が新しく追加 (Operaでの表示例)
入力欄を補助する属性もたくさん追加
最初からカーソルを入力欄内にセットしておける「autofocus」や、入力を必須とする「required」などの属性が増えています。テキストフォームでは、過去の入力内容から入力を補完する「オートコンプリート」機能の有効・無効を指定したり、補完する入力内容(テキスト)をリストであらかじめ用意しておいたりできます。入力内容が不足していたり条件に合致しない場合に、警告を表示して送信を阻止する機能は、従来であればJavaScriptなどを活用するしかありませんでした。それらが、スクリプトなしで実現できるのは、とても楽で便利でしょう。
本記事は新しいフォームの詳しい解説が目的ではありませんので、具体的な説明は割愛致します。詳細な書き方は、今後に改めてご紹介したいと思います。
現状ではOpera10のみが対応
現在のところ、主要なブラウザの中でこの新しいフォームを表示できるのは、Opera10だけです。今後、徐々に他のブラウザでも対応されていくでしょう。※2010年9月時点の最新版「Opera 10.62」でも全てには対応していません。
【関連記事】
HTML5って何? 便利な機能が増えた次世代HTML
HTML5概要:映像や音声を再生できるvideo要素・audio要素
HTML5概要:絵を描いたり動かせるcanvas要素、svg要素
FirefoxでHTMLソース中のSVGやMathMLを有効にする方法