Formularios de arranque
Configuración predeterminada de Bootstrap
Los controles de formulario reciben automáticamente un estilo global con Bootstrap:
Todos los elementos textuales <input>, <textarea>y
<select>con clase .form-controltienen un ancho del 100 %.
Diseños de formulario Bootstrap
Bootstrap proporciona tres tipos de diseños de formulario:
- Forma vertical (esta es la predeterminada)
- forma horizontal
- formulario en línea
Reglas estándar para los tres diseños de formulario:
- Envuelva las etiquetas y los controles de formulario
<div class="form-group">(necesario para un espacio óptimo) - Agregar clase a todos los elementos
.form-controltextuales<input>,<textarea>y<select>
Formulario vertical Bootstrap (predeterminado)
El siguiente ejemplo crea un formulario vertical con dos campos de entrada, una casilla de verificación y un botón de envío:
Ejemplo
<form action="/action_page.php">
<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>
Formulario en línea Bootstrap
En un formulario en línea, todos los elementos están en línea, alineados a la izquierda y las etiquetas están al lado.
Nota: ¡Esto solo se aplica a los formularios dentro de las ventanas gráficas que tienen al menos 768 px de ancho!
Regla adicional para un formulario en línea:
- Agregar clase
.form-inlineal<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 envío:
Ejemplo
<form class="form-inline" action="/action_page.php">
<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>
Sugerencia: si no incluye una etiqueta para cada entrada, los lectores de pantalla tendrán problemas con sus formularios. Puede ocultar las etiquetas para todos los dispositivos, excepto los lectores de pantalla, utilizando la
.sr-onlyclase:
Ejemplo
<form class="form-inline" action="/action_page.php">
<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>
Forma horizontal de arranque
Un formulario horizontal significa que las etiquetas están alineadas junto al campo de entrada (horizontal) en pantallas grandes y medianas. En pantallas pequeñas (767 px e inferiores), se transformará en una forma vertical (las etiquetas se colocan encima de cada entrada).
Reglas adicionales para una forma horizontal:
- Agregar clase
.form-horizontalal<form>elemento - Agregar clase
.control-labela todos los<label>elementos
Sugerencia: use las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal.
El siguiente ejemplo crea un formulario horizontal con dos campos de entrada, una casilla de verificación y un botón de envío.
Ejemplo
<form class="form-horizontal" action="/action_page.php">
<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>