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