HTML输入字段定制

Question

I want to make a contact form which simply shows an image if the input that was entered was correct or incorrect. Im trying to only use HTML and CSS to do this. I know there are a lot of similar posts like this but none give me the answer im looking for.

My 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>

So currently i have an input field followed by an image (in my case by a checkmark or an X). I want my form to switch between the images if the input box with type="email" is correct.

Thanks in advance,

thefellowes

Answer 1

You could try this:

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;
}

More on html and css only form validation: http://www.the-art-of-web.com/html/html5-form-validation/

Note: browser support may not be what you need though. Support in IE10+, Firefox 26+, Chrome 31+, Safari 5.1+ (partial support), Opera 19+, IE10.0 mobile (partial support), Blackberry browser 10.0. Not supported in iOS safari, Android browser and Opera mini. See: http://caniuse.com/#feat=form-validation

Answer 2

You're talking about an input validation. You can't do it only with css and html, you'll need javascript indeed. This may helps JavaScript Form Validation