145 votes

Comment aligner les formulaires de saisie en HTML

Je suis nouveau en HTML et j'essaie d'apprendre comment utiliser les formulaires.

Le plus gros problème que j'ai jusqu'à présent est d'aligner les formulaires. Voici un exemple de mon fichier HTML actuel :

 Prénom : 
 Nom : 
 Email : 

Le problème avec cela est que la boîte de champ après 'Email' est nettement différente en termes d'espacement par rapport au prénom et au nom. Quelle est la manière 'correcte' de les aligner essentiellement ?

J'essaie de pratiquer une bonne forme et une bonne syntaxe...beaucoup de gens pourraient le faire avec CSS je ne suis pas sûr, j'ai seulement appris les bases de HTML jusqu'à présent.

1 votes

Il y a un combat constant sur quand utiliser des tables (le cas échéant), les réponses à votre question ne font pas exception, le point médian semble être que est pour les données tabulaires, voir plus ici: stackoverflow.com/questions/83073/…

0 votes

Exactement la même question mais la réponse suggère d'utiliser la balise avec la citation de W3C: stackoverflow.com/questions/4707332

174voto

Clément Points 1439

La réponse acceptée (définir une largeur explicite en pixels) rend difficile les modifications et se casse lorsque vos utilisateurs utilisent une taille de police différente. En revanche, l'utilisation des tables CSS fonctionne très bien :

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

    Libellé court :

    Libellé très très très long :

Voici un JSFiddle : http://jsfiddle.net/DaS39/1/

Et si vous avez besoin d'aligner les libellés à droite, ajoutez simplement text-align: right aux libellés : http://jsfiddle.net/DaS39/


ÉDITER : Une autre note rapide : les tables CSS vous permettent également de jouer avec les colonnes : par exemple, si vous souhaitez que les champs de saisie prennent autant d'espace que possible, vous pouvez ajouter ce qui suit dans votre formulaire

vous voudrez peut-être ajouter white-space: nowrap aux labels dans ce cas.

6 votes

J'aime cette solution. Cela signifie que je n'ai pas à m'inquiéter de la largeur de mes colonnes qui changent inévitablement lorsque la page évolue au cours du développement. +1

11 votes

@MuhammadUmer Parce que les tableaux vont perturber les lecteurs d'écran et de nombreux appareils d'assistance, tandis que les tableaux CSS séparent la présentation du contenu. Ainsi, votre formulaire reste facilement analysable par un lecteur d'écran ou un assistant de lecture, tout en s'affichant joliment.

0 votes

@Clément comment ça se fait? Les lecteurs d'écran s'appuient sur la structure du document..et la structure de celui-ci est exactement la même que celle d'un tableau. Il suffit de remplacer p par tr, label & input par td. Je pense que td aurait un meilleur support que les nouveaux éléments label.

66voto

serialk Points 457

Un autre exemple, celui-ci utilise CSS, j'ai simplement mis le formulaire dans une div avec la classe container. Et spécifié que les éléments d'entrée contenus à l'intérieur doivent occuper 100% de la largeur du conteneur et ne pas avoir d'éléments de chaque côté.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

  Exemple de formulaire

      Prénom

      Nom de famille

      Email

2 votes

Parfait, venez de m'éviter beaucoup de tracas.

0 votes

Cela étend également mon bouton "Soumettre" à la largeur du conteneur.

4 votes

Cette solution ne semble pas fonctionner. Les éléments d'entrée ne sont pas alignés à gauche. La solution de table ci-dessous fonctionne.

50voto

amonett Points 162

Une solution simple pour vous si vous êtes nouveau en HTML, est juste d'utiliser un tableau pour aligner tout.

      Prénom:

      Nom de famille:

      Email:

50 votes

Solution rapide et simple. Laissez les débats CSS religieux pour la pause déjeuner et faites le travail.

3 votes

@ClarkeyBoy - qui se soucie tant que cela fait le travail.

1 votes

@ClarkeyBoy - commentaire le plus ignorant ? lol.. Je ne veux pas me disputer avec toi ici.. si tu veux le faire à la manière des divs, fais-le. si tu veux le faire à la manière des tables, c'est à toi de voir. mais ne suppose pas que tous les clients ou les gens s'en soucieront. la plupart d'entre eux se soucient de faire le travail..

22voto

Byron Points 70

Je trouve beaucoup plus facile de changer l'affichage des libellés en inline-block et de définir une largeur

label {
  display: inline-block;
  width: 100px;
  text-align: right;
}

  Prénom :
  Nom :
  Email :

0 votes

J'aime cette approche - c'est simple et élégant. Le seul commentaire que je ferais serait d'utiliser em ou ew plutôt que px pour améliorer la mise à l'échelle.

9voto

Collin Street Points 79

Vous devriez utiliser un tableau. En tant que question de structure logique, les données sont tabulaires : c'est pourquoi vous voulez les aligner, car vous voulez montrer que les étiquettes ne sont pas uniquement liées à leurs cases de saisie mais aussi les unes aux autres, dans une structure bidimensionnelle.

[pensez à ce que vous feriez si vous deviez afficher des valeurs de chaînes ou numériques au lieu de cases de saisie.]

2 votes

Je apprécie votre approche.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X