 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Botones HTML con la etiqueta BUTTON
Como crear botones HTML más variados utilizando la etiqueta BUTTON, que permite colocar imágenes y otros contenidos en el botón.
10/9/08 - Vamos a ver una etiqueta HTML que sirve para hacer botones, de la que no habíamos hablado antes en nuestro manual de HTML http://www.desarrolloweb.com/manuales/21/. 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 http://www.desarrolloweb.com/articulos/650.php 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.
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.
- 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.
- 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.
+ 1 categoria relacionada
+ 1 comentario (Añadir)
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
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()" />
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
