5.4.  Campos de formulario

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.

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:

Figura 5.4 Campo de texto en Bootstrap 3

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:

Figura 5.5 Campo de textarea en Bootstrap 3

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:

Figura 5.6 Checkbox y radiobutton por defecto en Bootstrap 3

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:

Figura 5.7 Checkbox y radiobutton en línea en Bootstrap 3

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:

Figura 5.8 Listas desplegables en Bootstrap 3

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:

Figura 5.9 Campos estáticos en Bootstrap 3