Cómo alinear formularios de entrada en HTML

La respuesta aceptada (establecer un ancho explícito en píxeles) hace que sea difícil hacer cambios, y se rompe cuando los usuarios utilizan un tamaño de fuente diferente. El uso de tablas CSS, por otro lado, funciona muy 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>

Aquí hay un JSFiddle: http://jsfiddle.net/DaS39/1 /

Y si necesita las etiquetas alineadas a la derecha, simplemente agregue text-align: right a las etiquetas: http://jsfiddle.net/DaS39 /

EDITAR: Una nota rápida más: Las tablas CSS también te permiten jugar con columnas: por ejemplo, si desea que los campos de entrada ocupen tanto espacio como sea posible, puede agregar lo siguiente en su formulario

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

Es posible que desee agregar white-space: nowrap a labels en ese caso.

Una solución simple para ti si eres nuevo en HTML, es usar una tabla para alinear todo.

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

Me resulta mucho más fácil cambiar la visualización de las etiquetas a bloque en línea y establecer un ancho

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

Debe usar una tabla. Como cuestión de estructura lógica los datos son tabulares: es por eso que desea que se alineen, porque desea mostrar que las etiquetas no están relacionadas únicamente con sus cajas de entrada, sino también entre sí, en una estructura bidimensional.

[considere lo que haría si tuviera valores de cadena o numéricos para mostrar en lugar de cuadros de entrada.]

Para esto, prefiero mantener un HTML semántico correcto, y usar un CSS simple como sea posible.

Algo como esto haría el trabajo :

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

Un inconveniente sin embargo : es posible que tenga que elegir el ancho de etiqueta correcto para cada formulario, y esto no es fácil si sus etiquetas pueden ser dinámicas (etiquetas I18N, por ejemplo).

Usando css

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

Esto te da algo como:

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

Bueno, para lo básico puedes intentar alinearlos en la tabla. Sin embargo, el uso de la tabla es malo para el diseño, ya que la tabla está destinada a los contenidos.

Lo que se puede utilizar es CSS técnicas flotantes.

Código 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>

Se puede encontrar un artículo elaborado que escribí respondiendo a la pregunta del problema de flotación IE7: Problemas de derecha de flotación IE7

Sé que esto ya ha sido contestado, pero encontré una nueva manera de alinearlos bien-con un beneficio adicional-ver http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS /

Básicamente se usa el elemento label alrededor de la entrada y se alinea usando eso:

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

Y luego con css simplemente alineas:

label {
    display:block;
    position:relative;
}

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

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

• no necesita ningún desordenado br por ahí para saltos de línea, lo que significa que puede lograr rápidamente un diseño de varias columnas dinámicamente
• toda la línea es capaz de hacer clic. Especialmente para las casillas de verificación, esto es una gran ayuda.
• Mostrar/ocultar dinámicamente las líneas del formulario es fácil (solo busca la entrada y oculta su padre -> la etiqueta)
• puede asignar clases a toda la etiqueta haciendo que muestre la entrada de error mucho más clara (no solo alrededor del campo de entrada)

El método tradicional es usar una tabla.

Ejemplo:

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

Sin embargo, muchos argumentarían que las tablas son restrictivas y prefieren CSS. El beneficio de usar CSS es que puede usar varios elementos. Desde la lista divs, ordenada y no ordenada, puede lograr el mismo diseño.

Al final, querrás usar lo que te resulte más cómodo.

Sugerencia: Es fácil comenzar con las tablas.

Soy un gran fan del uso de listas de definición.

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

Son fáciles de diseñar usando CSS, y evitan el estigma de usar tablas para el diseño.

Css que utilicé para resolver este problema, similar a Gjaa pero con un estilo mejor

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

Aquí está mi HTML, usado específicamente para un formulario de registro simple sin código 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>

Es muy simple, y apenas estoy empezando, pero funcionó bastante bien

Inserte etiquetas de entrada dentro de una lista desordenada.Haz que el tipo de estilo no sea ninguno. He aquí un ejemplo.

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

Funcionó para mí !

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

En el CSS tienes que declarar tanto label como input como display: inline-block y dar ancho de acuerdo a tus requerimientos. Espero que esto te ayude. :)

Creo que sería más fácil si utilizaras una tabla para estructurar tu formulario. Puede ser agotador, pero nada de 'copiar y pegar' con un poco de edición no puede arreglarse.

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

Puede agregar un poco de relleno o flotar el contenido de la celda para que se vea más espacioso.

Simplemente agregue

<form align="center ></from>

Simplemente coloque alinear en la etiqueta de apertura.