[Résolu] Formulaire pas valide

Question

Pages :

profilm

5 Aug 2005 à 21:18

Salut à tous

j'ai fait un formulaire d'inscription en XHTML et CSS, il est bien à l'écran, mais pas valide au W3C. J'ai beau chercher, je comprend pas pourquoi (suis débutant) ..

un coup de pouce serait le bienvenue Smiley smile

Le résultat à l'écran : http://www.image-dream.com/up/mini/1123275469-Formulaire.gif

Le code :

<div class="form1">

<p><div class="form3"><strong>Nom d'utilisateur (pseudo) <span class="red">*</span> :</strong></div>
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="pseudo" tabindex="20" style="width:290px;" />
	  </label></div>
  <div class="form4">Le nom d'utilisateur est votre pseudo</div></p>
    
<p><div class="form3"><strong>Prénom <span class="red">*</span> :</strong></div>
  <div class="form2"><form method="post" action="traitement.php">	
	   <label><input type="text" name="prenom" tabindex="20" style="width:290px;" />
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong>Nom <span class="red">*</span> :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="nom" tabindex="20" style="width:290px;" />
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong>Raison sociale Entreprise :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="entreprise" tabindex="30" style="width:290px;" />
       </label></div>
  <div class="form4">Pour les particuliers : ne pas remplir</div></p>
  
<p><div class="form3"><strong>Adresse <span class="red">*</span> :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="adresse" tabindex="30" style="width:290px;" />
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong></strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="adresse2" tabindex="30" style="width:290px;" />
       </label></div>
  <div class="form4">Bâtiment, étage, ..</div></p>
  
<p><div class="form3"><strong>Code postal <span class="red">*</span> :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="postal" tabindex="30" style="width:150px;" />
       </label></div>
  <div class="form4"></div></p>
  
  <div class="form3"><strong>Ville <span class="red">*</span> :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="ville" tabindex="30" style="width:290px;" />
       </label></div>
  <div class="form4"></div>
  
  <p><div class="form3"><strong>Votre région :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><select name="moyen" tabindex="40">
                   <option value="alsace">Alsace</option>
                   <option value="aquitaine">Aquitaine</option>
                   <option value="auvergne">Auvergne</option>
                   <option value="bourgogne">Bourgogne</option>
                   <option value="centre">Centre</option>
                   <option value="champagne">Champagne-ardenne</option>
                   <option value="corse">Corse</option>
				   <option value="franche">Franche-comté</option>
				   <option value="iledefrance">Ile de France</option>
				   <option value="languedoc">Languedoc-Roussillon</option>
				   <option value="limousin">Limousin</option>
				   <option value="lorraine">Lorraine</option>
				   <option value="midi">Midi-Pyrénées</option>
				   <option value="nord">Nord-Pas de Calais</option>
				   <option value="basse">Basse Normandie</option>
				   <option value="haute">Haute Normandie</option>
				   <option value="loire">Pays de la Loire</option>
				   <option value="picardie">Picardie</option>
				   <option value="poitou">Poitou Charentes</option>
				   <option value="provence">Provence Alpes Côte d'Azur</option>
				   <option value="poitou">Rhône-Alpes</option>
			   </select>
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong>Téléphone fixe <span class="red">*</span> :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="telephone1" tabindex="10" style="width:150px;" />
       </label></div>
  <div class="form4">Si vous ne possédez pas de ligne fixe, vous pouvez indiquer votre portable</div></p>
  
<p><div class="form3"><strong>Téléphone portable :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="telephone2" tabindex="10" style="width:150px;" />
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong>Télécopie :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="telecopie" tabindex="10" style="width:150px;" />
       </label></div>
  <div class="form4"></div></p>
  
<p><div class="form3"><strong>E-mail :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="email" tabindex="10" style="width:290px;" />
       </label></div>
  <div class="form4">Merci de vérifier la validité de votre e-mail</div></p>
  
  <p><div class="form3"><strong>Confirmer E-mail :</strong></div>  
  <div class="form2"><form method="post" action="traitement.php">
      <label><input type="text" name="email" tabindex="10" style="width:290px;" />
       </label></div>
  <div class="form4">Merci de confirmer votre e-mail</div></p>
  
  <p><label><input type="checkbox" name="valid" />&nbsp;&nbsp;<strong><span class="element_liens"><a href="CGV.html">J'ai lu(e) et j'accepte vos conditions générales dans leur intégralité</a></span></strong></label></p>
  <p>
       <input type="submit" value="Confirmer" /> <input type="reset" value="Annuler" />
   </p>
