Настройка поля ввода 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). Я хочу, чтобы моя форма переключалась между изображениями, если поле ввода с типом = «электронная почта» верное.

Спасибо заранее,

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 для мобильных устройств (частичная поддержка), Blackberry browser 10.0. Не поддерживается в сафари iOS, браузере Android и Opera mini. См.: http://caniuse.com/#feat=form-validation

Answer 2

Вы говорите о проверке входных данных. Вы не можете сделать это только с помощью css и html, вам действительно нужен javascript. В мае этого года помогает JavaScript Form Validation