Formulario en línea dentro de un formulario horizontal en Twitter Bootstrap?

200

¿Cuál es la mejor manera de diseñar un formulario que se vea así (consulte el enlace a continuación) en Twitter Bootstrap sin clases caseras?

¿Es posible establecer una forma interna en línea dentro de una forma horizontal como en el siguiente ejemplo:

captura de pantalla del objetivo de la IU

html forms twitter-bootstrap Frntz
fuente

Respuestas:

317

No anides <form>etiquetas, eso no funcionará. Solo usa las clases Bootstrap.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

Puede lograr ese comportamiento de muchas maneras, eso es solo un ejemplo. Pruébalo en estoPruébalo bootply

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Tenga en cuenta que estoy usando .form-inlinepara obtener el estilo propio dentro de a .controls.
Puedes probarlo en este jsfiddle

albertedevigo
fuente
3
También puede agregar las clases de formulario en divs, en mi caso utilicé la clase de formulario vertical en un span6 div y una clase de formulario horizontal en un span12 div
Iftah
3
Esto funciona para bootstrap2. Para bootstrap 3 visite: stackoverflow.com/questions/18429121/…
Tomislav Muic
1
En bootstrap 3, si hay un espacio debajo de la entrada, elimine "form-group". Agrega un espacio de 15px en la parte inferior de cada div con el que lo usa.
darkzangel
No necesita mezclar formulario-grupo con fila en el ejemplo Clave + Valor. @ rap-2-h: puede copiar y pegar el código de ejemplo y hacer clic en Ejecutar.
Sebastian
Esto funciona, pero pude simplificarlo en la versión actual de Bootstrap 3 ... Parece clave para esta solución simplemente poner cualquier control de entrada dentro de un div, de lo contrario el diseño de la cuadrícula col-xx no funciona. No era necesario anidar el grupo de formularios, el padre col-xx- # puede compartir el mismo div y no hay necesidad de la clase "fila" ya que el formulario padre ya es un formulario horizontal (100%).
Tony Wall
92

Para Bootstrap 3, el ejemplo anterior funciona pero es demasiado complicado, en lugar de usar form-group use form-inline para los campos que desea en línea.

P.ej:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
Ryan Knell
fuente
Es posible que no funcione para usted debido a la clase de control de formulario que establece "display: block". Si lo anula a "display: inline-block", debería funcionar.
Cédric Guillemette
1
Esto no está funcionando. Intente hacer lo que le pregunta la pregunta, esto no es posible con el formulario en línea.
Sebastian
El único problema con esto es que la subárea no se expande a todo el ancho y cualquier intento de usar el tamaño de la cuadrícula se aplastará en relación con el ancho de contenido mínimo requerido. La otra solución es mejor sin tantos divs (vea mi comentario allí).
Tony Wall
3
Debe ajustar todos los grupos de formularios en la clase de formulario en línea
ymakux
jsfiddle.net/9637fywb Esto no parece actuar como se desea, utilizando la última CDN de arranque actual (3.3.5). Este ejemplo tampoco tiene en cuenta dos etiquetas dentro de la sección "en línea". Quizás al violín le falta algún tipo de envoltorio, pero parece que debería incluirse en la respuesta, si es así.
Emragins
14

Esto usa twitter bootstrap 3.x con una clase css para que las etiquetas se asienten sobre las entradas. Aquí hay un enlace de violín , asegúrese de expandir el panel de resultados lo suficientemente ancho para ver el efecto.

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

CSS:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Ácido de batería
fuente
2

Ya que bootstrap 4 usa div class = "form-row" en combinación con div class = "form-group col-X". X es el ancho que necesitas. Obtendrá buenas columnas en línea. Ver violín .

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>
Enrique
fuente
1

Sé que esta es una respuesta antigua, pero esto es lo que suelo hacer:

CSS:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

Luego, ajuste los campos que desea incluir en un div y agregue .form-control-inline a la entrada, por ejemplo:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
Jesus Gomez
fuente
1

para hacerlo simple, solo agregue un class="form-inline" antes de la entrada.

ejemplo: 

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>
curiosidad
fuente