Los últimos tutoriales de desarrollo web
 

Bootstrap Forms

❮ Anterior Siguiente Capítulo ❯

Bootstrap's los ajustes por defecto

Los controles de formulario automáticamente reciben algo más de estilo global con Bootstrap :

Todos los textos de <input> , <textarea> y <select> elementos con class .form-control tienen una anchura de 100%.

Bootstrap diseño del formulario

Bootstrap ofrece tres tipos de diseño del formulario:

  • forma vertical (esto es por defecto)
  • forma horizontal
  • formulario en línea

Disposiciones de referencia para los tres diseños de formulario:

  • Siempre use <form role="form"> (ayuda a mejorar la accesibilidad para las personas que utilizan lectores de pantalla)
  • Envolver las etiquetas y los controles de formulario en <div class="form-group"> (necesaria para la separación óptima)
  • Añadir clase .form-control a todos textual <input> , <textarea> y <select> elementos

Bootstrap Forma Vertical (predeterminado)

En el siguiente ejemplo se crea una forma vertical con dos campos de entrada, una casilla de verificación, y un botón de envío:

Ejemplo

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Inténtalo tú mismo "

Bootstrap formulario en línea

En una forma en línea, todos los elementos están en línea, alineado a la izquierda, y las etiquetas son al lado.

Nota: Esto sólo se aplica a las formas dentro de viewports que son al menos 768px de ancho!

regla adicional para un formulario en línea:

  • Añadir clase .form-inline a la <form> elemento

El siguiente ejemplo crea un formulario en línea con dos campos de entrada, una casilla de verificación, y un botón de confirmación:

Ejemplo

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Inténtalo tú mismo "

Consejo: Si no se incluye una etiqueta para cada entrada, los lectores de pantalla tendrán problemas con sus formas. Puede ocultar las etiquetas de todos los dispositivos, excepto los lectores de pantalla, utilizando el .sr-only clase:

Ejemplo

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Inténtalo tú mismo "

Bootstrap Forma Horizontal

Una forma horizontal se distingue de las otras formas tanto en la cantidad de margen de beneficio, y en la presentación del formulario.

Normas adicionales para una forma horizontal:

  • Añadir clase .form-horizontal a la <form> elemento
  • Añadir clase .control-label a todos los <label> elementos

Consejo: El uso Bootstrap's clases predefinidas de cuadrícula para alinear las etiquetas y los grupos de controles de formulario en una disposición horizontal.

En el siguiente ejemplo se crea una forma horizontal con dos campos de entrada, una casilla de verificación, y un botón de confirmación:

Ejemplo

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
Inténtalo tú mismo "

❮ Anterior Siguiente Capítulo ❯