required属性
input要素に新しく追加されたrequired属性は、submitボタンが押されたタイミングでもしも値が入力されていない場合にチップを表示してくれます。
これを使うとJavaScriptで必須バリデーションを作る必要がなくなりそうで、ちょっと便利かもと思いました。
（まぁサーバーサイドのエラーチェックは必須ですけどねっ！）
チップは以下のように表示されて、ユーザーに必須であることをお知らせしています。
はじめsubmitボタンを押してもエラーチップが出なくてハマったのですが、どうやらname属性が必須のようです。
■対応ブラウザ
現時点ではOperaのみ、バージョンは10で試しました。
■required属性の仕様
4.10.5.2 Common input element attributes -- HTML5
placeholder
こっちはここ最近よく見る、focusがあたると文字が消えてblurすると文字が表示されるアレです。
しかもさりげなく角丸になってますw
■対応ブラウザ
現時点ではSafariのみ、バージョンは4で試しました。
■placeholder属性の仕様
4.10.5.2 Common input element attributes -- HTML5
独自のエラーメッセージも表示できたりする（制約バリデーション API）
パスワードを確認するために、2つテキストボックスを用意することは多々ありますが、
1つ目のパスワードと2つ目のパスワードが一致していない場合はsubmitしない、なんてことも出来ちゃいます。
要素にsetCustomValidityというメソッドが追加され、ここにメッセージをセットするとエラーチップを表示してくれます。
setCustomValidityにセットしたメッセージとは別に日本語で何かメッセージが出ていますが、これ消せないのかな？
■対応ブラウザ
現時点ではOperaのみ、バージョンは10で試しました。
■制約バリデーション APIの仕様
制約 - フォーム - HTML要素 - HTML5タグリファレンス - HTML5.JP
自分の使っているブラウザでどの程度inputタグの属性がサポートされているかは、以下のサイトを閲覧すると確認できます。
HTML5 input attributes support
■参考リンク
・HTML5, きちんと。
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1224
- Listed below are links to weblogs that reference
- HTML5 - inputタグのrequired属性などなど from HouseTect, JavaScript Blog
