3.2. La plantilla del prototipo

Por el momento, para generar el código HTML que muestra el formulario se ha empleado la instrucción <?php echo $formulario ?> en la plantilla del prototipo.

Los formularios están compuestos por campos. A su vez, en la plantilla cada campo está formado por tres elementos:

  • El título del campo o label
  • La etiqueta del campo (<input>, <select>, etc.)
  • Opcionalmente, los mensajes de error del campo

La instrucción <?php echo $formulario ?> genera automáticamente el código HTML de todos esos elementos, como muestra el listado 3-2 en el caso de un formulario enviado con datos no válidos.

Listado 3-2 - Plantilla generada automáticamente cuando se envía un formulario con datos no válidos

<form action="/frontend_dev.php/contacto" method="POST">
  <table>
    <tr>
      <th><label for="contacto_nombre">Nombre</label></th>
      <td><input type="text" nombre="contacto[nombre]" id="contacto_nombre" /></td>
    </tr>
    <tr>
      <th><label for="contacto_email">Email</label></th>
      <td>
        <ul class="error_list">
          <li>This email address is invalid.</li>
        </ul>
        <input type="text" nombre="contacto[email]" value="fabien" id="contacto_email" />
      </td>
    </tr>
    <tr>
      <th><label for="contacto_asunto">Asunto</label></th>
      <td>
        <select nombre="contacto[asunto]" id="contacto_asunto">
          <option value="0" selected="selected">Asunto A</option>
          <option value="1">Asunto B</option>
          <option value="2">Asunto C</option>
        </select>
      </td>
    </tr>
    <tr>
      <th><label for="contacto_mensaje">Mensaje</label></th>
      <td>
        <ul class="error_list">
          <li>The mensaje "foo" is too short. It must be of 4 characters at least.</li>
        </ul>
        <textarea rows="4" cols="30" nombre="contacto[mensaje]" id="contacto_mensaje">foo</textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>

A continuación se explica de forma detallada el código anterior. La figura 3-2 muestra las filas de tabla (etiqueta <tr>) que se generan por cada campo.

Código HTML generado para cada campo del formulario

Figura 3.2 Código HTML generado para cada campo del formulario

Para cada campo de la figura 3-3 se generan tres trozos de código HTML, correspondientes a los tres elementos que forman cada campo. Para el campo email se generan por ejemplo el siguiente código HTML:

  • El título o label:
<label for="contact_email">Email</label>
  • La etiqueta del campo:
<input type="text" nombre="contacto[email]" value="fabien" id="contacto_email" />
  • Los mensajes de error:
<ul class="error_list">
  <li>The email address is invalid.</li>
</ul>
Descomposición del campo del email

Figura 3.3 Descomposición del campo del email

Nota Todos los campos disponen de un atributo id generado automáticamente, lo que permite a los programadores añadirles estilos CSS o comportamientos JavaScript de forma muy sencilla.

Compartir

Indice de contenidos