A pesar de ser los formularios una de las partes más importantes de toda aplicación web, es bien cierto que el lenguaje HTML nos ofrece pocas (por no decir ninguna) opciones para adaptar sus elementos al diseño de nuestra página.

Efectivamente, son pocos los componentes sobre los que podemos actuar para cambiar su aspecto externo. Tenemos la opción de dar más o menos longitud a un textarea o a una caja de texto, de configurar el tamaño de la fuente de las mismas, de "trucar" una lista de selección mediante espacios para conseguir que tenga un tamaño adecuado, etc. Pero uno de los elementos más operativos, los botones de formulario, quedan casi fuera de estas configuraciones.

Así, siempre que introduzcamos en nuestra página un elemento submit, reset o button, su aspecto será del tipo:

Es decir, de fondo grís, con aspecto 3D y con pocas posibilidades más.

El botón anterior es de tipo submit, que, además, tiene por objeto ejecutar el envío de los datos del formulario. De esta forma, si tenemos un formulario con un campo de texto, cuyo atributo action apunta a la página de Yahoo España, definido por el código:

Si lo deseas, puedes descargar los códigos e imágenes empleados en todo este tutorial.

Siempre que pulsemos sobre el botón se nos abrirá una ventana nueva (target="_blank") con la página de Yahoo (valor de action). Pero también ocurrirá lo mismo, por propia definición, siempre que, teniendo el foco uno de los objetos del formulario, pulsemos la tecla Intro o la tecla Enter (retorno de carro). Sólo tenéis que comprobarlo en el ejemplo anterior, situando el cursor sobre la caja de texto y pulsando Enter.

La pregunta a hacernos es: ¿Podemos de alguna forma cambiar el aspecto de estos elementos?. Y la respuesta, afortunadamente, es que sí. Vamos a ver a continuación cómo podemos cambiar el aspecto exterior de los botones de formulario, bien haciendo uso de complementos al lenguaje HTML, como las Hojas de Estilos en Cascada (CSS), bien simulando estos componentes.