Comment aligner des formes d'entrée dans le HTML

Question

Comment aligner des formes d'entrée dans le HTML

Demandé el 30 de Novembre, 2010: Quand la question a-t-elle été
110785 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis nouveau sur le HTML et je suis en train d'apprendre à utiliser les formes.

Le plus gros problème, je suis tellement loin dans l'harmonisation de la formes. Voici un exemple de mon fichier HTML:

<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, le champ de la boîte après "e-Mail" est radicalement différente en termes d'espacement par rapport au premier, et le dernier nom. Quelle est la "bonne" façon de faire en sorte qu'ils "line-up" essentiellement?

Je suis en train de pratiquer la bonne forme et la syntaxe...beaucoup de gens pourraient le faire avec CSS je ne suis pas sûr, j'ai seulement appris les rudiments du HTML jusqu'à présent.

Demandé el 30 de Novembre, 2010 par yoshyosh

Answer 1

5 Réponses

Answer 2

174voto

Clément Points 1439

La accepté de répondre (la définition explicite d'une largeur en pixels) ce qui rend difficile de faire des changements, et des pauses lorsque vos utilisateurs d'utiliser une taille de police différente. À l'aide de CSS tables, d'autre part, fonctionne très bien:

CSS

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

HTML

<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 d'étiquettes alignées à droite, il suffit d'ajouter text-align: right pour les étiquettes: http://jsfiddle.net/DaS39/

Répondu el 19 de Mai, 2014 par Clément (1439 Points )

Answer 3

66voto

serialk Points 457

Un autre exemple, celui-ci utilise le CSS, j'ai simplement mis le formulaire dans une div avec la classe de conteneur. Et précisé que les entrées des éléments contenus à l'intérieur sont à 100% de la largeur du conteneur et ne pas avoir tous les éléments sur chaque côté.

<html>
<head>
    <title>Example form</title>
    <style type="text/css">
    .container {
        width: 500px;
        clear: both;
    }
    .container input {
        width: 100%;
        clear: both;
    }

    </style>
</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>

Répondu el 30 de Novembre, 2010 par serialk (457 Points )

Answer 4

50voto

amonett Points 162

Une solution simple pour vous si vous êtes nouveau à l'HTML, c'est juste pour utiliser un tableau à la ligne tout en place.

<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>

Répondu el 30 de Novembre, 2010 par amonett (162 Points )

Answer 5

22voto

Byron Points 70

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

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

Répondu el 8 de Août, 2013 par Byron (70 Points )

Answer 6

9voto

Collin Street Points 79

Il faut utiliser un tableau. Comme une question de structure logique des 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.

[considérez ce que vous feriez si vous aviez la chaîne ou des valeurs numériques à afficher à la place de zones d'entrée.]

Répondu el 12 de Avril, 2013 par Collin Street (79 Points )

Comment aligner des formes d'entrée dans le HTML

Réponses

CSS

HTML

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment aligner des formes d'entrée dans le HTML

Réponses

CSS

HTML

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: