mise en forme d'un formulaire

Vincent · 12 Juillet 2004

Bonjour

voila mon probleme,

J'ai une page qui est un formulaire et je ne vois pas comment je peux aligner les libellés et les champs à remplir en face autrement que par un tableau.

J'ai beaucoup lu que les tableaux ne doivent etre utilisé que pour des données 'tabulaires', Est-ce que les formulaire en font parti?

J'ai l'habitude de faire 1 tableau avec 1 ligne par donnée et 1 cellule pour le libellé + seconde cellule pour mon champs à remplir.

Comment faites vous pour aligner les libellés d'un coté et les champs de l'autre sans l'aide de tableau?

Merci

ElMoustiko · 12 Juillet 2004

Pour ce qui est des tableaux pour les formulaires, c'est assez discutable d'apres ce que j'ai compris, en tout cas je sais que certains les utilisent tout de meme, comme sur http://www.hicksdesign.co.uk par exemple

Sinon as tu essayé de positionner tes champs et tes label ? je me demande si avec un positionement relatif tu n'arriverais pas obtenir quelque chose de correct... Sinon j'avais , mais je ne sais plus ou c'est bien dommage, qu'en utilisant 2 span (un pour les label l'autre pour les input) en utilisant les float, tu devais pouvoir reussir a faire quelque chose

@++

Vincent · 12 Juillet 2004

Pour ce qui est des tableaux pour les formulaires, c'est assez discutable d'apres ce que j'ai compris, en tout cas je sais que certains les utilisent tout de meme, comme sur http://www.hicksdesign.co.uk par exemple

je ne vois pas ou est le formulaire sur le lien que tu as donné.

Je vais essayer de creuser la question avec ton idée de span.

ElMoustiko · 12 Juillet 2004

Si tu veux ajouter une reponse a un des articles tu as un formulaire, et bien c'est un tableau (sauf si a été changé depuis peu ! )

Sinon j'ai fait un petit test rapidement pour les formulaire j'en suis arrivé a un resultat assez correct, a creuser je pense et a ameliorer

<?xml version="1.0" encoding="iso-8859-1"?>
<!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="en" lang="fr">
	<head>
  <title>Mise en forme d'un formulaire</title>
  <style type="text/css">
  fieldset {
 	 width: 300px;
 	 }
  div.left {
 	 width: 50%;
 	 float: left;
 	 }
  div.left p {
 	 text-align: right;
 	 margin-right: 30px;
 	 }
  div.right {
 	 width: 50%;
 	 float: left;
 	 }
  </style>
	</head>

	<body>
	<form action="login.php" method="post">
  <fieldset>
 	 <legend>Formulaire d'identification</legend>
 	 <div class="left">
    <p><label for="input1">Nom :</label></p>
    <p><label for="input2">Mot de passe :</label></p>
    <p><label for="input3">Email :</label></p>
 	 </div>
 	 
 	 <div class="right">
    <p><input type="text" id="input1" name="nom" /></p>
    <p><input type="password" id="input2" name="pass" /></p>
    <p><input type="text" id="input3" name="email" /></p>
 	 </div>
  </fieldset>
	</form>
	</body>
</html>

C'est bien sur validé !

@++

LaurentDenis · 12 Juillet 2004

Plutôt que les tableaux en eux-mêmes, c'est la manière de s'en servir qui est dangereuse, ici.

On peut être accessible en utilisant des tableaux sans imbrication pour des formulaires simples. Le principal risque est que les <label> des contrôles soient dissociés de ceux-ci lorsque le tableau est linéarisé (rendu dans l'ordre brut des éléments HTML).

Par exemple, le tableau suivant, qui place les <label> au dessus des contrôles:

<table>
  <tr>
    <td>label 1</td>
    <td>label 2</td>
</tr>
  <tr>
    <td>contrôle 1</td>
    <td>contrôle 2</td>
  </tr>
</table>

... donnera un résultat aberrant une fois linéarisé :

label1

label2

contrôle 1

contröle 2

En revanche :

<table>
  <tr>
    <td>label 1</td>
    <td>contrôle 1</td>
</tr>
  <tr>
    <td>label 2</td>
    <td>contrôle 2</td>
  </tr>
</table>

se linéarise correctement...

label 1

contrôle 1

label 2

contrôle 2

Mais il existe de nombreuses solutions CSS. Tu peux par exemple utiliser une liste de définition (très à la mode ) sur le principe :

<dl>
<dt>label 1</dt>
<dd>contrôle 1</dd>
<dt>label 2</dt>
<dd>contrôle 2</dd>
etc.
</dl>

avec en CSS un float:left sur les <dt>...

ElMoustiko · 12 Juillet 2004

Wé bah ca m'apprendras a aller vite tien ! sans tableaux j'ai le meme probleme, le label sont dissocié des input si j'enleve les css, c'est pas tres bon ca ! donc en effet les listes de definition devraient apporter un plus pour ce genre de choses ! Pas difficile a mettre en place je pense !

@++

Vincent · 12 Juillet 2004

Pour l'accessibilité, meme si je sujet est fort interessant, ce n'est pas le probleme dans mon projet...

Notre gros probleme c'est que l'application (c'est une appli, pas un site, nous imposons le navigateur a nos utilisateurs --> pour une filiale, l'angleterre, ils sont encore a 95% sur Nestcape 4.51 :shutup: ) évolue beaucoup en fonctionnalité mais les responsables ne veulent pas que les pages s'alourdissent en taille pour ne pas pénaliser les temps de réponse.

Donc j'ai la fermé intention de maximiser l'utilisation des css... (je peux m'en donner a coeur-joie maintenant que l'abandon de netscape 4.51 a été validé :up: )

merci pour votre aide, je vais regarder cela cette apres midi.

LaurentDenis · 12 Juillet 2004

Sinon j'avais , mais je ne sais plus ou c'est bien dommage, qu'en utilisant 2 span (un pour les label l'autre pour les input) en utilisant les float, tu devais pouvoir reussir a faire quelque chose

Voir à nouveau chez les pompeurs : Techniques et astuces pratiques pour une mise en page CSS

Loupilo · 12 Juillet 2004

LaurentDenis a donné le bon article.

Voici celui d'ALA.

Cette solution fonctionne très bien, et ne nécessite pas l'utilisation de tableaux, totalement obsolètes dans ce cas.

Les CSS permettent de tout faire !

A+

Loupilo

Vincent · 12 Juillet 2004

loupilo : celui de laurent est la traduction en francais de ta source sur ALA

MissMonde · 12 Juillet 2004

Bonjour,

à tout hasard, va voir ce tutoriel, je l'ai trouvé hier sans en avoir l'utilité pour l'instant, donc je ne sais pas ce que ça vaut, en tout cas il m'a paru intéressant, dans la mesure où il part d'un formulaire de base qu'il transforme en quelque chose d'ergonomique.

tutoriel/formulaire

Tu y trouveras peut-être ce que tu cherches.

Loupilo · 12 Juillet 2004

loupilo : celui de laurent est la traduction en francais de ta source sur ALA

Oui bien sur

J'ai donné le lien original du «bon article».

A+

Loupilo

LaurentDenis · 12 Juillet 2004

à tout hasard, va voir ce tutoriel [...]

tutoriel/formulaire

Très intéressant, ce tutoriel !

Juste quelques fonctionnalités de détails à vérifier car peut-être mal supportées ici ou là, comme optgroup et l'aide contextuelle avec les title ?

L'auteur propose d'ailleurs d'autres ressources tout aussi intéressantes...

Merci pour le lien

Loupilo · 12 Juillet 2004

Voici le lien qui regroupe tout ce que vous avez déjà donné, et même mieux :

Formidablement beau.

Toutes les solutions pour styler [de façon standard] les formulaires.

A+

Loupilo

Connexion

mise en forme d'un formulaire

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter