<button> en HTML5El elemento <button> en HTML5 es una etiqueta utilizada para crear botones interactivos en una página web. Estos botones pueden ser utilizados para enviar formularios, iniciar scripts, o facilitar cualquier otra interacción del usuario. A continuación, describo detalladamente cada uno de los atributos que puede aceptar el elemento <button>:
type: Define el tipo de botón. Los valores posibles son:
submit: Envía los datos del formulario.reset: Resetea los campos del formulario a sus valores iniciales.button: No tiene comportamiento por defecto; se usa comúnmente con JavaScript.<button type="submit">Enviar</button>disabled: Establece si el botón está deshabilitado, es decir, si no puede ser clicado ni enfocado. Este atributo es booleano.
<button disabled>No me puedo presionar</button>form: Este atributo asocia el botón con un formulario específico. Puede ser importante cuando los botones están fuera de un <form>.
<button form="formulario1">Envía el formulario1</button>formaction: Define la URL a donde se envían los datos del formulario cuando el botón es del tipo submit. Este atributo anula la acción definida en el atributo "action" del formulario.
<button type="submit" formaction="/ruta_especifica">Enviar a URL diferente</button>formenctype: Define el tipo de codificación que se utilizará al enviar datos del formulario al servidor. Solo se aplica a botones de tipo submit. Los valores posibles son application/x-www-form-urlencoded, multipart/form-data, y text/plain.
<button type="submit" formenctype="multipart/form-data">Enviar con enctype</button>formmethod: Especifica el método HTTP (GET o POST) que se usará al enviar los datos del formulario. Solo se aplica a botones de tipo submit.
<button type="submit" formmethod="POST">Enviar por POST</button>formnovalidate: Indica que no se debe validar el formulario cuando se envía. Este atributo es booleano y solo se aplica a botones de tipo submit.
<button type="submit" formnovalidate>Enviar sin validar</button>formtarget: Define el destino para mostrar la respuesta enviada por el formulario. Los valores pueden ser _self, _blank, _parent, _top o un nombre de ventana específico.
<button type="submit" formtarget="_blank">Abrir en nueva pestaña</button>name: Asigna un nombre al botón, que es útil para identificar el botón en scripts del lado del servidor y del cliente.
<button name="miBoton">Click me</button>value: Define un valor específico que será enviado con el formulario cuando el botón es del tipo submit.
<button type="submit" value="valorEnviado">Enviar</button><button> en HTML5 con Ejemplos Sencillos<!DOCTYPE html>
<html>
<head>
<title>Botón de Enviar</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="submit">Enviar</button>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Botón de Resetear</title>
</head>
<body>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="reset">Resetear</button>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Botón y JavaScript</title>
</head>
<body>
<button type="button" onclick="alert('¡Hola!')">Presióname</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Botón Deshabilitado</title>
</head>
<body>
<button disabled>No me puedes presionar</button>
</body>
</html>Estos ejemplos demuestran cómo se puede utilizar el elemento <button> en diversas situaciones. Es importante recordar que el botón no solo es una herramienta poderosa para formularios, sino también un componente crucial para mejorar la interacción del usuario en las aplicaciones web.