Les "label" recouvrent les "input" ! [resolu] [Résolu]

Messages postés
49
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
19 novembre 2019
-
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://youtu.be/hXLDI7xr4-w) 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 !
Afficher la suite 

2 réponses

Messages postés
49
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
19 novembre 2019
0
Merci
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
Commenter la réponse de emrh
Messages postés
49
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
19 novembre 2019
0
Merci
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";}?>">
donc bien un probléme de CSS...
emrh
Messages postés
49
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
19 novembre 2019
> Ohot -
Tout à fait...et je n'ai même pas pensé à résoudre dynamiquement un problème CSS par du PHP !
Je pensais à un truc en Javascript avec des if du style :
if(le champ input à une valeur différente de vide){alors...

Mais je ne voyais pas comment le formuler ni où le placer !
:-(
Commenter la réponse de emrh