Comment aligner les formulaires de saisie en HTML

117

Je suis novice en HTML et j'essaie d'apprendre à utiliser les formulaires.

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

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Le problème avec cela est que la zone de champ après «Email» est radicalement différente en termes d'espacement par rapport au prénom et au nom. Quelle est la «bonne» façon de faire en sorte qu'ils «s'alignent» 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, je n'ai appris que les bases du HTML jusqu'à présent.

html forms alignment

— yoshyosh
source

il y a une lutte constante entre quand les tables (voire pas du tout), les réponses à votre question ne sont pas l'exception, le point médian est que <tables> est pour les données tabulaires, voir plus ici: stackoverflow.com/questions/83073 /…

— Trufa

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

— Bossliaw

62

Un autre exemple, cela utilise CSS, je mets simplement le formulaire dans un div avec la classe conteneur. Et spécifié que les éléments d'entrée contenus à l'intérieur doivent être à 100% de la largeur du conteneur et ne comporter aucun élément de chaque côté.

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

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

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Développer l'extrait

— serialk
source

2

Parfait, ça m'a évité beaucoup de déconner.

— null

Il élargit également mon bouton «Soumettre» à la largeur du conteneur.

— Saurabh Rana

4

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.

— johny why

1

Je ne suis pas un grand fan de la définition d'une largeur explicite, quand on peut s'en passer (voir ma réponse ci-dessous)

— Clément

1

Cela donne des résultats étranges avec les boutons radio. Le libellé du bouton radio affiche la ligne après le bouton radio réel.

— wordsforthewise

134

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

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

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Développer l'extrait

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

Et si vous avez besoin que les étiquettes soient alignées à droite, ajoutez simplement text-align: rightaux étiquettes: http://jsfiddle.net/DaS39/

EDIT: Encore une note rapide: les tableaux 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

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

vous pouvez ajouter white-space: nowrapau labelsdans ce cas.

— Clément
source

4

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

— Tom Lord

9

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

— Clément

3

Eh bien, l'ajustement de l'étiquette dans td suggère qu'il fait partie de données tabulaires organisées, comme des graphiques; ce n'est pas le cas ici. De plus, l'utilisation de tableaux HTML rend plus difficile la modification de la mise en page à l'avenir ou son adaptation à différentes tailles d'écran (pensez aux téléphones mobiles et aux tablettes).

— Clément

4

J'ai fortement résisté à la structure de table CSS avec le même argument que @MuhammadUmer faisait, jusqu'à aujourd'hui! J'ai cédé et j'ai décidé de l'essayer et de voir enfin l'intérêt de changer! De plus, son CSS facilite les choses à long terme

— BillyNair

2

Comment pouvez-vous étendre les colonnes avec cette solution? Afin de centrer le bouton de soumission d'alignement.

— eugenekr

31

Une solution simple pour vous si vous êtes novice en HTML, consiste simplement à utiliser un tableau pour tout aligner.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

— Amonett
source

43

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

— Emmanuel Bourg

3

@ClarkeyBoy - qui s'en soucie tant qu'il fait le travail.

— SolidSnake

1

@ClarkeyBoy - commentaire le plus ignorant? lol .. Je ne veux pas me disputer avec toi ici .. si tu veux le faire comme les divs, fais-le. si vous voulez le faire, c'est à vous de décider. mais ne supposez pas que tous les clients ou toutes les personnes s'en soucieront. la plupart d'entre eux se soucient de faire le travail.

— SolidSnake

2

@ClarkeyBoy - Lisez cette réponse et le message du W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: N'est-ce pas précisément à cela que servent les tables CSS? Obtenir une mise en page de type tableau sans dérouter les lecteurs d'écran? La mise en page demandée par l'OP est en fait assez facile à réaliser en utilisant des tableaux CSS (voir ci - dessous )

— Clément

17

Je trouve beaucoup plus facile de changer l'affichage des étiquettes en bloc en ligne et de définir une largeur

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

