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」正確，我希望我的表單在圖像之間切換。

由於提前，

thefellowes

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移動（部分支持），黑莓瀏覽器10.0。 iOS Safari，Android瀏覽器和Opera mini不支持。見： http://caniuse.com/#feat=form-validation

Answer 2

你在談論的一個輸入驗證。你不能只使用CSS和HTML，你確實需要JavaScript。這可能有助於JavaScript Form Validation