7.3. Estilos para Formularios HTML con Twitter Bootstrap

En los sitios web basados en ZF3 usamos el framework CSS Twitter Bootstrap que provee reglas CSS por defecto para dar estilos a formularios y campos del formularios. Para aplicar las reglas CSS a un campo del formulario (como <input>, <textarea>, etc.), debemos asignarle la clase CSS .form-control. Además, cuando usamos etiquetas junto con los campos de entrada colocamos el par entrada-etiqueta dentro de un elemento <div> con la clase CSS .form-group. Para el botón submit podemos usar la clase CSS .btn más una clase de tema como .btn-default, .btn-primary, etc.

Abajo mostramos el formulario de contacto modificado para usar los estilos de Bootstrap:

<h1>Contact Us</h1>

<p>
    Please fill out the following form to contact us.
    We appreciate your feedback.
</p>

<form name="contact-form" action="/contactus" method="post">

  <div class="form-group">
    <label for="email">Your E-mail</label>
    <input name="email" type="text" class="form-control"
           placeholder="name@example.com">
  </div>

  <div class="form-group">
    <label for="subject">Subject</label>
    <input name="subject" type="text" class="form-control"
           placeholder="Type subject here">
  </div>

  <div class="form-group">
    <label for="body">Message Body</label>
    <textarea name="body" class="form-control" rows="6"
              placeholder="Type message text here"></textarea>
  </div>

  <input name="submit" type="submit"
         class="btn btn-primary" value="Submit">
</form>

El aspecto del formulario se muestra en la figura 7.5.

Figura 7.5. Formulario de Contacto con Estilo

Como Twitter Bootstrap se diseño para soportar teléfonos, tabletas y escritorios el formulario será tan ancho como el tamaño de la pantalla. Esto pude hacer que nuestro formulario sea muy ancho y difícil de ver. Para limitar el ancho del formulario podemos usar las rejillas que provee Bootstrap, como se muestra el siguiente ejemplo:

<div class="row">
  <div class="col-md-6">
    <form>
      ...
    </form>
  </div>
</div>

En el código HTML de arriba colocamos un formulario dentro de una celda de la rejilla de 6 columnas de ancho que hace que el formulario ocupe la mitad de la pantalla.