— Byron
source

9

Vous devriez utiliser une table. En tant que question de structure logique les données sont tabulaires: c'est pourquoi vous voulez qu'elles s'alignent, car vous voulez montrer que les étiquettes ne sont pas liées uniquement à leurs boîtes de saisie mais aussi entre elles, dans une structure bidimensionnelle.

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

— Rue Collin
source

2

J'apprécie votre approche.

— Jono

2

Pour cela, je préfère garder une sémantique HTML correcte, et utiliser un CSS le plus simple possible.

Quelque chose comme ça ferait le travail:

label{
  display: block;
  float: left;
  width : 120px;    
}

Un inconvénient cependant: vous devrez peut-être choisir la bonne largeur d'étiquette pour chaque formulaire, et ce n'est pas facile si vos étiquettes peuvent être dynamiques (étiquettes I18N par exemple).

— Samuel EUSTACHI
source

1

Je suis un grand fan de l'utilisation des listes de définitions.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

Ils sont faciles à styliser à l'aide de CSS et évitent la stigmatisation liée à l'utilisation de tableaux pour la mise en page.

— Andrew
source

Ceci est tout aussi facile à réaliser avec divs (a a ddjuste une marge gauche de ~ 40px), et évite toute confusion sémantique. En outre, aucun de ceux-ci n'aligne les étiquettes / entrées sur la même ligne.

— Hollister

1

en utilisant le CSS

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

cela vous donne quelque chose comme:

           label1 |input box             |
    another label |another input box     |

— Gjaa
source

Vous devez également utiliser clearpour éviter que les formulaires ne s'empilent pour, par exemple, des largeurs moindres

— TheMaster

0

La méthode traditionnelle consiste à utiliser une table.

Exemple:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Cependant, beaucoup diront que les tables sont restrictives et préfèrent CSS. L'avantage d'utiliser CSS est que vous pouvez utiliser divers éléments. À partir des divs, des listes ordonnées et non ordonnées, vous pouvez réaliser la même disposition.

En fin de compte, vous voudrez utiliser ce avec quoi vous êtes le plus à l'aise.

Astuce: les tableaux sont faciles à utiliser.

— Solutions Web OV
source

1

+1 pour avoir déclaré qu'il était facile de démarrer avec ... mais vraiment les développeurs ne devraient recourir qu'aux tables pour les données (voir mon commentaire sur une autre réponse pour une diatribe complète!)

— ClarkeyBoy

1

L'utilisation de tableaux CSS est tout aussi simple et ne présente pas les problèmes d'accessibilité associés. Voir ma réponse ci-dessous.

— Clément

0

Eh bien, pour les bases, vous pouvez essayer de les aligner dans le tableau. Cependant, l'utilisation de table est mauvaise pour la mise en page car la table est destinée au contenu.

Ce que vous pouvez utiliser, ce sont des techniques flottantes CSS.

Code CSS

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Un article élaboré que j'ai écrit peut être trouvé répondant à la question du problème de flotteur IE7 : problèmes de flottement IE7 correct

— Mauris
source

merci pour les exemples, mais le formulaire HTML ne résout toujours pas le problème. Si vous changez le 'prénom' dans l'un d'entre eux en simplement 'nom' par exemple, je me retrouve avec le même problème que j'ai eu la première fois

— yoshyosh

J'ai travaillé avec ça de designers et c'est un peu fragile, IME. Pour cette mise en page de base, ce sera bien 98% du temps. Essayez d'être trop complexe, par exemple une mise en page à deux colonnes ou des étiquettes à plusieurs lignes, et cela devient difficile.

— staticsan

1

@staticsan - si vous comprenez les flottants, les effacements et les divs, vous travaillerez bien avec une telle mise en page et en fait, ils sont rendus plus rapidement et sont plus flexibles par rapport aux tableaux des navigateurs modernes.

— mauris

