Ver índice de contenidos del libro

5.1. Formulario básico

Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los formularios. Si además añades la clase .form-control a los elementos <input>, <textarea> y <select>, su anchura se establece a width: 100%. Para optimizar el espaciado, utiliza la clase .form-group para encerrar cada campo de formulario con su <label>.

Ejemplo:

<form role="form">
  <div class="form-group">
    <label for="ejemplo_email_1">Email</label>
    <input type="email" class="form-control" id="ejemplo_email_1"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label for="ejemplo_password_1">Contraseña</label>
    <input type="password" class="form-control" id="ejemplo_password_1" 
           placeholder="Contraseña">
  </div>
  <div class="form-group">
    <label for="ejemplo_archivo_1">Adjuntar un archivo</label>
    <input type="file" id="ejemplo_archivo_1">
    <p class="help-block">Ejemplo de texto de ayuda.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Activa esta casilla
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Formulario básico en Bootstrap 3

Figura 5.1 Formulario básico en Bootstrap 3