Botones HTML con la etiqueta BUTTON

  • Por
Como crear botones HTML más variados utilizando la etiqueta BUTTON, que permite colocar imágenes y otros contenidos en el botón.
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:

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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Scabuzzo, Joaquin M.

17/9/2008
Hola, muy interesante el articulo aunque aún no lo hé probado.
Me gustaría aportar algo que me sucedió trabajando con lenguajes dinámicos y variables de sesión; cuando enviaba un formulario tambien me tomaba como dato el valor del boton ya que este es un objeto mas dentro del formulario, lo resolví quitando el boton del formulario y enviando el formulario con un botón que no fuera de tipo submit (que fuera de tipo button) y en el evento onclick coloqué la siguiente linea que funciona en todos los navegadores "document.nombre de formulario.submit()".
Ejemplo tipico con formulario por defecto:
<input type="button" name="boton" value="Aceptar" onClick="document.form1.submit()" />

Sergio

20/2/2009
Hay un error en este artículo:

>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".

Por defecto Mozilla le da el valor SUBMIT y IExplorer el valor BUTTON.

JUAN ANTONIO

21/4/2009
COMENTAR ALGO
PUES ESTO ESTA MUY FEO

fer

27/6/2009
ehhh
Che como hago para vincularlo???

Si me desis lo agradeceria mucho

Saludos

Aris

04/11/2009
SOBRE BOTONES
Hola soy novata en esto del HTML, y he estado probando cosillas con la creación de botones, ahora que ya se crearlos me gustaria saber si puedo utilizarlos para que estos me conduzcan a otra hoja dentro de mi web y como lo puedo hacer.

Gracias

jose

17/2/2010
como vincular el boton input
como vincular el boton input, yo he intentado esto pero no funciona.

<input type=button value="Tienda Online" onClick="NewWindow('http://www.floresalud.es/tienda_online')">

gracias

jose manuel

24/2/2010
boton radio cambiar color fondo
Hola,

Alguien puede ayudarme para cambiar el color de fondo transparente o de otro color a este boton radio.

[code]<input type="radio" name="sitesearch" value="" id="ss0"></input>[/code]

Muchas gracias

martin

09/3/2010
recargar pagina con un formulario, salta javascript
Hola a Todos,

tengo un problema
tengo un formulario el cual valida con javascript el captcha
pero al momento de refrescarla página es como si se estuviera enviando el formulario

la etiqueta donde esta el botón es un input
le cambie al tipo button pero igual valida

<input class="submit ui-state-default ui-corner-all" type="submit" value="Enviar Solicitud" onClick=" validaCaptchaTab3(); "/>

luego cambie a

<input class="submit ui-state-default ui-corner-all" type="button" value="Enviar Solicitud" onClick=" validaCaptchaTab3(); "/> donde la función validaCaptchaTab3() tiene a document.form.submit()

pero nada sigue validando

alguna otra brillante solució me podrian dar muchas gracias

Fernando

04/4/2010
Nice
y Como pondria un link ahi para al momento de darle clicknada mas con un simple a hrf
o como esta la cosa

amd

19/7/2010
Botones con enlace
Hola, gracias por toda la informacion de este sitio. Me ha sido muy util. Yo soy principiante y estoy aprendiendo aqui. Me podrian decir como puedo meter un enlace dentro de un boton para que me lleve mas abajo dentro de la misma pagina?

Yaya

24/9/2010
yeaaa
eii viejoo me sacvast d una grandeeeeee xD
q re facil esta grax =)

Laura

06/11/2010
Cómo hecer que un boton sea un hipervinculo????
Yo tengo por ejemplo esto:

<button><a href="quienes somos.html">QUIENES SOMOS</a></button>

y NO FUNCIONAAAA!!!

Pero en cuanto quito la etiqueta <buton> el vínculo funciona perfecto!!
Qué me esta fallando?

wilmer

07/2/2011
prueben vincular button asi y digan si funciona
<button onclick=location="http://www.tupagina.com">INICIO</button>

CPY

03/5/2011
¿Cómo cambio el color azul cuando tengo ratón encima?
Buenas tardes,

