Botones y HTML

Mostramos algunas insuficiencias del HTML en el diseño de formularios y en concreto en el retoque de botones de envío de formularios.

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.

Referencia: En nuestro manual de HTML podrás encontrar una serie de artículos sobre formularios que te ayudarán en la tarea de confeccionar estos elementos interactivos.

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:

<div align="center">
  <form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
    <input type="text" name="prueba"><br><br>
    <input type="submit" value="enviar">
  </form>
</div>

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.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

Guido Manfredi

28/5/2004
Se pueden sifrar los datos que se mandan a l correo, ya que cuando quiero mandar la info por un formularo me salta un mensaje que dice que no es seguro u otra forma de que solate dicho cartel

Gracias

alejandro

10/12/2004
Me parece espectacular el artículo, pero quisiera saber como hago, en mi caso, para que el botón surta efecto en el mainframe, yo utilizo este codigo para cada boton: <input type='button' value='Nombre' onClick=location.href='http://www.direcion.com/link'> como le pongo el target ya que poniendolo despues de la dirección no funciona... Mis agradecimientos desde ya...

juan

20/6/2010
Felicitacion
muy buen articulo pero megustaria que ousieran mas ejemplos

anderson

07/3/2014
saludo
podrian decirme como deshabilitar un boton permanentemente? es decir, que cuando se actualize la pagina no se veulva a colocar habilitado.