Botones con imágenes en XForms

Si echamos la vista atrás podemos recordar que con los formularios HTML podíamos tener campos de texto de tipo “image”. Estos campos de texto no eran más que una imagen sobre la que se podía pinchar. Luego aparecio la etiqueta button que ya permitía anidar otros elementos. Mediante CSS se daba un nuevo salto y las propiedades permitían jugar con el color e imagen de fondo del botón. Con XForms vamos un paso más allá y aquí se pueden construir botones con imágenes, mediante la etiqueta IMG de HTML. Algo parecido al elemento button de HTML. Y todo de una forma muy sencilla. Lo primero que tenemos que ver es cómo construir un botón. Para ello nos valemos de la etiqueta trigger. La verdad es que esto ha sido un cambio bastante sustancial con respecto a los button del HTMLAnidada a la etiqueta trigger utilizaremos label para indicar el texto que va sobre el botón. Teniendo un código similar al siguiente:

Como se puede observar, algo muy sencillo de codificar y muy útil en cuanto al diseño. Toda una novedad de XForms. Veamos como sería el código completo:

<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml">
<h:head>
 <h:title>Mi primer formulario XForms</h:title>
</h:head>
<h:body>

 <h:p>

  <trigger>
   <label><h:img src="documento.gif"></h:img></label>
  </trigger>

  <trigger>
   <label>Mi boton</label>
  </trigger>

 </h:p>
</h:body>
</h:html>

FireFox ya da soporte a la especificación de XForms, aunque, que yo sepa incompleto. Puedes encontrar otros interpretes de XForms en http://www.w3.org/MarkUp/Forms/#implementations

<trigger>
   <label><h:img src="documento.gif"></h:img></label>
</trigger>

Incrustar una imagen como elemento del botón será un procedimiento muy sencillo, ya que bastará con utilizar la etiqueta img, referenciando a la imagen que queramos usar, como valor del label del botón

<trigger>
   <label>Mi boton</label>
</trigger>