Les "label" recouvrent les "input" ! [resolu]
Résolu
emrh
Messages postés
427
Date d'inscription
Statut
Membre
Dernière intervention
-
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous...
Pour faire une petite animation dans un formulaire de contact, j'ai suivi un tuto sur les Input en Material Design (ici : https://www.youtube.com/watch?v=hXLDI7xr4-w&feature=youtu.be) et je rencontre un problème en essayant d'intégrer le principe dans mon site.
J'ai la bonne idée d'envoyer le formulaire en method="post" vers une page 'envoi.php qui vérifie les données saisies et retourne sur la page du formulaire en cas de problème (comme sur la non validation du Re-Captcha par exemple).
Le souci est que les données saisies par l'utilisateur sont bien présentes au retour dans tous les champs du formulaire grâce à $nom=$_SESSION['nom']; mais les label viennent recouvrir ces données comme si les input étaient vides.
Il suffit pour régler le souci de cliquer sur le champ pour que le label se place en hauteur, mais ce n'est pas très esthétique et pratique ! Je pense que le problème vient de la partie javascript mais je n'ai aucune (compétence) idée de comment tourner le code pour lui faire prendre conscience qu'au retour sur la page il y a déjà qqchose dans les champs !
Plutôt que de copier des pages et des pages de codes voici le lien vers mon problème :
https://codepen.io/Etienne69/pen/WNNLPdJ
Merci d'avance pour votre aide !
Pour faire une petite animation dans un formulaire de contact, j'ai suivi un tuto sur les Input en Material Design (ici : https://www.youtube.com/watch?v=hXLDI7xr4-w&feature=youtu.be) et je rencontre un problème en essayant d'intégrer le principe dans mon site.
J'ai la bonne idée d'envoyer le formulaire en method="post" vers une page 'envoi.php qui vérifie les données saisies et retourne sur la page du formulaire en cas de problème (comme sur la non validation du Re-Captcha par exemple).
Le souci est que les données saisies par l'utilisateur sont bien présentes au retour dans tous les champs du formulaire grâce à $nom=$_SESSION['nom']; mais les label viennent recouvrir ces données comme si les input étaient vides.
Il suffit pour régler le souci de cliquer sur le champ pour que le label se place en hauteur, mais ce n'est pas très esthétique et pratique ! Je pense que le problème vient de la partie javascript mais je n'ai aucune (compétence) idée de comment tourner le code pour lui faire prendre conscience qu'au retour sur la page il y a déjà qqchose dans les champs !
Plutôt que de copier des pages et des pages de codes voici le lien vers mon problème :
https://codepen.io/Etienne69/pen/WNNLPdJ
Merci d'avance pour votre aide !
A voir également:
- Les "label" recouvrent les "input" ! [resolu]
- Label printer logiciel - Télécharger - Outils professionnels
- Input not supported - Forum Ecran
- No video input - Forum Windows
- [ NO VIDEO INPUT ENTER SLEEP MODE] - Forum PC portable
- Input ou output ✓ - Forum Audio
2 réponses
Je veux bien que les modérateurs placent mon sujet en CSS, mais le problème vient du code Javascript qui ne sait pas reconnaître le champ input rempli au retour d'une validation de formulaire refusée...
https://codepen.io/Etienne69/pen/WNNLPdJ
https://codepen.io/Etienne69/pen/WNNLPdJ
Je viens de recevoir une aide pour résoudre mon problème par du PHP :
<div class="field <?php if(!empty($nom)){echo "has-label";}?>">