HTML5でフォーム入力を必須にする方法

HTML5でフォームの指定の幅が広がった。今回はHTML5で入力を必須にする方法を紹介する。

HTML5でフォーム入力を必須にする方法

HTML5でフォーム入力を必須にするには、inputタグ内に「required」と記述すればよい。以下のログインフォームのサンプルで説明する。

以下のコードのハイライト部分(2、3行目)のようにinputタグ内にrequiredを記述する。すると以下のようなフォームになる。HTML5のrequiredを取り入れているブラウザでは、以下のユーザーIDとパスワードの入力欄を埋めないと、ログインボタンを押してもエラーが出るはずだ。

また、ここではinputタグのtypeを「type=password」としているが、こうすることで入力の際に文字が見えず黒丸などで表現される。これにより、後ろから盗み見られるなどの事を防げる。

ログインボタンのstyleの記述は「フォームのsubmitボタンのデザインを変更する方法」を参考にしていただきたい。

入力必須フォーム – HTMLファイル

<form method="" action="">
ユーザーID:<input type="text" name="id" required><br>
パスワード:<input type="password" name="password" required><br>
<input type="submit" style="padding: 10px 20px" value="ログイン"> 
</form>

ユーザーID

パスワード


 

IEや古いバージョンのブラウザの場合、これは適用されないので、requiredに頼るのはまだ早いかもしれないが、HTML5でフォームの記述が楽になることは間違いないだろう。

以上。

関連記事

HTML5の宣言文(DOCTYPE宣言)
HTML5を用いたテンプレート

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/html/1217/trackback/