HTML5のフォームバリデーションって便利だから使ってみるといいよ
はじめに
たとえば「メールアドレスが入力されているか」をブラウザ側でバリデーションしようと思ったら、
- 値が入力されているか
- メールアドレスとして有効な文字列であるか
を調べる必要があります。こう書くと簡単に見えますが、曲者ですよ…
しかも、同じように
「英数字が入力されているか」
「3から9までの整数が入力されているか」
「今日以降の日付が入力されているか」
みたいなのを実装していこうと思うと…うえぇってなりますよね。HTML5ではこういったのをマークアップで済ませられるんですよ？すごいと思いませんか？
タイプに合わせてフォームも変わる
お使いのブラウザによってはただのテキストボックスになる可能性があります。
まずはメールアドレスを必ず入力してねってときはどうすればいいのか。
<input type="email" required>
一見ただのテキストボックスですが、何も入力していない、またはメールアドレスとして有効でない文字列やが入力されているとフォームを送信しようとしたときにメッセージが出て送信できません。
つぎは3から9までの整数を入力させてみましょう。
<input type="range" min="3" max="9" step="1" value="6"> <input type="number" min="3" max="9" step="1" value="6">
上はバーみたいなのになり、下の方にはボタンがセットになります。下の方はボタン押すと数字が変わります。
今度は日付です。
<input type="date" min="2013-08-17" max="2013-09-01">
(ちゃんと実装されているブラウザ*1だと)カレンダーが出てくるんですよねーこれ。初見だとちょっと感動します。min属性とmax属性を設定してあると、その間以外の日を選択できなくなります。もちろん時間もあります(type="time")。それから、時間と日付を両方合わせたものもあります。こちらはちょっと操作性がいまいちですが…
他にもカラーピッカーがあります。素敵なんだけどなんであるのこんなの
<input type="color">
まだまだあるよ！
この記事の他にもありまして、
<input>－HTML5タグリファレンス
ここにまとまって載っています。指定できる属性もあわせて紹介されています。