Eh bien, je pensais comprendre les floats, les clears et les divs, mais je ne pouvais pas étendre la forme qui m'était donnée sans qu'elle se brise. Que ce soit un défaut dans ma compréhension ou dans la mise en œuvre du designer, le fait est resté fragile. (Fait intéressant, la prochaine version sera davantage une conception hybride utilisant des ulbalises.)

— staticsan

0

Je sais que cela a déjà été répondu, mais j'ai trouvé une nouvelle façon de bien les aligner - avec un avantage supplémentaire - voir http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

en gros, vous utilisez l'élément label autour de l'entrée et vous alignez en utilisant cela:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

puis avec css vous alignez simplement:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

vous n'avez pas besoin de br en désordre pour les sauts de ligne - ce qui signifie que vous pouvez rapidement réaliser une mise en page multi-colonnes de manière dynamique
toute la ligne est cliquable. Surtout pour les cases à cocher, c'est une aide précieuse.
Afficher / masquer dynamiquement les lignes de formulaire est facile (il vous suffit de rechercher l'entrée et de masquer son parent -> l'étiquette)
vous pouvez attribuer des classes à l'ensemble de l'étiquette, ce qui permet d'afficher l'entrée d'erreur beaucoup plus clairement (pas seulement autour du champ de saisie)

— Niko
source

Bien, mais nécessite une largeur d'étiquette fixe. Le texte d'une grande étiquette remplace l'entrée.

— mauretto

0

La réponse de Clément est de loin la meilleure. Voici une réponse quelque peu améliorée, montrant différents alignements possibles, y compris les boutons alignés gauche-centre-droite:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Développer l'extrait

J'ai ajouté du rembourrage à droite de toutes les étiquettes ( padding-right:8px) juste pour rendre l'exemple un peu moins horrible, mais cela devrait être fait plus soigneusement dans un vrai projet (ajouter un rembourrage à tous les autres éléments serait également une bonne idée).

— Cyberknight
source

-1

css J'avais l'habitude de résoudre ce problème, similaire à Gjaa mais mieux stylé

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Voici mon HTML, utilisé spécifiquement pour un simple formulaire d'inscription sans code php

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

C'est très simple, et je ne fais que commencer, mais cela a très bien fonctionné

— PA_Commons
source

-1

Insérez des balises d'entrée à l'intérieur d'une liste non ordonnée.Faites le type de style aucun. Voici un exemple.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

A travaillé pour moi!

— Vivek Iyer
source

Cela ne fonctionnerait jamais. ULne ferait qu'indenter le contenu de la marge, ne rien aligner. Mettre les inputs LIajouterait simplement une puce devant eux (oui, ils seraient alignés, sous forme de liste, pas contre les étiquettes). De plus, "Input2" resterait fidèle à l' inputélément précédent , car le LIne sont pas fermés (il n'y en a pas </li>) et il n'y a pas de début <li>pour ce "label", il sera donc traité comme il se doit, texte commun, donc, concaténé au élément précédent. Enfin, le code a une erreur, la fermeture <ul/>devrait être </ul>.

— Cyberknight

-2

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

Dans le CSS, vous devez déclarer à la fois l'étiquette et l'entrée comme display: inline-block et donner la largeur en fonction de vos besoins. J'espère que ceci vous aidera. :)

— kta
source

-4

Ajoutez simplement

<form align="center ></from>

Mettez simplement align dans la balise d'ouverture.

— Zak Gill
source

Cela ne fonctionnerait pas, car il formn'a pas d' alignattribut (et même si c'était le cas, il serait déconseillé d'utiliser style / CSS). De plus, la balise de fermeture est erronée, elle devrait l'être </form>. Il est possible de définir style="text-align:center"à l'intérieur du form, ce qui alignerait tout le contenu du formulaire au centre, mais ce n'est pas le sujet de la question d'origine. Cela n'alignerait jamais les étiquettes sur leurs champs de saisie (oui, j'ai testé sur Firefox 75, juste pour être sûr).

— Cyberknight