Page 1 sur 1
faire de beaux formulaires
Posté : 01 août 2008, 18:06
par x@v
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
Posté : 01 août 2008, 18:46
par Patriboom
et pourquoi te priver des tableaux?
Posté : 01 août 2008, 18:56
par x@v
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 !
Posté : 01 août 2008, 19:55
par dunbar
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>
Posté : 01 août 2008, 23:38
par Berzemus
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.
Posté : 02 août 2008, 01:22
par Victor BRITO
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.
Posté : 02 août 2008, 11:42
par Cyrano
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.
Posté : 02 août 2008, 15:40
par dunbar
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
Posté : 02 août 2008, 15:50
par Victor BRITO
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.
Posté : 02 août 2008, 16:58
par Invité
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
Posté : 09 août 2008, 20:09
par x@v
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.
Posté : 10 août 2008, 17:31
par Victor BRITO
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é).
Posté : 12 août 2008, 10:37
par x@v
je disais "un peu" par ironie. Je suis bien conscient de l'inteêt de limiter le code