</div>[/url]

Modifié par profilm (06 Aug 2005 - 11:23)

profilm

6 Aug 2005 à 11:22

Re

bon, finalement, j'ai trouvé tout seul : j'avais mis trop de balises qui n'étaient pas utiles dans cette application. Voici le nouveau code et cette fois il est valide. Espèrons que ca servira à un autre débutant ...

<div class="form1">

<div class="form3"><strong>Nom d'utilisateur (pseudo) <span class="red">*</span> :</strong></div>
<div class="form2"><input type="text" name="pseudo" tabindex="20" style="width:290px;" /></div>
<div class="form4">Le nom d'utilisateur est votre pseudo</div>
    
<div class="form3"><strong>Prénom <span class="red">*</span> :</strong></div>
<div class="form2"><input type="text" name="prenom" tabindex="20" style="width:290px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>Nom <span class="red">*</span> :</strong></div>  
<div class="form2"><input type="text" name="nom" tabindex="20" style="width:290px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>Raison sociale Entreprise :</strong></div>
<div class="form2"><input type="text" name="entreprise" tabindex="30" style="width:290px;" /></div>
<div class="form4">Pour les particuliers : ne pas remplir</div>
  
<div class="form3"><strong>Adresse <span class="red">*</span> :</strong></div>  
<div class="form2"><input type="text" name="adresse" tabindex="30" style="width:290px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong></strong></div>  
<div class="form2"><input type="text" name="adresse2" tabindex="30" style="width:290px;" /></div>
<div class="form4">Bâtiment, étage, ..</div>
  
<div class="form3"><strong>Code postal <span class="red">*</span> :</strong></div>  
<div class="form2"><input type="text" name="postal" tabindex="30" style="width:150px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>Ville <span class="red">*</span> :</strong></div>  
<div class="form2"><input type="text" name="ville" tabindex="30" style="width:290px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>Votre région :</strong></div>
<div class="form2"><select name="moyen" tabindex="40">
                   <option value="alsace">Alsace</option>
                   <option value="aquitaine">Aquitaine</option>
                   <option value="auvergne">Auvergne</option>
                   <option value="bourgogne">Bourgogne</option>
                   <option value="centre">Centre</option>
                   <option value="champagne">Champagne-ardenne</option>
                   <option value="corse">Corse</option>
				   <option value="franche">Franche-comté</option>
				   <option value="iledefrance">Ile de France</option>
				   <option value="languedoc">Languedoc-Roussillon</option>
				   <option value="limousin">Limousin</option>
				   <option value="lorraine">Lorraine</option>
				   <option value="midi">Midi-Pyrénées</option>
				   <option value="nord">Nord-Pas de Calais</option>
				   <option value="basse">Basse Normandie</option>
				   <option value="haute">Haute Normandie</option>
				   <option value="loire">Pays de la Loire</option>
				   <option value="picardie">Picardie</option>
				   <option value="poitou">Poitou Charentes</option>
				   <option value="provence">Provence Alpes Côte d'Azur</option>
				   <option value="poitou">Rhône-Alpes</option>
			   </select></div>
  <div class="form4"></div>
  
<div class="form3"><strong>Téléphone fixe <span class="red">*</span> :</strong></div>
<div class="form2"><input type="text" name="telephone1" tabindex="10" style="width:150px;" /></div>
<div class="form4">Si vous ne possédez pas de ligne fixe, vous pouvez indiquer votre portable</div>
  
<div class="form3"><strong>Téléphone portable :</strong></div>  
<div class="form2"><input type="text" name="telephone2" tabindex="10" style="width:150px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>Télécopie :</strong></div>  
<div class="form2"><input type="text" name="telecopie" tabindex="10" style="width:150px;" /></div>
<div class="form4"></div>
  
<div class="form3"><strong>E-mail <span class="red">*</span> :</strong></div>  
<div class="form2"><input type="text" name="email" tabindex="10" style="width:290px;" /></div>
<div class="form4">Merci de vérifier la validité de votre e-mail</div>
  
<div class="form3"><strong>Confirmer E-mail <span class="red">*</span> :</strong></div>
<div class="form2"><input type="text" name="email" tabindex="10" style="width:290px;" /></div>
<div class="form4">Merci de confirmer votre e-mail</div>
  
  <p><input type="checkbox" name="valid" />  <strong><span class="element_liens"><a href="CGV.html">J'ai lu(e) et j'accepte vos conditions générales dans leur intégralité</a></span></strong></p>
  <p>
       <input type="submit" value="Confirmer" /> <input type="reset" value="Annuler" />
   </p>
</div>

Comme quoi une bonne nuit de sommeil Smiley cligne

Olivier

6 Aug 2005 à 11:28

Oulaaa... c'est pas extra comme code ça Smiley ohwell

Tu sais, il y a d'autres balises que les <div> dans le panel de balises du HTML !

Notament les <label> !
http://forum.alsacreations.com/faq/#item50

Tu as, à mon avis beaucoup trop de <div> inutiles et de class inutiles, et tu n'utilises pas les <label>.

profilm

6 Aug 2005 à 11:55

salut

je sais pas encore trop me servir des <label> (notamment dans le 1er post) et cette fois, le formulaire est OK et valid, tu crois qu'on peux faire mieux avec <label> ?

ca ferait quoi comme différence ? Qu'est ce que tu trouve pas extra dans le second code ? tu changerais quoi ?

merci @+

Olivier

6 Aug 2005 à 12:06

<label> est quasi indispensable à un formulaire, ça améliore grandement l'utilisabilité du formulaire et aussi c'est fait pour ça !
C'est pas parceque c'est valide que c'est correct et sémantique.
Donc, oui bien sûr ça sera mieux avec <label>

Ce que je trouve pas extra, je te l'ai déjà dit il me semble.

Trop (beaucoup trop) de <div>, des class à mon avis inutiles etc.

Par ailleurs, tu indiques une étoile pour mentionner un champs comme requis (je suppose), mais tu n'indiques pas de légende pour l'expliquer.
Le class="red" pourrait être changer en class="required" ou class="requis" ce qui te permettrais de ne pas faire de confusion pour un eventuel changement de style, par exemple étoile en police grasse et non plus en rouge.
Modifié par Olivier (06 Aug 2005 - 12:07)

Olivier

6 Aug 2005 à 12:10

Par ailleurs, pour un formulaire de cette taille, il serait bon de séparer les diverses informations en fieldset legendé.
Par exemple, "civilité", "adresse", "contact", "condition d'utilisation"

profilm

6 Aug 2005 à 12:11

Ok mais j'ai 3 bloc en float qui constitue le formulaire (le nom du champ, le champ, et une légende éventuelle), si je mets <label> au lieu de <div>, je peux aussi aligner les 3 horizontalement ?

profilm

6 Aug 2005 à 12:14

dans le texte juste avant le formulaire, est précisé :

"Les informations marquées d'un * sont indispensables. Les autres permettront simplement de mieux vous servir."

tu crois qu'il faut le remettre dans le formulaire ou ca suffit ?

Olivier

6 Aug 2005 à 12:27

profilm a écrit :
dans le texte juste avant le formulaire, est précisé :

"Les informations marquées d'un * sont indispensables. Les autres permettront simplement de mieux vous servir."

tu crois qu'il faut le remettre dans le formulaire ou ca suffit ?

Si c'est indiqué, il n'y a pas de problème.

Pour tes légendes, elles sont à mon avis pas très indispensable, et peut être qu'un title sur le label suffirait.

Par contre, un truc illogique dans ton formulaire, tu mets que le tel fixe est requis mais tu dis que si on a pas de ligne fixe on peux indiquer le tel portable... le tel fixe en devient donc non requis Smiley ohwell

Par ailleurs, "j'ai lu(e)" => pas de (e)

Olivier

6 Aug 2005 à 12:32

Tiens, un exemple de ce qui serait pas mal :
http://elmoustikoblog.net/bordel/form/

Il resterais quelques ajustements niveau mise en forme à faire, mais en gros ça marche sans trop d'ajouts.
Peut être un ou 2 class par ci par là, mais pas beaucoup plus.

profilm

6 Aug 2005 à 12:34

oui parceque de + en + de particuliers (notamment parmi les jeunes) n'ont pas de ligne fixe et préfèrent avoir juste un (voire 2 pour les couples) portable(s).

Or pour les besoins d'identification et de livraison,il est impératif d'avoir un téléphone pour joindre le client.

D'ou le champ obligatoire "ligne fixe" qui peut etre le n° fixe ou portable selon la situation du client. L'essentiel étant que l'on puisse le joindre. J'ai pas voulu mettre les 2 obligatoire, puisque si tu n'as qu'un des 2, ca validerais pas l'inscription ..

C'est compliqué d'essayer de tout prévoir Smiley cligne

Olivier

6 Aug 2005 à 12:37

Tu ferais mieux de ne faire qu'un seul champs alors et de demander d'indiquer "numéro de téléphone (fixe ou portable)" et de ne faire qu'un champs, là tu sèmes un peu la confusion je trouve.

Olivier

6 Aug 2005 à 12:41

Sinon, le "confirmer email", je vois pas trop l'utilité Smiley ohwell

Sinon autant doubler tous les champs et faire "confirmer champ X"

profilm

6 Aug 2005 à 12:41

Ouais .. tu as peut etre raison, je vais regarder ca de plus près .. j'oublie parfois que les choses les plus simples sont souvent les meilleures.

bien ton formulaire ! je vais voir pour l'adapter à mes dimensions et mise en forme et je t'envoie le résultat final

profilm

6 Aug 2005 à 12:46

Olivier a écrit :
Sinon, le "confirmer email", je vois pas trop l'utilité

Pour la plupart des inscriptions (sauf alsa), on te demande de confirmer ton mail et ton mot de passe (quand tu en mets un) .. mais bon, je suis pas intransigeant sur là dessus Smiley smile

Olivier

6 Aug 2005 à 12:54

Voilà, je t'ai fait le formulaire tel qu'il devrait être à mon avis.

http://elmoustikoblog.net/bordel/form/

Pas besoin d'aide sur la droite, les informations que tu donnes ne sont pas vraiment indispensable et la simplification de l'ensemble du formulaire rend certaines inutiles.

J'ai juste ajouté le truc pour la "raison sociale" en title avec un curseur "help"

Je te laisse voir à quoi ça ressemble, et tu remarqueras le peu de balisage inutile et le balisage pertinent et sémantique.

Olivier

6 Aug 2005 à 12:55

profilm a écrit :

Pour la plupart des inscriptions (sauf alsa), on te demande de confirmer ton mail et ton mot de passe (quand tu en mets un) .. mais bon, je suis pas intransigeant sur là dessus

Franchement, ici je pense que c'est inutile. Enfin c'est toi qui vois, mais à mon avis ça surcharge le tout inutilement.

Olivier

6 Aug 2005 à 12:56

