Elemento button en HTML

El elemento html button representa un botón que se puede presionar. Ejemplo de uso del elemento <button>:

< button  name = "button" > haga clic aquí </ button >

Etiqueta html button

Clasificaciones de contenido	Elemento organizador, elemento normal, elemento interactivo …
Contenido permitido	Contenido ordinario.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
elementos del padre	Cualquier elemento que acepte contenido normal.
Interfaz DOMO	`HTMLButtonElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento html button se pueden utilizar propiedades globales.

`autofoucs`

Esta propiedad booleana nos permite especificar que queremos que el foco se mueva a este botón al cargar la página a menos que el usuario lo cambie (por ejemplo, escribiendo un elemento de entrada diferente).

Esta propiedad solo se puede usar en un elemento relacionado con el formulario en el documento. Ejemplo de uso de la propiedad autofoucs para enfocar automáticamente este botón cuando el navegador completa la carga de una página:

< button  name = "button"  autofocus > Haga clic aquí </ button >

`disabled`

Esta propiedad booleana indica que el usuario no puede interactuar con este botón, y si no se especifica ningún valor para esta propiedad, heredará su valor del elemento que lo contiene como el elemento <fieldset>, y si no hay ningún elemento que contenga este elemento que tenga la propiedad disabled, el botón se activará.

Ejemplo de uso de la propiedad disabled para deshabilitar este botón de forma predeterminada:

< button  name = "button"  disabled > No se puede presionar aquí </ button >

`form`

Esta propiedad determina a qué forma pertenece este botón, y el valor de esta propiedad debe ser un identificador de id elemento <form> en el propio documento. Si no se establece el valor de esta propiedad, el botón se asociará con su elemento <form> padre, si lo hubiera.

Esta propiedad le permite vincular elementos <button> a elementos <form> en cualquier parte del documento, pero un elemento <button> dentro de un <form> elemento no se puede vincular a <form> otro elemento. Ejemplo de uso de la propiedad form para especificar que este botón pertenece al formulario con un identificador form1:

< form  action = "action_page.php"  method = "get"  id = "form1" > 
  name: < input  type = "text"  name = "name" > 
</ form > 
< button  type = "submit"  form = "form1 " > Enviar </ button >

`fromaction`

El URI del programa que procesa la información enviada a través de este botón. Si se especifica un valor para esta propiedad, anulará el valor de la propiedad action del formulario al que pertenece este botón.

Un ejemplo de cómo usar la propiedad fromaction para cambiar la página que procesará los datos de este formulario, mientras usa la propiedad form como mencionamos anteriormente:

< form  action = "action_page.php"  method = "get"  id = "form1" > 
  nombre: < input  type = "text"  name = "name" > 
</ form >

< button  type = "submit"  form = "form1" > enviar </ button > 
< button  type = "submit"  form = "form1"  formaction = "action_page2.php" > enviar a la segunda página </ button >

`formenctype`

Si este botón es un botón de envío, esta propiedad especificará qué tipo de contenido se utilizará para enviar los datos del formulario al servidor. Los posibles valores son:

application/x-www-form-urlencoded: El valor predeterminado si no se especifica ningún valor para esta propiedad.
multipart/form-data: Use este valor si está usando el elemento <input> en el formulario y establece la propiedad type en file.
text/plain.

Si se especifica un valor para esta propiedad, anulará el valor de la propiedad enctype del formulario al que pertenece este botón.

`formmethod`

Si este botón es un botón de envío, esta propiedad especificará qué método de envío HTTP debe utilizar el navegador para enviar el formulario. Los posibles valores son:

post: Envía datos de formulario dentro del cuerpo de una solicitud HTTP.
get: Asigne los datos del formulario al URI de destino, use el código? para separar el nombre de la página de los datos y luego envíe el URI resultante al servidor. Utilice este método si su plantilla no tiene efectos secundarios y solo contiene caracteres ASCII.

Si se especifica esta propiedad, anulará el valor de la propiedad del method modelo al que pertenece este arroz.

Un ejemplo del uso de la propiedad formmethod para cambiar la forma en que se envían los datos de este formulario, mientras se usa la propiedad y la form propiedad formaction como se mostró anteriormente:

< form  action = "action_page.php"  method = "get"  id = "form1" > 
  nombre: < input  type = "text"  name = "name" > 
</ form >

< button  type = "submit"  form = "form1" > enviar </ button > 
< button  type = "submit"  form = "form1"  formaction = "action_page2.php"  formmethod = "post" > enviar a la segunda página usando POST </ button >

`formnovalidate`

Si el botón es un botón de envío, este booleano dice que el navegador no debe validar los campos del formulario. Si se especifica un valor para esta propiedad, anulará el valor de la propiedad novalidate del formulario al que pertenece este botón.

Un ejemplo de uso de la propiedad para formnovalidate que el navegador no verifique los datos de este formulario, mientras usa la propiedad form como explicamos anteriormente:

< form  action = "action_page.php"  method = "get"  id = "form1" > 
  nombre: < input  type = "text"  name = "name"  required > 
</ form >

< button  type = "submit"  form = "form1" > enviar </ button > 
< button  type = "submit"  form = "form1"  formnovalidate > enviar sin validación </ button >

`formtarget`

Si el botón es un botón de envío, esta propiedad toma una palabra reservada que indica la ubicación predeterminada para mostrar la salida cuando hace que los enlaces o elementos de formulario vayan a otra página si esos elementos no especifican un valor para esta propiedad. Si se especifica un valor para esta propiedad, anulará el valor de la propiedad target del formulario al que pertenece este botón.

Las siguientes palabras reservadas tienen significados especiales:

‎_self: Muestra el resultado de la ubicación de la página actual. Este es el valor predeterminado si no se especifica ningún otro valor.
_blank: Vea la página en una nueva ventana.
_parent: Page mostrará el lugar de la página padre a la que pertenece el iframe, y si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.
‎_top: el ancho de la página es un lugar en la parte superior de una página en la jerarquía (es decir, la página que es la página principal directa o indirecta de la página actual y no tiene una página principal). Si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.

`name`

El nombre del botón, que se enviará con los datos del formulario.

`type`

Tipo de botón, esta propiedad toma uno de los siguientes valores:

submit: Al hacer clic en este botón, se enviarán los datos del formulario al servidor. Este es el valor predeterminado si no se especifica ningún otro valor, o si el valor se ha cambiado dinámicamente a nulo o no válido.
reset: Al presionar este botón se restablece todos los elementos del modelo a sus valores iniciales.
button: Este botón no tendrá un comportamiento predeterminado, pero puede estar asociado con el código que se ejecuta cuando ocurre el evento push.
menu: Este botón abrirá un menú emergente definido por un elemento <menu>.

`value`

El valor inicial del botón, que define el valor que se asociará con el botón cuando se envíen los datos del formulario, que se pasará al servidor.

Notas

Los elementos de coordinación <button> mucho más fácil para coordinar los elementos <input>, como se puede agregar contenido HTML como en el interior <em> y <strong> aún el elemento <img>, y se puede utilizar la pseudo-elementos ‎after y en el fin de mostrar el elemento que desee, mientras que los elementos no sólo aceptan valores de texto before <input>