faire de beaux formulaires

01 août 2008, 18:06

Bonjour,
J'ai des problèmes pour conçevoir mes formulaires sans tableau, donc basiquement je souhaite aligner le label à gauche et le champs correspondant à droite, mon xhtml

Code : Tout sélectionner

	<p>Rentrer vos mots clés séparés par des espaces</p>	
   <form action="<?php echo $_SERVER['PHP_SEFF'];?>" method="post">
   		<legend>Rechercher un utilisateur</legend><br />
   			<label class="lab" for="motsCles">Moteur de recherche </label>
   			<input class="inp" type="text" size="30" id="motsCles" name="motsCles" /><br />
   			<label class="lab" for="test">test</label>
   			<input class="inp" type="text" size="30" id="test" name="test" /><br />		
   			<input type="submit" value="Rechercher" id="boutonEnvoi" />
   </form>

Ma css

Code : Tout sélectionner

<style>
.inp {display:block; width:175px; float:left; margin-bottom: 20px;}
.lab {display:block; width:75px; float:left; padding-right: 20px; text-align:right;}
#boutonEnvoi {width:75px; margin-left:95px;}
</style>

Merci

01 août 2008, 18:46

et pourquoi te priver des tableaux?

01 août 2008, 18:56

parce qu'ils sont pas fait pour des formulaire et que je veux développer des sites valides au w3c
A la limite je préfèrerai utiliser les listes, mais comme les tableau, ce n'est pas recommencer

j'ai trouvé

Code : Tout sélectionner

form {margin:0; padding: 0; display:block; width:400px;}
.inp {display:block; width:205px; float:left; margin:0 0 50px 0;}
.lab {display:block; width:205px; float:left; padding-right: 30px; text-align:right;}
#boutonEnvoi {width:75px; margin-left:95px;}

J'ai du réfléchir pour trouvé, comme quoi je suis pas bête

Hélas sa ne fonctionne pas sous IE7 !

01 août 2008, 19:55

parce qu'ils sont pas fait pour des formulaire et que je veux développer des sites valides au w3c

Je ne suis pas d'accord si tu respect les critéres tu peut parfaitement faire un formulaire avec des tableau et le rendre valide
exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="fr-be" http-equiv="Content-Language" />
<meta content="text/html; charset=iso-8859-15" http-equiv="Content-Type" />
<title>test phpfrance</title>
<style type="text/css">
.style1 {
font-size: xx-small;
}
</style>
</head>

<body>

<form action="" method="post">
<table style="width: 100%; height: 118px">
<tr>
<td style="width: 64px">Nom :</td>
<td><input name="nom" type="text" /></td>
</tr>
<tr>
<td style="width: 64px">Prénom :</td>
<td><input name="prenom" type="text" /></td>
</tr>
<tr>
<td style="width: 64px">Email :</td>
<td><input name="mail" type="text" /></td>
</tr>
</table>
<input name="Submit1" type="submit" value="soumettre" />
</form>
<p class="style1">
<a href="http://validator.w3.org/check?uri=http% ... ne&group=0">
Valide XHTML</a></p>

</body>

</html>

01 août 2008, 23:38

lukew est un spécialiste des interfaces. Il doit avoir un PDF sur comment bien faire un formulaire.

Et pour un formulaire, un tableau c'est très adapté, je trouve.

02 août 2008, 01:22

Si tu as des données tabulaires à afficher dans un formulaire, oui. Autrement, c'est du détournement de balise.

Pour la CSS de x@v, essaie d'ajouter un clear: left à la classe .lab. De plus, pour IE 6, tu risques d'avoir un doublement de marge, auquel cas tu le corriges avec un display: inline.

Cela dit, vu que le positionnement flottant n'est pas sans risque, on peut en limite l'usage pour IE 6 et 7 (via une feuille de style appelée par un commentaire conditionnel) ; pour Firefox 3, Opera, Safari et IE 8, on peut avantageusement le remplacer par un display: inline-table ou un display: inline-block.

02 août 2008, 11:42

