El elemento html button representa un botón que se puede presionar. Ejemplo de uso del elemento :
< button name = "button" > haga clic aquí
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í
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 , 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í
form
Esta propiedad determina a qué forma pertenece este botón, y el valor de esta propiedad debe ser un identificador de id elemento en el propio documento. Si no se establece el valor de esta propiedad, el botón se asociará con su elemento padre, si lo hubiera.
Esta propiedad le permite vincular elementos a elementos en cualquier parte del documento, pero un elemento dentro de un elemento no se puede vincular a 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" > < button type = "submit" form = "form1 " > Enviar
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" > < button type = "submit" form = "form1" > enviar < button type = "submit" form = "form1" formaction = "action_page2.php" > enviar a la segunda página
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 elementoen el formulario y establece la propiedadtypeenfile.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" > < button type = "submit" form = "form1" > enviar < button type = "submit" form = "form1" formaction = "action_page2.php" formmethod = "post" > enviar a la segunda página usando POST
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 > < button type = "submit" form = "form1" > enviar < button type = "submit" form = "form1" formnovalidate > enviar sin validación
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_selfmisma.- _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
_selfmisma.
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
.
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 mucho más fácil para coordinar los elementos , como se puede agregar contenido HTML como en el interior y aún el elemento after y en el fin de mostrar el elemento que desee, mientras que los elementos no sólo aceptan valores de texto before
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML
