入力項目の種類や属性が増え、便利になったHTML5の入力フォーム

HTML5では、従来のinput要素では作れなかった様々な入力欄が作れるようになっています。入力を必須にしたり、入力内容を制限したりもできます。これまでの入力フォームにあった不便をいくらか解消し、便利で使いやすい入力フォームが作れるでしょう。


従来の入力フォームでよくある困ったことがHTML5では簡単解決

従来のHTMLでは、たとえば以下のような不便な点がありました。
  • 入力必須項目にちゃんと入力されないことがある
  • メールアドレス欄にメールアドレス以外の文字列が入力されることがある
  • 日付を簡単に入力できるフォームがない(年月日別に項目を用意したり、正しい年月日が入力されたかどうかを判定するのが大変)
どれも、解決するにはJavaScriptやCGIを利用する必要がありました。HTML5ではこれらが解決されています。
  • HTML5では、入力が必須であることを示す属性が追加されたため、必須項目が空欄の場合にはブラウザが指摘してくれます。
  • HTML5では、「メールアドレス欄」・「URL欄」専用のtype属性が増えたため、メールアドレスかどうか・URLかどうかは、ブラウザが判定してくれます。
  • 日付や時刻を入力する専用のフォームを作ることができ、必要に応じてカレンダーやボタンなどの入力補助が表示されます。
他にも、正規表現で入力規則を書いておけば、その入力規則に従っているかどうかをチェックする機能など、便利な機能が加わっています。これらはすべて、HTMLだけで実現でき、JavaScriptやCGIなどを記述する必要はありません。

「ファイル選択」のように従来からある入力欄でも、(属性を加えれば)複数ファイルの選択が可能になるなど、様々な改善も加わっています。

次のページでは、新しくなった入力フォームを見てみましょう。