affichage validation par icone

Par donpepe, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.
j'ai suivi la formation dans la video "Formulaire de contact "
j'ai adapté le code

Mais je voudrai que les icones liés a VALID,INVALID & REQUIRIED s'affiche à l'exterieur de la zone de saisie mais pas dans la zone de saisie
Comment modifier le code en conséquence
Merci de votre aide

2 réponses

Defy, il y a 10 ans

Ben sans voir le code ca vas etre dur ;-) on ne connais pas les code des formations par coeur

donpepe, il y a 10 ans

Le code HTML PHP

<link rel="stylesheet" href="style.css" type="text/css" /> <form method="post" action="cible.php"> <div class="wrapChamp"> <label for="pseudo">Pseudo</label> <input type="text" name="pseudo" id="pseudo" placeholder="Votre pseudo" required="required" maxlength="16" pattern="^[a-zA-Z0-9_-]{3,16}$" /> </div> <div class="wrapChamp"> <label for="email">E-Mail</label> <input type="text" name="email" id="email" placeholder="email@example.com" required="required" maxlength="50" pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$" /> </div> <div class="wrapChamp"> <label for="message">Message</label> <textarea name="message" id="message" placeholder="Votre message ici.." required="required"></textarea> </div> <div> <input type="submit" value="Envoyer" class="bouton"/> </div> </form>

Le code CSS

/* CSS Document */ .wrapChamp{ margin-bottom:15px; } label{ display:inline-block; width:80px; height:16px; padding:8px 5px; vertical-align:top; /* Pour aligner nos etiquettes avec le haut des champs de saisie*/ margin-right:15px; background:#FF0000; border:1px solid #FF6F6F; color:#FFFFFF; text-align:left; } input:not(.bouton){ /* Tout les INPUT sauf .bouton */ height:30px; width:225px; padding-left:5px; padding-right:25px; /* Pour que le texte saisi ne va pas sur les icones valid.png et invalid.png*/ border:1px solid #D1D1D1; outline:none; /* Pour enlever la surbrillance qui apparait lors du focus*/ } textarea{ font-family:Helvetica, Verdana; height:24px; padding:8px 25px 0px 5px; width:225px; border:1px solid #D1D1D1; outline:none; resize:none; /* le TEXTAREA ne pourra plus etre agrandit par l'utilisateur */ overflow:hidden; /* Pas de scrollbar*/ -webkit-transition:height 500ms ease 0s; /* Le CSS pour animer la hauteur du TEXTAREA */ -moz-transition:height 500ms ease 0s; -ms-transition:height 500ms ease 0s; -o-transition:height 500ms ease 0s; } textarea:focus{ height:100px; border-left:1px solid #FF6F6F; } input:required, textarea:required{ background: #FFFFFF url("required.png") no-repeat 98% center; /* Pour afficher nos petits astérisques */ } input:not(.bouton):focus:valid, textarea:focus:valid{ background: #FFFFFF url("valid.png") no-repeat 98% center; /* Pour afficher l'icone valid.png lors des saisies*/ }input:not(.bouton):focus:invalid, textarea:focus:invalid{ background: #FFFFFF url("invalid.png") no-repeat 98% center; /* Pour afficher l'icone invalid.png lors des saisies*/ } input:not(.bouton):required:valid, textarea:required:valid{ background: #FFFFFF url("valid.png") no-repeat 98% center; /* Pour afficher l'icone valid.png quand c'est valide*/ } .bouton{ padding:0px; width:80px; height:30px; margin-left:125px; color:#red; background:#9FDA90; border:1px solid #6EB45C; } .bouton:hover{ cursor:pointer; } .bouton:active{ position:relative; left:1px; top:1px; } /* Quelques ajustements pour les navigateurs*/ ::-ms-clear { display: none; /* Enleve le "X" qui apparait dans les champs de formulaire sur IE10 */ } @-moz-document url-prefix() { textarea{ overflow:auto; /* Scrollbar auto uniquement pour Firefox */ } } footer{ background:#blue; }

voila les codes
valid.png, invalid.png & required.png sont les images qui apparaissenet en fonction du statut du champs mais je sais comment il faut faire pour les joindre mais tu peux remplacer par d'autres png
Dans ce code les trois images apparaissent dans la zone a droite du texte saisi mais je voudrai qu'elles apparaissent en dehors de la zone de saisie sur la droire
j'espere que je n'ai pas fais de betise en copiant le code
Merci du petit coup de pouce de ta part ou d'un collègue internaute