On peut parfaitement construire un formulaire sans utiliser une mise en page avec des tableaux. Les tableaux sont parfaits pour afficher des données "tabulaires", listes de données issues de base de données par exemple. Pour la mise en page, on dispose des CSS et ça fonctionne très bien : Illustration teté avec Firefox, IE6, IE7, Opera 9.5 et Safari pour Windows 3.1.2

Note : ce formulaire n'enregistre rien du tout, c'était juste pour moi afin de tester du JavaScript.

02 août 2008, 15:40

On peut parfaitement construire un formulaire sans utiliser une mise en page avec des tableaux.

Ton point de vue se défend, mais il n'ai pas exact de dire qu'un tableau dans un formulaire le rend invalide par le W3C.
Voilà pourquoi j'ai dit plus haut qu'un formulaire dans un tableau étais possible et ne le rendais spécialement invalide aux test W3C.

Chercher l'erreur

02 août 2008, 15:50

Le validateur du W3C ne vérifie que la conformité de ton code à la syntaxe de la DTD appelée par le doctype (pour le XML, il vérifiera que le code est "bien formé"). Il ne vérifiera pas si le balisage employé est conforme au balisage sémantique ou non. Autrement dit, c'est le même principe que la validation d'une phrase comme "D'incroyables idées vertes dorment furieusement" : grammaticalement, la phrase est correcte ; mais, du point de vue sémantique, on frise l'absurde.

02 août 2008, 16:58

On peut parfaitement construire un formulaire sans utiliser une mise en page avec des tableaux.
Ton point de vue se défend, mais il n'ai pas exact de dire qu'un tableau dans un formulaire le rend invalide par le W3C.[/size]

Ai-je jamais prétendu le contraire ?

Il faut bien comprendre le point suivant : le langage HTML comporte un certain nombre de balises pour couvrir autant que faire se peut l'ensemble des éléments dont on a besoin pour structurer un document, quel que soit ce document. La balise <table> est à ce titre prévue dans ce langage avec, à l'origine, un but particulier : structurer une liste de données. Mais jamais ça n'a été prévu pour faire de la mise en forme. Le langage HTML n'est pas, n'a jamais été, et ne sera jamais un langage de mise en forme, c'est un langage de structure. On organise les données selon ce qu'elles sont : un titre, un sous-titre, un paragraphe, un formulaire, une citation, etc...

Donc tu peux effectivement construire un formulaire en utilisant une balise <table> tout en étant parfaitement conforme et valide selon les standards recommandés par le W3C : ça ne signifie pas pour autant que ce soit sémantiquement valable. Si tu veux modifier la mise en forme, il te faudra refaire le code HTML. En utilisant une mise en forme à l'aide de feuilles de style CSS, tu va gagner à moyen et long terme un temps considérable : une refonte de l'aspect visuel de tes pages ne t'imposera que de remplacer la feuille de style sans toucher la moindre ligne de ton code HTML.

C'est dans ce sens que construire des pages avec des tableaux est invalide, pas selon les standards, selon la sémantique

09 août 2008, 20:09

en faite sans tableau on économise du code, au chargement d'une page sa compte, un peu....
J'ai pensé que les formulaire sont utilisable sans tableau et que la validité sans porterai mieux, mais je suis largué...
En faite une seul chose me vient à l'esprit, c'est de faire une classe pour gérér ça, ce qui doit exister.

10 août 2008, 17:31

en faite sans tableau on économise du code, au chargement d'une page sa compte, un peu....

Pas qu'un peu : multiplie par le nombre de visites par jour le poids de ta page codé avec tableaux de mise en page, d'une part, et par celui de ta page codée selon le balisage sémantique, d'autre part. Tu gagnes plus que tu ne crois, et beaucoup plus si la page se trouve dans un site à fort trafic.

Si tu n'es pas convaincu, lis cet article de Denis Boudreau sur Temesis (même s'il date, il est toujours d'actualité).

12 août 2008, 10:37

je disais "un peu" par ironie. Je suis bien conscient de l'inteêt de limiter le code

faire de beaux formulaires

Qui est en ligne