Bootstrap Formularios
En este capítulo, aprenderemos cómo usar Bootstrap para crear formularios. Bootstrap permite crear formularios de diferentes estilos mediante algunas etiquetas HTML simples y clases extendidas.
Bootstrap ofrece los siguientes tipos de diseño de formularios:
- Formulario vertical (predeterminado)
- Formulario en línea
- Formulario horizontal
Formulario vertical o básico
La estructura básica del formulario viene incluida en Bootstrap, y los controles de formulario individuales reciben automáticamente algunos estilos globales. A continuación se enumeran los pasos para crear un formulario básico:
- Agregue al elemento <form> padrerole="form"。
- Coloque las etiquetas y los controles en un <div> con class.form-groupen el <div>. Esto es necesario para obtener un espaciado óptimo.
- A todos los elementos de texto <input>, <textarea> y <select> agregue class =form-control" 。
Ejemplo
<form role="form">
<div class="form-group">
<label for="name">Nombre</label>
<input type="text" class="form-control" id="name" placeholder="Por favor ingrese su nombre">
</div>
<div class="form-group">
<label for="inputfile">Entrada de archivo</label>
<input type="file" id="inputfile">
<p class="help-block">Este es un ejemplo de texto de ayuda a nivel de bloque.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Por favor marque la casilla</label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Pruébalo »
El resultado se muestra a continuación:
Formulario en línea
Si necesita crear un formulario en el que todos sus elementos estén en línea, alineados a la izquierda y con etiquetas una al lado de la otra, agregue class al elemento <form>.form-inline。
Ejemplo
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Nombre</label>
<input type="text" class="form-control" id="name" placeholder="Por favor ingrese su nombre">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">Entrada de archivo</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Por favor marque la casilla</label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Pruébalo »
El resultado se muestra a continuación:
- De forma predeterminada, los elementos input, select y textarea en Bootstrap tienen un ancho del 100%. Al usar un formulario en línea, debe establecer un ancho en los controles del formulario.
- Usando class.sr-only, puede ocultar las etiquetas del formulario en línea.
Formulario horizontal
El formulario horizontal no solo difiere en la cantidad de marcado, sino también en la forma en que se presenta. Para crear un formulario con diseño horizontal, siga los siguientes pasos:
- Agregue class al elemento <form> padre.form-horizontal。
- Coloque las etiquetas y controles en un <div> con class.form-groupen el <div>.
- Agregue class a las etiquetas.control-label。
Ejemplo
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Por favor ingrese su nombre">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Apellido</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Por favor ingrese su apellido">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Recuérdame</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Iniciar sesión</button>
</div>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Bootstrap admite los controles de formulario más comunes, principalmenteinput, textarea, checkbox, radio y select。
Cuadro de entrada (Input)
El campo de texto de formulario más común es el cuadro de entrada input. Los usuarios pueden ingresar en él la mayoría de los datos necesarios del formulario. Bootstrap proporciona soporte para todos los tipos de input nativos de HTML5, incluyendo:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telycolor. La apropiadatypedeclaración es necesaria para queinputobtenga el estilo completo.
Ejemplo
<form role="form">
<div class="form-group">
<label for="name">Etiqueta</label>
<input type="text" class="form-control" placeholder="Entrada de texto">
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Área de texto (Textarea)
Cuando necesite ingresar varias líneas, puede usar el área de texto textarea. Si es necesario, puede cambiar elrowsatributo (menos filas = caja más pequeña, más filas = caja más grande).
Ejemplo
<form role="form">
<div class="form-group">
<label for="name">Área de texto</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Casillas de verificación (Checkbox) y botones de opción (Radio)
Las casillas de verificación y los botones de opción se utilizan para permitir que el usuario elija entre una serie de opciones predefinidas.
- Al crear un formulario, si desea que el usuario seleccione varias opciones de una lista, usecheckbox. Si limita al usuario a elegir solo una opción, useradio。
- Para una serie de casillas de verificación y botones de opción, use.checkbox-inlineo.radio-inlineclass, para controlar que se muestren en la misma línea.
El siguiente ejemplo muestra ambos tipos (predeterminado y en línea):
Ejemplo
<label for="name">Ejemplo de casillas de verificación y botones de opción predeterminados</label>
<div class="checkbox">
<label><input type="checkbox" value="">Opción 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Opción 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Opción 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Opción 2: seleccionarla deseleccionará la opción 1</label>
</div>
<label for="name">Ejemplo de casillas de verificación y botones de opción en línea</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">Opción 1</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">Opción 2</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">Opción 3</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>Opción 1</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">Opción 2</label>
</div>
Pruébalo »
El resultado se muestra a continuación:
Cuadro de selección (Select)
Use un cuadro de selección cuando desee que el usuario elija entre varias opciones, pero que de forma predeterminada solo pueda seleccionar una.
- Use <select> para mostrar una lista de opciones, normalmente listas de selección que el usuario conoce bien, como estados o números.
- Usemultiple="multiple"para permitir que el usuario seleccione múltiples opciones.
El siguiente ejemplo muestra estos dos tipos (select y multiple):
Ejemplo
<form role="form">
<div class="form-group">
<label for="name">Lista de selección</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">Lista de selección múltiple</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Cuando necesite colocar texto sin formato después de la etiqueta del formulario en un formulario horizontal, use la clase en <p>.form-control-static。
Ejemplo
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Contraseña</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Por favor ingrese la contraseña">
</div>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Además del:focusestado (es decir, cuando el usuario hace clic en input o usa la tecla Tab para enfocar el input), Bootstrap también define estilos para los campos de entrada deshabilitados y proporciona clases de validación de formularios.
Foco del campo de entrada
Cuando el campo de entrada input recibe:focusel foco, se elimina el contorno y se aplicabox-shadow。
Campo de entrada deshabilitado (input)
Si desea deshabilitar un campo de entrada input, simplemente agreguedisabledel atributo. Esto no solo deshabilita el campo de entrada, sino que también cambia el estilo del campo y el estilo del cursor del mouse cuando el puntero se sitúa sobre el elemento.
Conjunto de campos deshabilitado (fieldset)
Agregue el atributo disabled a <fieldset> para deshabilitar todos los controles dentro de <fieldset>.
Estado de validación
Bootstrap incluye estilos de validación para mensajes de error, advertencia y éxito. Simplemente agregue la clase apropiada al elemento padre (.has-warning, .has-error o .has-success) para usar el estado de validación.
El siguiente ejemplo demuestra todos los estados de los controles:
Ejemplo
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Enfocado</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Este campo de entrada ha obtenido el foco...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Deshabilitado</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="Este campo de entrada tiene la entrada deshabilitada..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Entrada deshabilitada (Fieldset disabled)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Entrada deshabilitada">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">Menú de selección deshabilitado (Fieldset disabled)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Selección deshabilitada</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">Entrada exitosa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">Entrada con advertencia</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">Error de entrada</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Puede usar las clases.input-lgy.col-lg-*para establecer la altura y el ancho de los formularios. El siguiente ejemplo demuestra esto:
Ejemplo
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Entrada predeterminada">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
<div class="form-group"></div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">Selección predeterminada</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
Pruébalo »
El resultado se muestra a continuación:
Los controles de formulario de Bootstrap pueden tener un texto de ayuda de bloque en el campo de entrada input. Para agregar un bloque de contenido que ocupe todo el ancho, use.help-block. El siguiente ejemplo demuestra esto:
Ejemplo
<form role="form">
<span>Ejemplo de texto de ayuda</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">Un bloque de texto de ayuda más largo, que excede una línea,
necesita extenderse a la siguiente línea. El texto de ayuda de este ejemplo tiene dos líneas en total.</span>
</form>
Pruébalo »
El resultado se muestra a continuación:
Otras extensiones
