Comment aligner les formulaires D'entrée en HTML

la réponse acceptée (définir une largeur explicite en pixels) rend difficile d'effectuer des changements, et casse lorsque vos utilisateurs utilisent une taille de police différente. L'utilisation des tableaux CSS, d'autre part, 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, il suffit d'ajouter text-align: right aux étiquettes: http://jsfiddle.net/DaS39 /

modifier: une note plus rapide: les tableaux CSS vous permettent également de jouer avec des colonnes: par exemple, si vous voulez faire les champs d'entrée prennent autant d'espace que possible, vous pouvez ajouter ce qui suit dans votre forme

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

vous pouvez ajouter white-space: nowrap au labels dans ce cas.

une solution simple pour vous si vous êtes nouveau au HTML, est juste d'utiliser une table 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>

je trouve qu'il est beaucoup plus facile de changer l'affichage des étiquettes en ligne-bloquer et définir une largeur

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

vous devez utiliser une table. Comme une question de structure logique les données tabulaires: c'est pourquoi vous voulez à s'aligner, parce que vous voulez montrer que les étiquettes ne sont pas liées uniquement à leurs zones de saisie, mais aussi les uns avec les autres, dans une structure bidimensionnelle.

[pensez à ce que vous feriez si vous aviez une chaîne de caractères ou des valeurs numériques à afficher au lieu de boîtes de saisie.]

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 l'affaire:

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

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

utilisant css

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

ça donne quelque chose comme:

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

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

ce que vous pouvez utiliser est css techniques flottantes.

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 de IE7 float problem: IE7 float right problems

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

fondamentalement, vous utilisez l'élément d'étiquette autour de l'entrée et alignez en utilisant que:

<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 tout désordre br traîner linebreaks-ce qui signifie que vous pouvez rapidement accomplir une disposition multi-colonne dynamiquement
• toute la ligne est cliquable. Spécialement pour les cases à cocher ceci est une aide énorme.
• afficher/masquer dynamiquement les lignes de formulaire est facile (il suffit de rechercher l'entrée et de cacher son parent -> l'étiquette)
• vous pouvez affecter des classes à l'ensemble de l'étiquette ce qui rend l'entrée d'erreur beaucoup plus claire (pas seulement autour du champ d'entrée)

la méthode traditionnelle consiste à utiliser un tableau.

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 tableaux sont restrictifs et préfèrent CSS. L'avantage d'utiliser CSS est que vous pouvez utiliser divers éléments. De vrd, ordonnées ou désordonnées liste, vous pourriez faire la même mise en page.

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

Indice: les Tables sont faciles à obtenir commencé avec.

je suis un grand fan de l'utilisation des listes de définition.

<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 en utilisant CSS, et ils évitent le stigmate de l'utilisation des tables pour la mise en page.

css j'ai utilisé pour résoudre ce problème, semblable à Gjaa mais de style mieux

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'enregistrement 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 suis seulement au début, mais cela a fonctionné assez bien

insérer les étiquettes d'entrée dans une liste non ordonnée.Faites le style-type none. Voici un exemple.

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

a marché pour moi !

<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-bloquer et donner la largeur selon vos exigences. Espérons que cela vous aidera. :)

je pense que ce serait plus facile si vous utilisiez une table pour structurer votre forme. Peut-être épuisant mais rien de "copier-coller" avec un peu d'édition ne peut pas corriger.

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

, vous pouvez ajouter du rembourrage ou flotter le contenu de la cellule pour le faire paraître plus spacieuse.

il suffit d'ajouter

<form align="center ></from>

il suffit de mettre align dans l'étiquette d'ouverture.