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表單驗證