Entradas de formulario de Bootstrap 4
Controles de formulario admitidos
Bootstrap admite los siguientes controles de formulario:
- aporte
- área de texto
- caja
- radio
- Seleccione
Entrada de arranque
Bootstrap admite todos los tipos de entrada de HTML5: texto, contraseña, fecha y hora, fecha y hora local, fecha, mes, hora, semana, número, correo electrónico, URL, búsqueda, teléfono y 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 type="text"y uno de
type="password". Como mencionamos en el capítulo Formularios, usamos la .form-controlclase para diseñar entradas con ancho completo y relleno adecuado, etc.:
Ejemplo
<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>
Área de texto Bootstrap
El siguiente ejemplo contiene un área de texto:
Ejemplo
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Casillas de verificación de Bootstrap
Las casillas de verificación se utilizan si desea 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:
Ejemplo
<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>
Ejemplo explicado
Utilice un elemento de envoltorio class="form-check"para garantizar los márgenes adecuados para las etiquetas y las casillas de verificación.
Agregue la .form-check-labelclase para etiquetar elementos y .form-check-inputaplicar estilo a las casillas de verificación correctamente dentro del .form-checkcontenedor.
Casillas de verificación en línea
Use la .form-check-inlineclase si desea que las casillas de verificación aparezcan en la misma línea:
Ejemplo
<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 opción Bootstrap
Los botones de radio se utilizan si desea limitar al usuario a una sola selección de una lista de opciones predeterminadas.
El siguiente ejemplo contiene tres botones de opción. La última opción está deshabilitada:
Ejemplo
<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, use la .form-check-inlineclase si desea que los botones de opción aparezcan en la misma línea:
Ejemplo
<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 de Bootstrap
Las listas de selección se utilizan si desea permitir que el usuario elija entre múltiples opciones.
El siguiente ejemplo contiene una lista desplegable (lista de selección):
Ejemplo
<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>
Tamaño del control de formulario
Cambie el tamaño del control de formulario con .form-control-smo .form-control-lg:
Ejemplo
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Control de formulario con texto sin formato
Use .form-control-plaintextsi desea diseñar el campo de entrada como texto sin formato:
Ejemplo
<input type="text" class="form-control-plaintext">
Archivo y rango de control de formulario
Agregue la .form-control-rangeclase a input type"range"o .form-control-filea input type"file"para diseñar un control de rango o un campo de archivo con ancho completo:
Ejemplo
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">