18041 sujets

Questions générales et questions de débutants

[Résolu] Input type="hidden" Validation W3C (formulaire contact)

Bonjour,

Mon hébergeur met à disposition un code (prêt à l'emploi) d'un formulaire de contact que j'ai adapté à mon site très facilement.
Cependant il ne passe pas la validation W3C en html5 à cause de:

Error: The for attribute of the label element must refer to a non-hidden form control ...
>?        <label for="nom">Nom*
</


Alors que sur le site de MDN de Mozilla je trouve cette info
"Aucune contrainte de validation n'est appliquée sur ces valeurs."

Les données sont récupérées après la mise en forme par:

<input type="hidden" name="infosamba" value="info" />
<input type="hidden" name="recipient" value="test_formulaire@xxx.be" />
<input type="hidden" name="redirect" value="http://www.xxx.be/merci.html" />
<input type="hidden" name="missing_fields_redirect" value="www.xxxbe/error.html" />
<input type="hidden" name="required" value="Nom,Prenom,Email,Media,Message" />



2 questions:
- Dois-je remplacer le code suivant et si oui par quoi ?
<input type="hidden"...


- Sur base de quoi fonctionne ce formulaire ? Mes maigres connaissances me font penser à du JS.

<form method="post" action="http://www.xxx.be/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onSubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; 
window.onbeforeunload = function () {document.charset=originalCharset;};">


Merci
Modifié par Silencio (25 Oct 2017 - 11:05)
L'attribut "for" de la balise <label> doit contenir l'id de son input

<label for="foo">Foo:</label>
<input id="foo">


Sinon tu peux égalemnt contourner en insérant l'input dans le label directement.
<label>
    Foo: <input name="foo">
</label>


Note que l'input ne peux pas être hidden, cependant il peut être stylisé pour faire la même chose que hidden 
<input style="display:none">

Modifié par JENCAL (25 Oct 2017 - 11:48)
Bonjour Jencal et merci pour ta réponse

J'ai suivi tes conseils mais ça ne fonctionne pas.
- J'ai remplacer les "name" par des "id" au cas où. Le formulaire ne s'envoie pas et renvoie une page d'erreur.

- Contourner le problème comme tu le proposes double le nombre d'erreur sur W3C. Un ascendant de label doit avoir un "id". Si je mets des "id" dans "input" imbriqué dans "label", W3C me renvoie la même erreur.

- Remplacer "<input type="hidden" par un input -->display: none" en css ben ... ça n'affiche plus aucun input (nom, prénom, ...). J'ai donc mis dans un div les input de contrôle (voir 2è code dans mon premier poste) avec id=input et un display: none en css. Visuellement ça marche mais W3C n'en veut pas.

- Le pire ... même si j'enlève les <input type="hidden" et ne mets pas de dipslay: none en css (donc rien n'est caché et la série d'input apparaissent dans le formulaire) et bien W3C n'en veut pas.

Me voilà bien mal barré ! J'imagine que cela vient directement du type de formulaire ?
Modifié par Silencio (25 Oct 2017 - 18:04)
Le problème c'est que ton for="nom" ne correspond à rien. L'attribut For doit correspondre à l'id d'un de tes éléments de formulaire <input id="nom">.

Rien à voir avec les input hidden.
Bonjour et merci d'intervenir sur mon cas kustolovic

Je viens de valider le formulaire original proposé par mon hébergeur et il passe le test W3C.
Donc la manière dont le formulaire est envoyé n'y est pour rien.
La différence entre le formulaire original et mon adaptation est l'ajout des "label" pour une présentation moins spartiate.

Voici un exemple des "input" d'origine

E-mail
<br />
<input name="email" /><br />


Voici mon html. Le div "recaptcha" est encore en cours d'insertion. Reste le côté serveur à finaliser.



<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ecole_samba.css" />
<link rel="stylesheet" type="text/css" href="formulaire.css" />
<script src='https://www.google.com/recaptcha/api.js'></script> <title>Formulaire</title>
</head>


<body id="body_contact">
   
<!--Début contenu--> 
    <form method="post" action="http://www.ecole-de-samba-de-bruxelles.be/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onSubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; 
window.onbeforeunload = function () {document.charset=originalCharset;};">

        <label for="nom">Nom*</label>
        <input name="Nom" required="required" />
    
        <label for="prenom">Prénom*</label>
        <input name="Prenom" required="required" />
    
        <label for="email">E-mail*</label>
        <input name="Email" required="required" />
    
        <label for="media">Comment avez-vous connu notre site ?</label>
        <textarea cols="40" rows="10" name="Media"></textarea>
    
        <label for="message">Message*</label> 
        <textarea cols="40" rows="10" name="Message" required="required"></textarea>
    
        <input type="submit" name="Envoyer" />
        <input type="reset" name="Effacer" />
        <p id="champs_obigatoires">Veuillez compléter tous les champs marqués de (*)</p>
        
        <div><!--Invisible ReCaptcha en cours d'insertion-->
        	<button class="g-recaptcha" data-sitekey="6Lcw6DUUAAAAAB8b-gMu1_Ckwh6Hh5vgH22WLbcT" data-callback="YourOnSubmitFn">
            Submit
            </button>
        </div>
    
    <div id="input"><!--id pour mettre un display: none. Inopérant pour validation-->
    <input type="submit" value="Envoyer" />
    <input type="hidden" name="recipient" value="test_formulaire@xxx.be" />
    <input type="hidden" name="redirect" value="http://www.ecole-de-samba-de-bruxelles.be/merci.html" />
    <input type="hidden" name="missing_fields_redirect" value="www.ecole-de-samba-de-bruxelles.be/error.html" />
    <input type="hidden" name="required" value="Nom,Prenom,Email,Media,Message" />
    </div>
    
</form>


<!--Fin contenu--> 

<!--Début footer--> 

</body>


Merci.
Salut bzh

Je viens de coller mon html. Tu y verras que tous les for="..." sont relié à leur input name="..." correspondant.
Dans le code que j'ai collé, dans les input, les "name" commence par un majuscule. Mais même en respectant la casse ça ne passe pas.

Merci pour ton intervention.
Modérateur
Re,

et bien for pointe sur l'id d'un élément et non son name, fait gaffe aussi à la casse:


<label for="nom">Nom*</label>
<input id="nom" name="Nom" required>
Re kustolovic

Cette fois c'est la bonne ! Merci à vous.

J'avais tenté hier de mettre des "id" dans les "input" mais ma bêtise a été de remplacer les "name" par des "id".
Je viens d'ajouter des "id" à tous mes "input" et tout fonctionne correctement.

Merci d'avoir éclairé mes neurones. Problème résolu.

... et à bientôt pour des questions un peu moins bêtes, je l'espère.
Oui effectivement Jencal. Encore merci.

Et pour Bzh, désolé, je n'ai pas bien interprété ton message. Il donnait bien la réponse. Merci à toi aussi.

Je clos le sujet.
Sujet clos
Aller à