2012年10月5日金曜日

CSS3でバリデーションエラーをスタイルする

すべては下のページです。
[Bookmark]JavaScriptなしでレスポンシブでバリデーション機能付きのフォームを実装するHTML5チュートリアル :: Creatorish


どうなってるんだろうと思ってソースを見ましたが。。。
CSS3で input の疑似クラス :invalid と :valid 。
これだけでした。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 forms</title>
    <style>
        input:invalid {
            background: #ffcccc;
        }
        input:valid {
            background: #fff;
        }
    </style>
</head>

<body>
    <header><h1>HTML5 forms</h1></header>
    <form>
        <label for="form_name">Name</label>
        <input type="text" name="name" id="form_name" placeholder="your name" required>

        <label for="form_email">E-Mail</label>
        <input type="email" name="email" id="form_email" placeholder="foo@example.com" required>

        <input type="submit" value="SEND">
    </form>
</body>

</html>


知りませんでした。。。



ラベル:

0 件のコメント:

コメントを投稿