He probado con crear este tipo de botón pero el problema es que quiero cambiar el color azul (cuando el mouse está encima) por otro... Tengo que tocar CSS supongo, pero no sé cómo... ¿Me podrías dar algunas indicaciones?

Gracias,.

humberto

16/9/2011
Cambiar el color del boton por otro cuando el raton este encima.
Hola CPY, si te instalas un programa que te genere el codigo lo tendras, puedes usar cualquier editor como Frontpage, o otro que te guste mas facil de manejar.

Juan

08/10/2012
Enlace
Hola, me gustaría saber si se puede poner un enlace en el botón, tipo, le doi al botón y me lleva a google o algo parecido. Gracias.

CESAR

22/2/2013
html botones
disculpen pero nesesito tres botones q alinien el texto izquierda, derecha , centro q al presionarlos el texto cambie de posicion en bloc de notas espero me puedan ayudar

craperos

05/5/2013
la forma para ponerle un enlace es asi gente!!!
<button onclick=location="http://www.mipaginaestarebuena.com/">
Mi zona esta en <b>argentina</b>
<br>
<br>
soy un tutorial medio incompleto!
<hr>
Y MUCHO MAS!
<br>
<img src="/images/xxx.jpg" width="261" height="196" alt="">
</button>

esteban

08/6/2013
ayudenmeee porfavoooor
como se hace para q el boton funcione y me mande a otra pagina en la misma pestaña

Ojoazul

12/11/2013
Wilmer tenía razón
Sí, así sí que funciona. GRACIAS WILMER

ana

13/11/2013
oooo
<button type="submit" value="submit">Submit</button>

MARCO

16/1/2014
button html
buenas como podría crear un botón pero en forma de fecha para avanzar o retroceder una pagina a otra enlaces a diferentes hipervínculos

anderson

04/4/2014
html
no me gusta ni mierda

Leo

11/6/2014
web boton
MALISIMO ESTA TODO INCOMPLETO PONGO EL CODIGO HTML QUE ES EL BOTON Y NO FUNCIONA FALTA DATOS MAL EXPLICADO.

AVECES ES CONVENIENTE CONTRATAR UN DISEÑADOR WEB Y NO SER TAN RATA INTENTANDO ARMARLA UNO MISMO PORQUE EN INTERNET COMO SIEMPRE TODO ESTA INCOMPLETO. APRENDI VARIAS COSAS PERO ME QEUDARON VARIAS DUDAS.

Benjamin

18/6/2014
Poner el botón como hipervinculo
Si quieren hacer que el botón los dirija a una pagina este es el codigo
<button>

<a href=https://www.google.com.mx><input type="button" value="Boton"></a>

</button>

may

27/6/2014
colavoracion
es que debo de hacer una calculadora y tengo el siguiente código que esta bien pero necesito que cuando oprima un numero me lo muestre en la pantalla de la calculadora. no se que comando ponerle

<input name="pantalla" type="text" class="pantalla" readonly="readonly" />

<div class="operaciones">
<input name="suma" type="button" class="boton" value="+" />
<input name="resta" type="button" class="boton" value="-" />
<input name="multiplicacion" type="button" class="boton" value="*" />
<input name="division" type="button" class="boton" value="/" click="mostrarenpantalla("/")" />

</div>

<div class="numeros">

<input name="nueve" type="button" class="boton" value="9" />
<input name="ocho" type="button" class="boton" value="8" />
<input name="siete" type="button" class="boton" value="7" />
<br>
<input name="seis" type="button" class="boton" value="6" />
<input name="cinco" type="button" class="boton" value="5" />
<input name="cuatro" type="button" class="boton" value="4" />
<br>
<input name="tres" type="button" class="boton" value="3" />
<input name="dos" type="button" class="boton" value="2" />
<input name="uno" type="button" class="boton" value="1" />
<br>
<input name="cero" type="button" class="boton" value="0" />


</div>

MAY

27/6/2014
COLAVORACION
QUIEN ME PUEDA COLABORAR CON LO ANTERIOR LE AGRADEZCO

Nocturno

01/9/2014
codigo
por favor necesito saber quien me puede mandar un formulario con HTML, pero no html5 gracias

Stuardo

08/12/2014
descargar
y si necesito que el botón descargue un archivo de mi servidor? cómo sería el código? gracias!