Formularios de control soportados
Bootstrap soporta los siguientes formularios de control:
- input
- textarea
- checkbox
- radio
- select
<input>
Bootstrap soporta todos los tipos de <input> que podemos encontrar bajo el estándar HTML5:
- text
- password
- datetime
- datetime-local
- date
- month
- time
- week
- number
- email
- url
- search
- tel
- color
Nota: ¡Las entradas NO tendrán un estilo completo si su tipo no se declara correctamente!
El siguiente ejemplo contiene dos elementos de entrada; uno de tipo = «texto» y uno de tipo = «contraseña». Como mencionamos en el capítulo de Formularios, utilizamos la clase .form-control para diseñar entradas con ancho completo y relleno adecuado, etc.
Ejm
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<Textarea>
El siguiente ejm contiene una etiqueta <textarea>.
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap Checkboxes (Casillas de verificación)
Las casillas de verificación se utilizan si deseas que el usuario seleccione cualquier cantidad de opciones de una lista de opciones preestablecidas.
El siguiente ejemplo contiene tres casillas de verificación. La última opción está deshabilitada:
Ejm
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Explicación del ejm
Usamos un elemento contenedor con class = «form-check» para garantizar márgenes adecuados para las etiquetas y casillas de verificación.
Agregamos la clase .form-check-label a los elementos de la etiqueta y .form-check-input a las casillas de estilo correctamente dentro del contenedor .form-check.
Inline Checkboxes (Casillas de verificación en línea)
Usamos la clase .form-check-inline si deseamos que las casillas de verificación aparezcan en la misma línea.
Ejm
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Botones de radio con Bootstrap
Los botones de opción se usan si deseamos limitar al usuario a solo una selección de una lista de opciones preestablecidas.
El siguiente ejemplo contiene tres botones de radio. La última opción está deshabilitada.
Ejm
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Al igual que con las casillas de verificación, usamos la clase .form-check-inline si deseamos que los botones de radioaparezcan en la misma línea.
Ejm
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Lista de selección con Boostrap 4
Lista de selección sólo seleccionando una opción. Lista de selección múltiple (mantén presionada la tecla Ctrl o Mayús (o arrastra con el mouse) para seleccionar más de una). Las listas de selección se utilizan si deseas permitir que el usuario elija entre varias opciones. El siguiente ejemplo contiene una lista desplegable (seleccione la lista).
Ejm
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>