HTML输入字段定制

Question

如果输入的输入正确或不正确，我想制作一张仅显示图像的联系表。 我试图只使用HTML和CSS来做到这一点。 我知道有很多类似的帖子，但是都找不到我想要的答案。

我的html：

<div id="contact">
    <div class="formulier">
        <div id="inline">
            <h2>Send us a Message</h2>
            <form id="contact" action="#" method="post" name="contact">
                <label for="email">Your E-mail : </label>
                <input id="email" class="txt" type="email" name="email" />
                <img src="assets/img/NoMark.png" alt="No Mark" height="25" width="24"><br>

                <label for="msg">Enter a Message : </label>
                <textarea id="msg" class="txtarea" name="msg"></textarea><br>

                <button id="send">Send E-mail</button>
            </form>
        </div>
    </div>
</div>

所以目前我有一个输入字段，后跟一个图像（在我的情况下是一个选中标记或一个X）。 如果输入框的type =“ email”是正确的，我希望表单在图像之间切换。

提前致谢，

研究员

Answer 1

您可以尝试以下方法：

的HTML：

<input id="email" class="txt" type="email" name="email" />
<img class="not-validated" src="assets/img/NoMark.png" alt="Not validated" height="25" width="24">
<img class="valid" src="assets/img/checkmark.png" alt="Valid" height="25" width="24">
<img class="invalid" src="assets/img/cross.png" alt="Invalid" height="25" width="24"><br>

CSS：

#email ~ img.not-validated, #email:valid ~ img.valid, #email:invalid ~ img.invalid {
    display: inline-block;
}
#email:valid ~ img.not-validated, #email:invalid ~ img.not-validated, #email:valid ~ img.invalid, #email:invalid ~ img.valid {
    display: none;
}

有关HTML和CSS仅表单验证的更多信息： http : //www.the-art-of-web.com/html/html5-form-validation/

注意：浏览器支持可能不是您所需要的。 支持IE10 +，Firefox 26 +，Chrome 31 +，Safari 5.1+（部分支持），Opera 19 +，IE10.0移动版（部分支持），Blackberry浏览器10.0。 iOS Safari，Android浏览器和Opera mini不支持。 请参阅： http ： //caniuse.com/#feat=form-validation

Answer 2

您正在谈论输入验证。 您不能仅使用css和html来做到这一点，实际上确实需要javascript。 这可能有助于JavaScript表单验证