Entradas de formulario Bootstrap
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 tipo texto y otro de tipo contraseña:
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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Use la .checkbox-inlineclase si desea que las casillas de verificación aparezcan en la misma línea:
Ejemplo
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
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 primera opción está marcada por defecto y la última opción está deshabilitada:
Ejemplo
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Usa la .radio-inlineclase si quieres que los botones de opción aparezcan en la misma línea:
Ejemplo
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
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>