La etiqueta HTML <button> se usa para crear un control de botón en un documento HTML.
Un elemento <button> permite al usuario enviar formularios e interactuar con el documento haciendo clic en el botón.
Aunque esta etiqueta a menudo está anidada dentro de un elemento <form>, esto no es un requisito. También puede estar vinculada a un formulario en otro lugar del documento con el atributo form. También se puede usar como un control independiente (es decir, sin estar asociado a ningún elemento <form>).
Sintaxis
La etiqueta <button> se escribe como <button></button> con su contenido entre la etiqueta de inicio y la etiqueta de fin.
El contenido actúa como la etiqueta del botón (es decir, cualquier cosa escrita entre la etiqueta de inicio y la etiqueta de fin se muestra en el botón). El elemento <button> acepta una serie de atributos que te permiten personalizar la apariencia, el comportamiento y más del botón.
A continuación se muestra una lista completa de los atributos que se pueden usar con la etiqueta <button>.
Aquí tienes un ejemplo de la sintaxis básica para presentar un elemento <button>:
<button>Haz clic aquí</button>Ejemplos
Uso básico de la etiqueta
Aquí usamos un botón independiente (es decir, no está asociado a un formulario). Mantenemos las cosas simples usando JavaScript para mostrar un cuadro de alerta cuando el usuario hace clic en el botón.
<button onclick="JavaScript:alert('¡Bien hecho!')">¡Haz clic en mí!</button>See the Pen button-ejemplo-básico by Alex (@htmldesdecero) on CodePen.
Botón anidado dentro de un formulario
Aquí anidamos el botón dentro de un elemento <form>, lo que hace que el botón forme parte del formulario.
<form action="/html/tags/html_form_tag_action.cfm" method="get" target="_blank">
Nombre:
<input type="text" name="first_name" maxlength="100">
<br />
Apellido:
<input type="text" name="last_name" maxlength="100">
<button type="submit">Enviar</button>
</form>See the Pen button-ejemplo-form by Alex (@htmldesdecero) on CodePen.
Botón asociado a un formulario
Aquí asociamos el botón a un elemento <form> usando el atributo form (es decir, insertamos el ID del formulario como valor). Al hacer esto, no necesitamos anidar el elemento <button> dentro del elemento <form>.
<form action="/html/tags/html_form_tag_action.cfm" method="get" target="_blank" id="my_form">
Nombre:
<input type="text" name="first_name" maxlength="100">
<br />
Apellido:
<input type="text" name="last_name" maxlength="100">
</form>
<p>Otro contenido...</p>
<button type="submit" form="my_form">Enviar</button>See the Pen button-anidado-form by Alex (@htmldesdecero) on CodePen.
Acerca de los elementos asociados a formularios
Algunos elementos HTML pueden tener un “propietario de formulario”. Esto significa que el elemento está asociado al formulario y se puede usar como si fuera parte de ese formulario. Esto puede ser útil si tienes uno o más formularios en una página y el elemento no está anidado dentro de ninguno de ellos.
Los siguientes elementos HTML son “elementos asociados a formularios”:
buttonfieldsetinputkeygenlabelobjectoutputselecttextareaimg
La capacidad de asociar un control de formulario con un formulario puede superar la falta de soporte para elementos <form> anidados.
Aunque los elementos <form> anidados no son compatibles con la especificación HTML, es posible que un script pueda manipular el DOM de una manera que resulte en elementos <form> anidados.
La especificación HTML5 reconoce esta situación y parece hacer concesiones para ella, al mismo tiempo que advierte sobre la falta de conformidad de los elementos <form> anidados.
Botón con una imagen
Puedes incluir un elemento <img> dentro de tu elemento <button> para mostrar la imagen en el botón. Todavía puedes agregar texto al botón, lo que resulta en una combinación de imagen y texto.
Como este:
<button onclick="JavaScript:alert('¡Te encantará este libro!')">
<img src="https://htmldesdecero.es/medios/2024/09/book13.gif" alt="Leer libro">
<br>¡Leer libro!</button>See the Pen button-imagen by Alex (@htmldesdecero) on CodePen.
Atributos
Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debería aparecer o comportarse el elemento.
El elemento <button> acepta los siguientes atributos.Atributo Descripción autofocusAutomáticamente pone el foco en este control cuando se carga la página. Esto permite al usuario comenzar a usar el control sin tener que seleccionarlo primero. No debe haber más de un elemento en el documento con el atributo `autofocus` especificado. Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con mayúsculas y minúsculas con el nombre canónico del atributo, sin espacios en blanco al principio o al final (es decir, `autofocus` o `autofocus=”autofocus”`).
Valores posibles:
[Cadena vacía] autofocusdisabledDeshabilita el control. Por lo tanto, si el usuario intenta usar el control, no sucederá nada. Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con mayúsculas y minúsculas con el nombre canónico del atributo, sin espacios en blanco al principio o al final (es decir, `disabled` o `disabled=”disabled”`). Valores posibles:
[Cadena vacía] disabledformEspecifica el ID de un formulario al que pertenece este control. Valores posibles:
[El ID de un elemento de formulario en el `Document` propietario del elemento]formactionEspecifica la URL del archivo que procesará el control cuando se envíe. formenctypeEspecifica el tipo de contenido utilizado para codificar el conjunto de datos del formulario cuando se envía al servidor. Valores posibles: application/x-www-form-urlencoded (predeterminado) multipart/form-data (use esto cuando cargue archivos) text/plain (use esto cuando cargue archivos)formmethodEspecifica el método HTTP que se utilizará cuando se envíe el control. Valores posibles: get (los datos del formulario se anexan a la URL cuando se envían) post (los datos del formulario no se anexan a la URL) dialog (cierra el cuadro de diálogo en el que se encuentra el formulario, si lo hay, y de lo contrario no envía.)formnovalidateEspecifica que el formulario no debe validarse durante el envío. Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con mayúsculas y minúsculas con el nombre canónico del atributo, sin espacios en blanco al principio o al final (es decir, `novalidate` o `novalidate=”novalidate”`).
Valores posibles:
[Cadena vacía] novalidateformtargetEspecifica el contexto de navegación para cargar el destino indicado en el atributo `action`. Valores posibles: _blank _self _top _parentmenuSi el atributo `type` tiene un valor de `menu`, el atributo `menu` debe proporcionarse para especificar el menú del elemento. El valor debe ser el ID de un elemento “ en el mismo subárbol de inicio cuyo atributo `type` está en el estado del menú emergente.
El atributo `menu` solo se puede usar cuando el atributo `type` tiene un valor de `menu`.nameAsigna el nombre del control. typeEspecifica el tipo de botón. Valores posibles: submit Envía el formulario. Este es el valor predeterminado. reset Restablece el formulario. button No hace nada. Puedes usar JavaScript para hacer que el control realmente haga algo. menu Muestra un menú. Cuando se usa este valor, debes especificar el menú usando el atributo `menu` (ver arriba).valueAsigna un valor inicial al control. Un botón (y su valor) solo se incluye en el envío del formulario si el botón mismo se usó para iniciar el envío del formulario.
Atributos Globales
Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <button>, así como con todas las demás etiquetas HTML.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para una explicación completa de estos atributos, consulta los atributos globales de HTML 5.
Controladores de Eventos
Los atributos de contenido del controlador de eventos te permiten invocar un script desde tu HTML. El script se invoca cuando ocurre un cierto “evento”. Cada atributo de contenido del controlador de eventos trata un evento diferente.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
La mayoría de los atributos de contenido del controlador de eventos se pueden usar en todos los elementos HTML, pero algunos controladores de eventos tienen reglas específicas sobre cuándo se pueden usar y a qué elementos son aplicables.
