HTML button

La etiqueta <button> en HTML es utilizada para crear un botón interactivo en una página web. El botón puede tener una etiqueta de texto dentro de él y puede ser usado para enviar datos a un servidor, llamar a una función JavaScript o simplemente como un enlace.

Ejemplo de uso

Un ejemplo de cómo utilizar la etiqueta <button> en HTML es el siguiente:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br><br>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se crea un formulario con dos campos de texto y dos botones. El primer botón tiene el atributo type establecido como “submit” y tiene la función de enviar el formulario al servidor. El segundo botón tiene el atributo type establecido como “reset” y tiene la función de reiniciar los campos del formulario a sus valores predeterminados.

Es importante mencionar que el contenido que se encuentra dentro de la etiqueta <button> es el texto que se mostrará en el botón, por ejemplo, el texto “Submit” y “Reset” en el ejemplo anterior.

Atributos

Los atributos más comunes utilizados en la etiqueta <button> son:

• type: Especifica el tipo de botón. Puede ser “submit” (enviar formulario), “reset” (reiniciar formulario) o “button” (botón normal). El valor predeterminado es “submit”.

• name: Especifica un nombre para el botón, que se utilizará para identificarlo en el lado del servidor cuando se envía el formulario.

• value: Especifica el valor que se enviará al servidor cuando se envía el formulario.

• disabled: Define si el botón está deshabilitado o no. Un botón deshabilitado no puede ser presionado.

• form: Especifica a qué formulario pertenece el botón.

• formaction: Especifica la URL a la cual se enviará el formulario cuando se presiona el botón.

• formmethod: Especifica el método HTTP (GET o POST) que se utilizará para enviar el formulario.

• autofocus: Define si el botón debe tener el foco automáticamente al cargar la página.

• formnovalidate: Define si el formulario debe ser enviado sin validar.

• formtarget: Especifica a dónde se abrirá el resultado de enviar el formulario.

• accesskey: Especifica una tecla de acceso para el botón.

Además de los atributos mencionados anteriormente, la etiqueta <button> de HTML5 también admite los atributos globales de HTML, como id, class, style, title, entre otros.

Estos atributos se utilizan para especificar información adicional sobre el botón, como su identificador único, su clase CSS, su estilo y su descripción.

Ejemplo

Aquí te dejo un ejemplo completo de cómo utilizar algunos de los atributos de la etiqueta <button> de HTML:

<form action="enviar.php" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
  <br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br><br>
  <button type="submit" class="submit-button" title="Enviar formulario" accesskey="s">Submit</button>
  <button type="reset" disabled>Reset</button>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea un formulario con dos campos de texto y dos botones. El primer botón tiene el atributo type establecido como “submit”, la clase “submit-button” para aplicar un estilo CSS específico y un título “Enviar formulario” para mostrar un mensaje al pasar el cursor sobre el botón.

También se estableció un atributo “accesskey” con valor “s” para poder acceder al botón con la tecla S. El segundo botón tiene el atributo type establecido como “reset” y está deshabilitado.

Es importante mencionar que este es solo un ejemplo y que puedes usar cualquiera de los atributos mencionados anteriormente según tus necesidades y requerimientos.