¿Cómo hacer que <etiqueta> y <input> aparezcan en la misma línea en un formulario HTML?

94

Estoy creando un formulario de registro para un sitio web. Quiero que cada etiqueta y su elemento de entrada correspondiente aparezcan en la misma línea.

Aquí está mi código:

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}
<div id="form">

 <form action="" method="post" name="registration" class="register">
  
  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />
   
   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div>
Expandir fragmento

html css forms luchxo
fuente
Me gusta más que esta respuesta no consiguió downvoted porque usted ha dicho que no quiere tratar y error;)
Anna Klein

Respuestas:

72

Suponiendo que desee hacer flotar los elementos, también tendría que hacer flotar los labelelementos.

Algo como esto funcionaría:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

Mostrar fragmento de código

Alternativamente, un enfoque más común sería envolver los elementos input/ labelen grupos:

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

Mostrar fragmento de código

Tenga en cuenta que el foratributo debe corresponder al idde un elemento etiquetable, no a su name. Esto permitirá a los usuarios hacer clic en labelpara enfocar el elemento de formulario correspondiente.

Josh Crozier
fuente
1
¡Gracias! esto es exactamente lo que quería lograr. Ambos métodos funcionan bien para mí. Tengo 1 pregunta, en el CSS, ¿por qué alineo el texto del formulario div al centro y luego alineo las etiquetas a la derecha? si no alineo al centro el formulario div, ¿estropea mi código?
luchxo
Buena respuesta, especialmente clear: both;cuya mención ayudó a mi caso.
Sirar Salih
33

Descubrí que el "display:flex"estilo es una buena manera de hacer que estos elementos estén en la misma línea. No importa qué tipo de elemento en el div. Especialmente si la clase de entrada es control de formulario, otras soluciones como bootstrap, inline-block no funcionarán bien.

Ejemplo:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

Más detalles sobre la pantalla: flex:

dirección flexible: fila, columna

justificar-contenido: flex-end, center, space-between, space-around

alinear-elementos: estirar, flex-start, flex-end, center

facebook-100006652272506
fuente
no sabía de la existencia de flex
Espoir Murhabazi
18

aaa ## HTML Le sugiero que los envuelva en un div, ya que probablemente terminará flotando en ciertos contextos.

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

Luego, dentro de ese div, puede hacer cada pieza inline-blockpara que pueda usarla vertical-alignpara centrarla, o establecer una línea de base, etc. (sus etiquetas y entradas pueden cambiar de tamaño en el futuro ...

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

ACTUALIZACIÓN: mediados de 2016 + con consultas de medios móviles primero y flex-box

Así es como hago las cosas estos días.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

Sheriffderek
fuente
¿Tengo que envolver cada etiqueta y su elemento correspondiente en un div diferente? o simplemente
incluyo
Envuelvo un lapso para la 'etiqueta' y una entrada, en el <label>elemento ahora en días.
Sheriffderek
5

Lo que te faltaba era el flotador: izquierda; aquí hay un ejemplo recién hecho en HTML

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

La forma más eficiente de hacer esto es agregar una clase a las etiquetas y establecer el float: left; a la clase en CSS

Provisión
fuente
4

Además de usar flotadores, como han sugerido otros, también puede confiar en un marco como Bootstrap donde puede usar la clase "forma horizontal" para tener la etiqueta y la entrada en la misma línea.

Si no está familiarizado con Bootstrap, deberá incluir:

  • el enlace al CSS Bootstrap (el enlace superior donde dice <- CSS compilado y minificado más reciente ->) , en el encabezado, además de agregar algunos divs:
  • div class = "formulario-grupo"
  • div class = "col -..."
  • junto con class = "col-sm-2 control-label" en cada etiqueta, como muestra Bootstrap, que incluí a continuación.
  • También reformateé su botón para que sea compatible con Bootstrap.
  • y agregó una leyenda, a su cuadro de formulario, ya que estaba usando un conjunto de campos.

Es muy sencillo y no tendría que meterse con flotantes o una tonelada de CSS para formatear, como se enumeró anteriormente.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

Padawan
fuente
3

Para Bootstrap 4 se podría hacer con class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
Grigory Kislin
fuente
3

Estoy usando Angular 6 con Bootstrap 4 y encuentro que esta forma funciona:

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>
W Kenny
fuente
1
Simple y eficaz.
caram
2

He hecho esto de varias maneras diferentes, pero la única forma que he encontrado que mantiene las etiquetas y los datos de entrada / texto correspondientes en la misma línea y siempre se ajusta perfectamente al ancho del padre es usar display: inline table.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>
Tom Berthold
fuente
De todas las respuestas anteriores, usar display: inline-table como sugirió funcionó para mí, sin tener que envolver mi etiqueta y cuadro de entrada en un div.
coder101
2

Envuelva la etiqueta y la entrada dentro de un div bootstraps 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
Jay Wright
fuente
2

Esto funciona bien Puso el botón de radio o la casilla de verificación con la etiqueta en la misma línea sin ningún CSS. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Karan Goyal
fuente
1

Mostrar fragmento de código

usuario7119463
fuente
-2

Otra opción es colocar una tabla dentro del formulario. (ver más abajo) Sé que algunas personas desaprueban las tablas, pero creo que funcionan bien cuando se trata de diseños de formularios receptivos.

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>
jaque mate711
fuente
2
Las tablas no deben usarse para el diseño.
Michał Perłakowski
2
1) Me duele todo en mayúsculas. 2) Las tablas, como dijo @Gothdo, no deben usarse en el diseño, solo deben usarse en datos tabulares goo.gl/V9dRtp
Padawan