記事一覧

HTML5でinputのpattern属性とCSS

pattern属性

HTML5ではinputにpattern属性というのがあって、送信前に入力値を正規表現でチェックして制限できる。Operaなどは既にこの仕様に対応している。

<input type="text" name="postcode" value="" pattern="\d{3}-\d{4}" />

これは聞いたことがあったので、SoSiReMiでも使っているのだけれど、入力値の状態をCSSで感知できるというのを昨日知った。

以下で実際に試してみた。Opera, Safari, Google Chromeで入力値に応じて表示が変わる。Firefoxは3.6.11では対応していなかったので4に期待。

JavaScript無しでも色んなことができるようになって便利(その分覚えることが多いけど)。

続きを読む