Bootstrap 3 define estilos adecuados para todos y cada uno de los campos de formulario existentes.
5.4.1. Inputs
Los campos de tipo <input>
son los más numerosos, ya que con HTML5 la lista se ha ampliado a text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, y color
.
Advertencia Bootstrap 3 solamente aplica los estilos a los campos <input>
que definen explícitamente su tipo mediante el atributo type
.
Ejemplo:
<input type="text" class="form-control" placeholder="Campo de texto">
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
5.4.2. Textarea
Utiliza este control para escribir textos largos, modificando el valor del atributo rows
para ajustarlo al número de líneas que prefieras.
Ejemplo:
<textarea class="form-control" rows="3"></textarea>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
5.4.3. Checkboxes y radio buttons
Los checkboxes permiten elegir una o más opciones dentro de una lista, mientras que los radio buttons permiten elegir una sola opción entre varias.
5.4.3.1. Estilo por defecto
Ejemplo:
<div class="checkbox">
<label>
<input type="checkbox" value="">
Esta es una opción muy interesante que tienes que pinchar
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opciones" id="opciones_1" value="opcion_1" checked>
Esta es una opción muy interesante que tienes que pinchar
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opciones" id="opciones_2" value="opcion_2">
Esta otra opción también es muy interesante y al pincharla, deseleccionas la opción anterior
</label>
</div>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
5.4.3.2. Checkboxes y radio buttons en línea
Si prefieres mostrar los checkboxes y los radio buttons en línea para que ocupen menos espacio, utiliza las clases CSS .checkbox-inline
o .radio-inline
. Ejemplo:
<label class="checkbox-inline">
<input type="checkbox" id="checkboxEnLinea1" value="opcion_1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="checkboxEnLinea2" value="opcion_2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="checkboxEnLinea3" value="opcion_3"> 3
</label>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
5.4.4. Listas desplegables
Para mostrar una lista desplegada, añade el atributo multiple
. Ejemplo:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
5.4.5. Campos de formulario estáticos
En ocasiones puede ser necesario mostrar texto al lado de un elemento <label>
en un formulario horizontal. Para ello, añade el texto mediante un <p>
con la clase .form-control-static
. Esta técnica es útil por ejemplo para mostrar el valor de los campos de formulario no editables. Ejemplo:
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Contraseña</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Contraseña">
</div>
</div>
</form>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo: