Cómo alinear formularios de entrada en HTML

117

Soy nuevo en HTML y estoy tratando de aprender a usar formularios.

El mayor problema que tengo hasta ahora es alinear los formularios. Aquí hay un ejemplo de mi archivo HTML actual:

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

El problema con esto es que el cuadro de campo después de 'Correo electrónico' es drásticamente diferente en términos de espacio en comparación con el nombre y apellido. ¿Cuál es la forma "correcta" de hacer que se "alineen" esencialmente?

Estoy tratando de practicar una buena forma y sintaxis ... mucha gente podría hacer esto con CSS. No estoy seguro, solo he aprendido los conceptos básicos de HTML hasta ahora.

html forms alignment

— yoshyosh
fuente

hay una lucha constante entre las tablas cuando (si es que hay alguna), las respuestas a su pregunta no son la excepción, la costura del punto medio es que <tablas> es para datos tabulares, vea más aquí: stackoverflow.com/questions/83073 /…

— Trufa

Exactamente la misma pregunta, pero la respuesta sugiere usar la etiqueta <table> con la cita de W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Otro ejemplo, esto usa CSS, simplemente puse el formulario en un div con la clase contenedora. Y especificó que los elementos de entrada contenidos dentro deben ser el 100% del ancho del contenedor y no tener ningún elemento en ninguno de los lados.

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

Expandir fragmento

— serialk
fuente

2

Perfecto, me salvó mucho de perder el tiempo.

— null

También está expandiendo mi botón "enviar" al ancho del contenedor.

— Saurabh Rana

4

Esta solución no parece funcionar. Los elementos de entrada no están alineados a la izquierda. La siguiente solución de tabla funciona.

— johny why

1

No soy un gran fanático de establecer un ancho explícito, cuando puede prescindir de uno (vea mi respuesta a continuación)

— Clément

1

Esto da resultados extraños con botones de radio. La etiqueta del botón de opción muestra la línea después del botón de opción real.

— wordsforthewise

134

La respuesta aceptada (establecer un ancho explícito en píxeles) dificulta la realización de cambios y se interrumpe cuando los usuarios usan 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>

Expandir fragmento

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

Y si necesita las etiquetas alineadas a la derecha, simplemente agréguelas text-align: righta las etiquetas: http://jsfiddle.net/DaS39/

EDITAR: Una nota más rápida: las tablas CSS también le permiten jugar con columnas: por ejemplo, si desea que los campos de entrada ocupen el mayor espacio 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: nowrapal labelsen ese caso.

— Clemente
fuente

4

Me gusta esta solucion Significa que no tengo que preocuparme de que mis columnas cambien inevitablemente de ancho a medida que la página evoluciona a través del desarrollo. +1

— Tom Lord

9

@MuhammadUmer Porque las tablas confundirán a los lectores de pantalla y a muchos dispositivos de asistencia, mientras que las tablas CSS separan la presentación y el contenido. Por lo tanto, un lector de pantalla o un asistente de lectura puede analizar fácilmente su formulario y, sin embargo, se muestra bien.

— Clément

3

Bueno, encajar la etiqueta en td sugiere que es parte de datos tabulares organizados, como gráficos; ese no es el caso aquí. Además, el uso de tablas HTML hace que sea más difícil cambiar el diseño en el futuro o adaptarlo a varios tamaños de pantalla (piense en teléfonos móviles y tabletas).

— Clément

4

¡He estado resistiendo fuertemente la estructura de la tabla CSS con el mismo argumento que estaba haciendo @MuhammadUmer, hasta hoy! ¡Me derrumbé y decidí probarlo y finalmente ver el valor de cambiar! Además, es CSS, por lo que facilita las cosas a largo plazo

— BillyNair

2

¿Cómo puede abarcar columnas con esta solución? Para centrar la alineación botón enviar.

— eugenekr

31

Una solución simple para usted si es 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>

— amonett
fuente

43

Solución rápida y sencilla. Deje los debates religiosos de CSS para la pausa del almuerzo y haga el trabajo.

— Emmanuel Bourg

3

@ClarkeyBoy - ¿a quién le importa mientras esté haciendo el trabajo?

— SolidSnake

1

@ClarkeyBoy - ¿el comentario más ignorante? lol .. No quiero tener una discusión contigo aquí .. si quieres hacerlo de la manera divs, hazlo. si quieres hacerlo, las tablas dependen de ti. pero no asuma que a todos los clientes o personas les importará eso. la mayoría de ellos se preocupan por hacer el trabajo ..

— SolidSnake

2

@ClarkeyBoy: lea esta respuesta y la publicación de W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: ¿No es esto precisamente para lo que están diseñadas las tablas CSS? ¿Conseguir un diseño similar a una tabla sin confundir a los lectores de pantalla? El diseño que solicita el OP es bastante fácil de lograr usando tablas CSS (ver más abajo )

— Clément

17

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

— Byron
fuente

9

Deberías usar una mesa. Por una cuestión de estructura lógica, los datos son tabulares: por eso quiere que se alineen, porque quiere mostrar que las etiquetas no están relacionadas únicamente con sus cuadros de entrada, sino también entre sí, en una estructura bidimensional.

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

— Calle Collin
fuente

2

Agradezco tu acercamiento.

— Jono

2

Para esto, prefiero mantener una semántica HTML correcta y usar un CSS lo más simple posible.

Algo como esto haría el trabajo:

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

Sin embargo, hay una desventaja: es posible que deba 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).

— Samuel EUSTACHI
fuente

1

Soy un gran fanático del uso de listas de definiciones.

