Création de formulaire ont des champs et le texte en regard les uns des autres - qu'est-ce que la sémantique façon de le faire?

Je veux créer un formulaire donc il y a du texte sur le côté gauche et les entrées sur le droit, actuellement je suis en train de faire

<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>

<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>

Et le CSS

input[type=text] {
    height: 14px;
}

#labels {
    float: left;
}

#inputs {
    float: right;
}

li {
    padding-top: 4px;
    padding-left: 10px;
}

//Text size is 14px

Ce qui se passe est que le texte et les champs ne sont pas parfaitement alignés (les entrées obtenir progressivement plus faibles comme je l'ai ajouter des éléments). Je pense c'est parce que toutes les entrées peuvent être 14px (j'utilise des listes déroulantes, des cases à cocher, les radios, etc.).

Quelle serait la bonne façon de créer cette? Je connais un tableau serait résoudre le problème, mais c'est que de la sémantique?

  • Attendez, quoi? Vous ne voulez pas utiliser un tableau, parce que cela serait "sémantique", mais vous êtes à l'aide de listes? Pourquoi? Vous n'avez pas de soins pour les listes? Vous comme d'abuser d'eux?
InformationsquelleAutor Ayub | 2012-01-08
  1. 6

    Ce genre de question a été posée plusieurs fois ici, vous pouvez faire une recherche simple et de trouver de nombreuses solutions.

    Mais ici, c'est un formulaire simple pour vous aider à démarrer:

    HTML

    <form>
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Company</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="nselect">Dropdown Menu</label>
<div class="input">
<select name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="line">
<label for="input">Text 1</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 2</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 3</label>
<div class="input">
<input type="text" size="15" name="input">
</div>
</div>
</form>

    CSS

    form {
margin:10px 0;
}
label {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 6px;
text-align: right;
width: 130px;
}
label, input, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
input, textarea, select {
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
color: #808080;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
select {
height: 27px;
line-height: 27px;
}
form .input {
margin-left: 150px;
}
form .line {
margin-bottom: 18px;
}

    Voici une démo: http://jsfiddle.net/5aduZ/1/

    Beaucoup de gens ne seront pas d'accord avec mon utilisation de divs pour séparer les éléments de formulaire, mais par le biais de tests, j'ai trouvé ce format la plus sûre et la meilleure façon d'aller à ce sujet car il sépare les champs proprement, et il fonctionne très bien sous IE. De Plus, c'est le format utilisé par les grands garçons (facebook, twitter, google).

    • Les seuls petits bémol que j'ai est de donner l'emballage div une classe de "ligne", ce qui semble présentation-ish. Les champs eux-mêmes peuvent tous être sur la même ligne, par exemple. Pour cette raison, j'ai l'habitude d'appeler l'emballage div quelque chose comme "fieldWrapper".
    • Yup, c'est ok, je ne l'utilise que cause son simple souvenir 😀 ..je ne suis pas très créative 🙁
    InformationsquelleAutor Andres Ilich
  2. 3

    Il fait sens pour l'étiquette à côté de l'entrée dans le HTML, c'est plus facile à lire et plus facile à gérer. Typique HTML pour la ce serait:

    <div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>

    Et CSS serait:

    label, input {
float:left;
}
input {
font-size:14px;
padding: 2px; //instead of using fixed height
}
label {
width: 100px; //can use JavaScript if it needs to be dynamic
padding-top: 3px; //to make the label vertically inline with the input element
}
.fieldWrapper {
clear:left;
}
    InformationsquelleAutor Dan Blows
  3. 0

    Si vraiment vous ne pouvez pas modifier votre code HTML, vous pouvez créer une CSS height sur le <li> balise pour résoudre le problème d'alignement. Mais je fortement vous recommandons de choisir l'une ou l'autre des solutions proposées, parce que votre code HTML est très difficile à lire dans son état actuel. Et vous devez utiliser le <label> tag.

    InformationsquelleAutor Baldrick
  4. 0

    Écrire ce <input type="text" name="firstname" /> et régler la hauteur de la largeur et de rembourrage

    InformationsquelleAutor
  5. 0

    Dans mon entreprise, le chemin du retour quand nous avons commencé notre première application web en 2001, nous avons utilisé une table.

    <table class="formTable">
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td><label>E-mail:/label></td>
<td><input type="text" name="email" /></td>
</tr>
</tbody>
</table>

    Et bien que cela fonctionne, du point de vue philosophique, je n'aime pas l'approche, car autant que je suis concerné, un tableau doit tenir table-isée de données.

    Vous pouvez utiliser le CSS et DIV, ainsi:

    <style>
.formLabel, .formInput {
display:inline-block;   
}
</style>
<div class="formField">
<div class="formLabel"><label>Name:</label></div>
<div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
<div class="formLabel"><label>E-Mail:</label></div>
<div class="formInput"><input type="text" name="email" /></div>
</div>

    Voir ici: http://jsfiddle.net/9P7pg/

    Ou, vous pouvez éviter l'utilisation de div à l'ensemble, et il suffit d'appliquer la display: inline-block pour chaque label et input (ou de l'utilisation des classes). Mais alors vous aurez également à vous rappeler d'utiliser un espace insécable pour retours entre l'étiquette-combinaison de champs.

    InformationsquelleAutor scott.korin
  6. -1

    il y a une liste spéciale pour cela! il est appelé liste de définitions (dl) et est composé de définition des termes et des définitions les définitions (dt/dd). j'ai l'habitude de mettre le texte dans la dt et la boîte de saisie de la dd. comme ceci:

    <form action="bla">
<dl>
<dt>Name*</dt>
<dd><input type="text" name="name" />
<dt>Email</dt>
<dd><input type="text" name="email" />
</dl>
<p><input type="submit" /></p>
</form>
    • Je ne l'aime pas pour la raison indiquée sur @Jan réponse. Elle manque de souplesse, et il est sémantiquement incorrect. Si vous avez besoin d'insérer un paragraphe dans le milieu de la forme, par exemple, comment faites-vous cela? Ce sujet quand vous avez des "trucs" qui est associée avec des entrées - où vont-ils? Aussi, ce sujet quand vous avez un fieldset? Vous ne pouvez pas mettre un <fieldset≥ directement en tant qu'enfant d'un <DL>, si vous vous retrouvez avec compliqué de nidification. Sémantiquement, ce n'est pas une liste de définition, et par programmation, c'est plus compliqué.
    InformationsquelleAutor davogotland