Botones HTML con la etiqueta BUTTON

Vamos a ver una etiqueta HTML que sirve para hacer botones, de la que no habíamos hablado antes en nuestro manual de HTML . Esta etiqueta es <button>, que permite la creación de botones más personalizados, por lo que ofrece algunas ventajas, e igualmente unos inconvenientes que vamos a tratar aquí. Antes que nada, deberíamos decir que en DesarrolloWeb.com ya habíamos comentado acerca de otra etiqueta que servía para hacer botones, la etiqueta <input>, que además tiene otros usos. Vamos a explicar también las diferencias entre hacer botones con <button> e <input>.

Primero habría que conocer bien los usos de la etiqueta INPUT, que sirve para hacer varias cosas, como campos de texto, campos ocultos, botones de enviar formulario, borrar sus datos y botones normales. Veamos los usos de la etiqueta INPUT antes de continuar.

Utilización de la etiqueta <BUTTON>

La etiqueta BUTTON se utiliza con una apertura de etiqueta <BUTTON> y una de cierre </BUTTON>. Entre las dos etiquetas, de apertura y cierre, se coloca el contenido que irá dentro del botón.

Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar texto a voluntad, pero también otras etiquetas HTML, como imágenes, saltos de línea, negritas o lo que podamos necesitar.

Veamos un ejemplo:

<button>
Hola esto es un <b>botón</b>
<br>
<br>
Puedo poner saltos de línea en él!
<hr>
Y otras cosas
<br>
<img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif" width="261" height="35" alt="">
</button>

Que tendría este aspecto:

Hola esto es un botón

Puedo poner saltos de línea en él!

---

Y otras cosas

Como se puede ver, permite aportar bastante creatividad a los botones que incorporemos en páginas web, mucho más que la etiqueta INPUT, que sólo permite colocar texto dentro del botón:

<input type="button" value="texto del botón">

Atributos de BUTTON

Ahora veamos rápidamente los atributos que podemos utilizar:

• name: sirve para darle un nombre al botón. Al enviarse el formulario se enviarán los datos del bot´n bajo este nombre.
• type: sirve para indicar el tipo de botón, que podría ser: button para un botón normal, reset para un botón de borrado de datos del formulario y submit para un botón de envío de formulario.
• value: para especificar el valor de un botón. El valor es lo que se enviará por formulario, en el momento del submit. Pero ojo aquí porque puede haber diferencias entre navegadores, que veremos a continuación.
• disabled: este atributo sirve para hacer que el botón se encuentre deshabilitado.

Incompatibilidades entre navegadores con la etiqueta BUTTON

Lamentablemente, la etiqueta BUTTON tiene diversas interpretaciones por parte de los distintos navegadores del mercado. Desde desarrollo web .com advertimos que se debe tener cuidado cuando la usemos, porque estas incompatibilidades podrían perjudicar el buen funcionamiento de la página.

1. Por defecto, el atributo type de BUTTON tiene el valor "button" en todos los navegadores, salvo Internet Explorer, al menos hasta la versión 7, que le da por defecto valor "submit". Esto lo solucionamos simplemente colocando siempre el atributo type con el valor que queramos.
2. Cuando se envía un formulario con un botón creado con la etiqueta BUTTON, Internet Explorer envía como value del botón lo que hay escrito en él, es decir, el texto que haya entre <BUTTON> y </BUTTON> con todas las etiquetas que pueda haber dentro. Los demás navegadores envían el atributo value que tenga el botón, aunque sólo hacen esto cuando el botón es de type="submit" y si se ha enviado el formulario pulsando ese botón.

De estas dos incompatibilidades, la segunda tiene más difícil solución, porque deberíamos saber el navegador que está utilizando el usuario para poder saber el comportamiento del BUTTON. Es por ello que lo más recomendable es no basar el funcionamiento de scripts en formularios en esta etiqueta. Por lo demás, tiene algunas funcionalidades interesantes que podrían venirnos bien el algún momento.