ホームページ作成/HTML5とは

HTML5概要:種類が増えて便利になった入力フォーム(2ページ目)

「HTML5」って何でしょうか? それは「HTML4」や「XHTML1」の後継となる、便利な機能が増えた次世代のHTMLです。HTML5では、従来のinput要素では作れなかった様々な入力欄が作れるようになっています。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

入力フォームのフォーマットは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を有効にする方法

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます