I am looking to create a contact form that will display an image depending on whether the input entered is correct or incorrect. My goal is to achieve this using only HTML and CSS, without needing any JavaScript. While there are similar posts on this topic, I have yet to find the exact solution I am seeking.
Here is what my HTML looks like:
<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>
Currently, my form consists of an input field followed by an image (either a checkmark or an X). I am aiming to have the form dynamically switch between these two images based on the correctness of the email address inputted in the "email" field.
Thank you for your assistance,
thefellowes