A free and open-source book on ZF3 for beginners

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

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 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.


Top