web-dev-qa-db-fra.com

Comment aligner des formulaires de saisie en HTML

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

Le plus gros problème que je rencontre 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 ceci 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 de famille. Quelle est la "bonne" façon de faire en sorte qu'ils s'alignent essentiellement?

J'essaie de pratiquer la bonne forme et la 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.

htmlformsalignment
105
yoshyosh

Un autre exemple, celui-ci utilise CSS, je mets simplement le formulaire dans un div avec la classe conteneur. Et a précisé que les éléments d'entrée contenus dans doivent contenir 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>
55
serialk

La réponse acceptée (définir une largeur explicite en pixels) rend les modifications difficiles à effectuer et se brise lorsque vos utilisateurs utilisent une taille de police différente. En revanche, utiliser des tables CSS 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>

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

Et si vous avez besoin des étiquettes alignées à droite, ajoutez simplement text-align: right aux étiquettes: http://jsfiddle.net/DaS39/

EDIT: Une dernière remarque rapide: les tableaux CSS vous permettent également de jouer avec les colonnes: par exemple, si vous souhaitez que les champs de saisie occupent le plus d’espace possible, vous pouvez ajouter les éléments suivants dans votre formulaire.

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

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

119
Clément

Si vous débutez en HTML, une solution simple 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>
27
amonett

Je trouve qu'il est beaucoup plus facile de changer l'affichage des étiquettes en inline-block et de définir une largeur

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

Vous devriez utiliser une table. En tant que structure logique, les données sont tabulaires: c’est pourquoi vous souhaitez les aligner, car vous souhaitez montrer que les étiquettes ne sont pas liées uniquement à leurs zones de saisie, mais également les unes aux autres, une structure à deux dimensions.

[Réfléchissez à ce que vous feriez si vous aviez des chaînes ou des valeurs numériques à afficher à la place des zones de saisie.]

6
Collin Street

Pour cela, je préfère garder une sémantique HTML correcte et utiliser un CSS aussi simple que 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, ce qui n’est pas facile si vos étiquettes peuvent être dynamiques (étiquettes I18N par exemple).

3
Samuel EUSTACHI

en utilisant 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     |
2
Gjaa

Je sais que cela a déjà été répondu, mais j'ai trouvé une nouvelle façon de les aligner correctement - 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 l'alignez en utilisant:

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

et 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 brouillage compliqué pour les sauts de ligne - ce qui signifie que vous pouvez rapidement réaliser une mise en page multicolonne de manière dynamique
  • toute la ligne est cliquable. Ceci est particulièrement utile pour les cases à cocher.
  • Afficher/masquer de manière dynamique les lignes de formulaire est simple (il suffit de rechercher l'entrée et de masquer son parent -> l'étiquette)
  • vous pouvez attribuer des classes à l'intégralité de l'étiquette, ce qui permet d'afficher l'erreur de saisie beaucoup plus clairement (pas seulement autour du champ de saisie)
1
Niko

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 d'avoir à utiliser des tableaux pour la mise en page.

1
Andrew

Bien pour les bases, vous pouvez essayer de les aligner dans le tableau. Cependant, l'utilisation de tableau est mauvaise pour la mise en page car tableau est destiné 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>

On peut trouver un article élaboré que j'ai écrit et qui répond à la question du problème de flottement dans IE7: problèmes de flottant dans IE7

1
mauris

Insérez des balises d’entrée dans des listes non ordonnées. Définissez le type de style none. Voici un exemple.

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

Travaillé pour moi!

0
Vivek Iyer

css j'ai l'habitude de résoudre ce problème, semblable à 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 code 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 fonctionné assez bien

0
PA_Commons

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 soutiendraient 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 classées, vous pouvez réaliser la même présentation.

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

Astuce: Les tables sont faciles à utiliser.

0
OV Web Solutions