Etiqueta HTML <button>
La etiqueta <button> se utiliza para crear botones clicables en la página web. La diferencia entre estos elementos y los botones creados con la etiqueta <input> es que puedes colocar contenido (imágenes o texto) dentro de <button>.
TIP
Utiliza el elemento <input> para definir un botón dentro de un formulario HTML, ya que los navegadores muestran el contenido de la etiqueta <button> de manera diferente.
Sintaxis
La etiqueta <button> se escribe en pares. El contenido se coloca entre las etiquetas de apertura (<button>) y cierre (</button>).
Ejemplo de la etiqueta HTML <button>:
Ejemplo de la etiqueta HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>Uso de estilos CSS
Puedes aplicar estilos CSS a la etiqueta <button> para cambiar la apariencia del botón, su tamaño, color, fuente del texto, etc.
Ejemplo de la etiqueta <button> con estilos CSS:
Ejemplo de la etiqueta HTML <button> con propiedades de color y fuente CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" style="color: red;"><b>HTML Book </b></button>
<hr />
Button with increased font size
<button type="button" style="font: bold 14px Arial;">Download the book </button><br />
</body>
</html>Resultado
Atributos
TIP
La etiqueta <button> no tiene atributos obligatorios; sin embargo, recomendamos siempre usar el atributo type="button" si la etiqueta se utiliza como un botón normal.
Nota: Si se omite el atributo type y el botón se coloca dentro de un formulario HTML, su valor predeterminado es type="submit".
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
autofocus | autofocus | Indica que el botón debe recibir el foco después de cargar la página. |
disabled | disabled | Desactiva el botón. (Se utiliza cuando el botón debe activarse después de realizar alguna acción.) |
form | form_id | Especifica uno o más formularios a los que pertenece el botón. Si el botón tiene varios formularios, sus identificadores (form_id) deben separarse con espacios. |
formaction | URL | Define la dirección a la que se enviarán los datos del formulario después de hacer clic en el botón. (Solo se utiliza para botones con el atributo type="submit"). |
formenctype | application/x-www-form-urlencoded | Define cómo se deben codificar los datos del formulario al enviarlo. (Solo se utiliza para type="submit"). Todos los símbolos se codifican antes de enviar el formulario (valor predeterminado). |
multipart/form-data | Codifica los datos como MIME multipart. | |
text/plain | Los espacios se reemplazan por el signo "+", pero los símbolos no se codifican. | |
formmethod | get | Define el método de la solicitud HTTP que se utilizará al enviar un formulario (solo para type="submit"). Pasa los datos del formulario en la barra de direcciones ("nombre = valor"), que se agregan a la URL de la página después del signo de interrogación y se separan por un ampersand (&). |
post | El navegador se comunica con el servidor y envía los datos para su procesamiento. | |
formnovalidate | formnovalidate | Indica que los datos del formulario no deben validarse al enviarlos (solo para type="submit"). |
formtarget | _blank | Especifica dónde se mostrará la respuesta después de enviar el formulario (solo para type="submit"). Abre la respuesta en una nueva ventana. |
_self | Abre la respuesta en la ventana actual. | |
_parent | Abre la respuesta en el marco principal. | |
_top | Abre la respuesta en una ventana de ancho completo. | |
name | name | Define el nombre del botón. |
type | button | Define un botón normal. |
reset | Botón que borra los datos de entrada del formulario. | |
submit | Botón para enviar los datos del formulario. | |
value | text | Define el valor del botón. |
La etiqueta <button> también admite los Atributos Globales y los Atributos de Eventos.
¿Cómo agregar texto alternativo a un botón con una imagen?
Para agregar texto alternativo a un botón con una imagen, puedes usar el atributo alt. Aquí tienes un ejemplo:
¿Cómo agregar texto alternativo a un botón con una imagen?
<button type="button">
<img src="button-image.png" alt="Button Label">
</button>En este ejemplo, se ha agregado el atributo alt al elemento img dentro del elemento button. El valor del atributo alt debe ser una breve descripción de la imagen, la cual será leída por lectores de pantalla en lugar de la imagen misma.
¿Cómo agregar un enlace a un botón?
Para crear un enlace clicable que parezca un botón, utiliza un elemento <a> estilizado con CSS. Envolver un <button> dentro de un <a> no es válido en HTML5. Aquí tienes el enfoque correcto:
¿Cómo agregar un enlace a un botón?
<a href="https://example.com" class="button-link">
Button Label
</a>En este ejemplo, el elemento <a> está estilizado para parecer un botón. Cuando el usuario hace clic en él, será redirigido a la URL enlazada.
Práctica
¿Cuáles son algunas propiedades y usos de la etiqueta HTML <button>?