J'ajoute le code sur le forum, la page va sûrement virer de mon FTP après :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>formulaire</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="fr" />
		<style type="text/css" media="screen">
			form
			{
				font: 0.8em "Trebuchet MS", helvetica, sans-serif;
				background: #f9f1c3;
			}
			
			span.requis
			{
				font-weight: bold;
				color: #f00;
			}
			
			form fieldset { border: 0 none; }
			
			form fieldset legend
			{
				font-style: italic;
				font-size: 1.2em;
			}
			
			form label
			{
				float: left;
				width: 230px;
				margin: 5px;
				clear: left;
				font-weight: bold;
				cursor: pointer;
			}
			
			form label.info { cursor: help; }
			
			form input
			{
				float: left;
				width: 300px;
				margin: 5px;
			}
			
			form fieldset#contactinfo input { width: 160px; }
			
			form fieldset#contactinfo input.mail { width: 300px; }
			
			form select
			{
				float: left;
				margin: 5px;
				width: 250px;
			}
			
			form fieldset#termuseinfo input
			{
				float: left;
				width: auto;
			}
			
			form fieldset#termuseinfo label
			{
				clear: none;
				width: auto;
				text-decoration: underline;
			}
						
			form div.submit input
			{
				width: auto;
				float: none;
			}
		</style>
	</head>

	<body>
	<div id="conteneur">
		<form action="" method="post">
		<p><strong>Nota Bene&nbsp;:</strong> Les champs marqué d'une étoile (<span class="requis">*</span>) sont obligatoire.</p>
		<fieldset id="civiliteinfo">
			<legend>Civilité</legend>
			<label for="pseudo">Nom d'utilisateur (pseudo) <span class="requis">*</span>&nbsp;:</label> <input type="text" name="pseudo" id="pseudo" /><br />
			<label for="prenom">Prénom <span class="requis">*</span>&nbsp;:</label> <input type="text" name="prenom" id="prenom" /><br />
			<label for="nom">Nom <span class="requis">*</span>&nbsp;:</label> <input type="text" name="nom" id="nom" /><br />
			<label for="entreprise" class="info" title="Pour les particuliers, ne pas remplir">Raison sociale Entreprise&nbsp;:</label> <input type="text" name="entreprise" id="entreprise" /><br />
		</fieldset>
		
		<fieldset id="adresseinfo">
			<legend>Adresse</legend>
			<label for="adresse">Adresse <span class="requis">*</span>&nbsp;:</label> <input type="text" name="adresse" id="adresse" /><br />
			<label for="batiment">Batiment, étage, &#8230;&nbsp;:</label> <input type="text" name="batiment" id="batiment" /><br />
			<label for="codepostal">Code postal <span class="requis">*</span>&nbsp;:</label> <input type="text" name="codepostal" id="codepostal" /><br />
			<label for="ville">Ville <span class="requis">*</span>&nbsp;:</label> <input type="text" name="ville" id="ville" /><br />
			<label for="region">Votre région&nbsp;:</label>
				<select name="region" id="region">
					<option selected="selected" value="alsace">Alsace</option>
					<option value="aquitaine">Aquitaine</option>
					<option value="auvergne">Auvergne</option>
					<option value="basse-normandie">Basse-Normandie</option>
					<option value="bourgogne">Bourgogne</option>
				</select>
		</fieldset>
		
		<fieldset id="contactinfo">
			<legend>Contact</legend>
			<label for="tel">Téléphone (fixe ou portable) <span class="requis">*</span>&nbsp;:</label> <input type="text" name="tel" id="tel" /><br />
			<label for="telecopie">Télécopie&nbsp;:</label> <input type="text" name="telecopie" id="telecopie" /><br />
			<label for="email">e-mail&nbsp;:</label> <input class="mail" type="text" name="email" id="email" /><br />
		</fieldset>
		
		<fieldset id="termuseinfo">
			<legend>Conditions d'utilisation</legend>
			<input type="checkbox" name="termuse" id="termuse" /> <label for="termuse">J'ai lu et j'accepte vos conditions générales dans leur intégralité</label><br />
		</fieldset>
		
		<div class="submit">
			<input type="submit" name="envoi" value="Confirmer" />
			<input type="reset" value="Annuler" />
		</div>
		</form>
	</div>
	</body>
</html>

Les <br /> ne sont là que pour IE qui ne comprend rien à rien Smiley ohwell

Modifié par Olivier (06 Aug 2005 - 13:06)

profilm

6 Aug 2005 à 15:17

je peux pas intégrer ton formulaire, j'ai déjà fait 3 pages et ca me fait tout un binz dans les autres pages (le CSS).

Mais indépendemment de ce détail, pourquoi si peu de sites de e-commerce ne sont pas valide W3C ?

Olivier

6 Aug 2005 à 15:26

On va pas lancer un troll sur les sites e-commerces valides/pas valide hein Smiley cligne

Je vois pas pourquoi tu pourrais pas intégrer ce que j'ai fait Smiley ohwell

Va falloir m'expliquer là...

Ca ne fera aucun binz, c'est pareil que ce que tu as fais, mais avec un code HTML propre.

Pages :

Sujet clos

Sémantique web et HTML

[Résolu] Formulaire pas valide