Home > Web | 技術 > HTML5 - inputタグのrequired属性などなど

HTML5 - inputタグのrequired属性などなど

required属性

input要素に新しく追加されたrequired属性は、submitボタンが押されたタイミングでもしも値が入力されていない場合にチップを表示してくれます。
これを使うとJavaScriptで必須バリデーションを作る必要がなくなりそうで、ちょっと便利かもと思いました。
(まぁサーバーサイドのエラーチェックは必須ですけどねっ!)

チップは以下のように表示されて、ユーザーに必須であることをお知らせしています。

required

はじめsubmitボタンを押してもエラーチップが出なくてハマったのですが、どうやらname属性が必須のようです。

■対応ブラウザ
現時点ではOperaのみ、バージョンは10で試しました。

■required属性の仕様
4.10.5.2 Common input element attributes -- HTML5

placeholder

こっちはここ最近よく見る、focusがあたると文字が消えてblurすると文字が表示されるアレです。

しかもさりげなく角丸になってますw

placeholder

■対応ブラウザ
現時点では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, きちんと。

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な情報をあなたに

Home > Web | 技術 > HTML5 - inputタグのrequired属性などなど

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top