記事一覧

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無しでも色んなことができるようになって便利（その分覚えることが多いけど）。

続き

CSSで簡易クイズ
  • ファイル 92-1.png
  • ファイル 92-2.png
  • ファイル 92-3.png

quotes: Emily/Phase4.5

ソース
<style>
#quiz-test:focus:invalid + ul:after {
  content: '間違えないでねー？';
}
#quiz-test:focus:valid + ul:after {
  content: '正解！';
}
.quiz-surfaces li {
  display: none;
}
#quiz-test:focus:invalid + .quiz-surfaces .quiz-invalid {
  display: block;
}
#quiz-test:focus:valid + .quiz-surfaces .quiz-valid {
  display: block;
}
#quiz-test:not(:focus) + .quiz-surfaces .quiz-not-focus {
  display: block;
}
</style>
<div>
  <label for="quiz-test">この娘の名前は？</label>
  <input type="text" name="quiz-test" id="quiz-test" value="" maxlength="20" size="20" required="required" pattern="(E|e)mily|(エミリ|えみり)ー?" placeholder="名前を入力してね！" />
  <ul class="quiz-surfaces">
    <li class="quiz-not-focus"><img src="surface0000.png" alt="surface0" width="253" height="385" /></li>
    <li class="quiz-invalid"><img src="surface0004.png" alt="surface4" width="253" height="385" /></li>
    <li class="quiz-valid"><img src="surface0005.png" alt="surface5" width="253" height="385" /></li>
  </ul>
</div>