Elemento button (type=button)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento button, teniendo el valor "button" en su atributo type, instruye al navegador a proveer un botón regular que no tiene asociada ninguna acción. La etiqueta de un botón button es representada por el contenido del elemento.

Cuando el elemento button es declarado con el valor "button" en su atributo type, la acción que lleva a cabo cuando es presionado, es usualmente provista por un programa. Si el botón no es asociado a un programa, no llevará a cabo ninguna acción al ser presionado.

En contraste con el elemento input (type=button), este tipo de botón puede tener otros elementos no interactivos como contenido.

Ejemplos

En el siguiente ejemplo veremos como el elemento button es representado por el navegador. Para este primer ejemplo, agregaremos únicamente texto regular dentro de sus etiquetas.

<form action="../../form-result.php">
  <p>
    Usuario: <input type="text" name="usuario">
    <button type="button">Estoy en huelga...</button>
  </p>
</form>

Usuario:

Como predicho, el elemento button de tipo "button" no hizo nada al ser presionado, lo cual es exactamente lo que se espera de este tipo de botón. Ahora, asociaremos una acción al botón mediante un programa que cambiará el fondo del párrafo que lo contiene. Para este propósito, usaremos el evento onclick.

<p><button type="button" onclick="changeColor(this.parentNode)">Presióname, y cambiaré el color de mi contenedor...</button></p>

Nuestro último ejemplo mostrará la característica especial del elemento button, la cual le permite contener otros elementos no interactivos. Esta es una de las diferencias principales que tiene con el elemento intput (type=button).

<button type="button">En los <i>ejemplos</i> podemos ver<br>al elemento <b>button</b> en acción...</button>

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<button type="button" onclick="revisarBD()" autofocus>Revisar base de datos</button>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<button type="button" disabled>Presióname... si puedes!</button>

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<form id="formulario1" action="../../form-result.php">
  <p>Apellido: <input type="text" name="apellido"></p>
</form>
<button type="button" form="formulario1">Enviar!</button>

Apellido:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

Ejemplo

<form action="../../form-result.php">
  <p>
    Usuario: <input type="text" name="usuario">
    <button type="button" name="botoncool" value="pressed" onclick="enviarFormulario()">Enviar</button>
  </p>
</form>

type

Un valor que indica la conducta esperada del botón. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas) que decidirán la acción predeterminada que llevará a cabo el botón cuando sea presionado:

  • button: ninguna acción es asociada al control. La conducta de este tipo de botones es habitualmente provista por programas.
  • reset: los controles del formulario asociado son restaurados a sus valores iniciales.
  • submit: el formulario asociado es enviado. Este es el valor por defecto.
  • menu: el menú contextual asociado a este botón es desplegado.

Cuando este atributo no está presente, el botón se comporta como si el atributo tuviera el valor "submit".

Ejemplo

<button type="button">Presióname</button>

value

Un valor para el control. Este valor será enviado por el navegador al agente procesador, emparejado con el contenido del atributo name. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

El par nombre-valor de un botón es enviado, con el resto de los datos en el formulario, sólo si el botón ha sido utilizado para enviar el formulario.

Ejemplo

<form action="../../form-result.php">
  <p>
    Código postal: <input type="text" name="codigopostal">
    <button type="button" name="botoncool" value="presionado" onclick="enviarFormulario()">Enviar</button>
  </p>
</form>

Código postal:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.