10.2. Modificando el aspecto de los formularios

Mostrar un formulario simplemente con echo $form está bien para la fase de prototipado, pero en la aplicación real querrás tener un control preciso del código HTML resultante. El objeto del formulario contiene un array con todos sus campos, y la llamada a echo $form simplemente recorre ese array para mostrarlos uno a uno. Si quieres un control más preciso, puedes iterar sobre los campos del formulario a mano y después ejecutar el método renderRow() sobre cada uno de ellos. El siguiente código produce exactamente el mismo resultado que antes, pero la plantilla muestra cada campo individualmente.

// en modules/mimodulo/templates/contactoSuccess.php
<?php echo $form->renderFormTag('mimodulo/contacto') ?>
  <table>
    <?php echo $form['nombre']->renderRow() ?>
    <?php echo $form['email']->renderRow() ?>
    <?php echo $form['asunto']->renderRow() ?>
    <?php echo $form['mensaje']->renderRow() ?>
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>

Mostrar cada campo de forma individual no sólo te permite modificar su posición, sino que también puedes controlar su aspecto. Si se pasa un argumento al método renderRow(), se interpreta como la lista de atributos HTML del campo, por lo que puedes añadir por ejemplo los atributos class e id o incluso un evento de JavaScript. El segundo parámetro de renderRow() se emplea para establecer el título o etiqueta del campo, reescribiendo el que Symfony deduce a partir del nombre del widget. A continuación se muestra un ejemplo de formulario de contacto personalizado:

// en modules/mimodulo/templates/contactoSuccess.php
<?php echo $form->renderFormTag('mimodulo/contacto') ?>
  <table>
    <?php echo $form['nombre']->renderRow(array('size' => 25, 'class' => 'miclase'), 'Escribe tu nombre') ?>
    <?php echo $form['email']->renderRow(array('onclick' => 'this.value = "";'), 'Escribe tu email') ?>
    <?php echo $form['mensaje']->renderRow() ?>
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>

El siguiente paso al personalizar el formulario puede ser el uso de etiquetas <li> en vez de <tr> para mostrar cada campo. En realidad, un campo de formulario está compuesto por su título, opcionalmente un mensaje de error (explicado más adelante en este capítulo), un mensaje de ayuda y un widget para introducir datos (los widgets complejos pueden estar formados por varias etiquetas HTML). De la misma forma que puedes mostrar los campos de un formulario de uno en uno, también puedes mostrar individualmente cada parte de cada campo. Para ello, olvida el método renderRow() y utiliza los métodos render() (para el widget), renderError(), renderLabel() y renderHelp(). Si por ejemplo quieres mostrar todo el formulario con etiquetas <li>, puedes modificar la plantilla por lo siguiente:

// en modules/foo/templates/contactSuccess.php
<?php echo $form->renderFormTag('mimodulo/contacto') ?>
  <ul>
    <?php foreach ($form as $campo): ?>
    <li>
      <?php echo $campo->renderLabel() ?>
      <?php echo $campo->render() ?>
    </li>
    <?php endforeach; ?>
    <li>
      <input type="submit" />
    </li>
  </ul>
</form>

El listado anterior genera el siguiente código HTML:

<form action="/frontend_dev.php/mimodulo/contacto" method="POST">
  <ul>
    <li>
      <label for="nombre">Nombre</label>
      <input type="text" name="nombre" id="nombre" />
    </li>
    <li>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
    </li>
    <li>
      <label for="asunto">Asunto</label>
      <select name="asunto" id="asunto">
        <option value="0">Asunto A</option>
        <option value="1">Asunto B</option>
        <option value="2">Asunto C</option>
      </select>
    </li>
    <li>
      <label for="mensaje">Mensaje</label>
      <textarea rows="4" cols="30" name="mensaje" id="mensaje"></textarea>
    </li>
    <li>
      <input type="submit" />
    </li>
  </ul>
</form>

// en modules/mimodulo/templates/contactoSuccess.php
<?php echo $form->renderFormTag('mimodulo/contacto') ?>
  <ul>
    <?php echo $form->renderUsing('list') ?>
    <li>
      <input type="submit" />
    </li>
  </ul>
</form>