<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 con CSS y evitan el estigma de usar tablas para el diseño.

— Andrés
fuente

Esto se logra con la misma facilidad con divs (a ddsolo tiene un margen izquierdo de ~ 40px) y evita cualquier confusión semántica. Además, ninguno de estos alinea las etiquetas / entradas en la misma línea.

— Hollister

1

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     |

— Gjaa
fuente

También debe usar clearpara evitar que los formularios se apilen para, por ejemplo, anchos menores

— TheMaster

0

El método tradicional es utilizar una mesa.

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 dirían que las tablas son restrictivas y prefieren CSS. El beneficio de usar CSS es que puede usar varios elementos. Desde divs, lista ordenada y no ordenada, puede lograr el mismo diseño.

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

Sugerencia: es fácil comenzar con las tablas.

— Soluciones Web OV
fuente

1

+1 por afirmar que es fácil comenzar con ellos ... pero realmente los desarrolladores solo deberían recurrir a tablas para obtener datos (¡vea mi comentario sobre otra respuesta para una perorata completa!)

— ClarkeyBoy

1

Usar tablas CSS es igual de fácil y no tiene los problemas de accesibilidad asociados. Vea mi respuesta a continuación.

— Clément

0

Bueno, para los conceptos básicos, puede 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 puede utilizar son técnicas flotantes CSS.

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 de IE7: problemas de flotación correcta de IE7

— mauris
fuente

gracias por los ejemplos, sin embargo, el formulario HTML todavía no resuelve el problema. Si cambia 'Nombre' en uno de ellos a solo 'Nombre', por ejemplo, termino con el mismo problema que tuve la primera vez

— yoshyosh

He trabajado con esto de los diseñadores y es un poco frágil, IME. Para este diseño básico, estará bien el 98% del tiempo. Intente volverse demasiado complejo, por ejemplo, diseño de dos columnas o etiquetas de varias líneas, y se vuelve difícil.

— Estadística

1

@staticsan: si comprende flotantes, borradores y divs, funcionará bien con dicho diseño y, de hecho, se procesan más rápido y son más flexibles en comparación con las tablas en los navegadores modernos.

— mauris

Bueno, pensé que entendía los flotadores, los claros y los divs, pero no podía extender la forma que me dieron sin que se rompiera. Ya sea por una falla en mi comprensión o por la implementación del diseñador, el hecho es que era frágil. (Curiosamente, la próxima versión va a tener un diseño más híbrido usando uletiquetas.)

— staticsan

0

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

básicamente, usa el elemento de etiqueta alrededor de la entrada y 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 alinea:

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 br desordenado para los saltos de línea, lo que significa que puede lograr rápidamente un diseño de varias columnas de forma dinámica
se puede hacer clic en toda la línea. Especialmente para las casillas de verificación, esto es de gran ayuda.
Mostrar / ocultar dinámicamente las líneas de formulario es fácil (solo busca la entrada y oculta su padre -> la etiqueta)
puede asignar clases a toda la etiqueta para que muestre la entrada de error mucho más clara (no solo alrededor del campo de entrada)

— Niko
fuente

Agradable, pero necesita un ancho de etiqueta fijo. El texto de la etiqueta grande anula la entrada.

— mauretto

0

La respuesta de Clément es, con mucho, la mejor. Aquí hay una respuesta algo mejorada, que muestra diferentes alineaciones posibles, incluidos los botones alineados izquierda-centro-derecha:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Expandir fragmento

Agregué algo de relleno a la derecha de todas las etiquetas ( padding-right:8px) solo para hacer que el ejemplo parezca menos horrible, pero eso debería hacerse con más cuidado en un proyecto real (agregar relleno a todos los demás elementos también sería una buena idea).

— Cyberknight
fuente

-1

css que solía resolver este problema, similar a Gjaa pero con un mejor estilo

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 comenzando, pero funcionó bastante bien.

— PA_Commons
fuente

-1

Inserte etiquetas de entrada dentro de una lista desordenada. Haga el tipo de estilo none. He aquí un ejemplo.

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

Trabajó para mi !

— Vivek Iyer
fuente

Esto nunca funcionaría. ULsimplemente sangraría el contenido fuera del margen, no alinearía nada. Poner las inputs LIsolo agregaría una viñeta antes de ellos (sí, estarían alineados, como una lista, no contra las etiquetas). Además, "Input2" se adheriría al inputelemento anterior , porque LIno están cerrados (no hay </li>) y no hay un comienzo <li>para esa "etiqueta", por lo que se tratará como debería, texto común, por lo tanto, concatenado al elemento anterior. Por último, el código tiene un error, el cierre <ul/>debería ser </ul>.

— Cyberknight

-2

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

En el CSS, debe declarar tanto la etiqueta como la entrada como display: inline-block y dar ancho de acuerdo con sus requisitos. Espero que esto te ayudará. :)

— kta
fuente

-4

Simplemente agregue

<form align="center ></from>

Simplemente coloque alinear en la etiqueta de apertura.

— Zak Gill
fuente

Esto no funcionaría, ya formque no tiene alignatributo (e incluso si lo tuviera, estaría obsoleto para el uso de estilo / CSS). Además, la etiqueta de cierre es incorrecta, debería serlo </form>. Es posible definir style="text-align:center"dentro de form, qué alinearía todo el contenido del formulario en el centro, pero no se trataba de eso en la pregunta original. Esto nunca alinearía las etiquetas con sus campos de entrada (sí, probé en Firefox 75, solo para estar seguro).

— Cyberknight