Elemento button (type=reset)

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 "reset" en su atributo type, representa un botón que, cuando es presionado, restaura todos los campos del formulario (form) al cual pertenece, a sus valores iniciales. La etiqueta de un botón button es representada por el contenido del elemento.

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

La forma de establecer el valor inicial para un control varía de tipo en tipo. En general, el atributo value es el responsable de establecer el valor inicial, pero en algunos casos, los atributos checked o selected pueden tomar su lugar.

Ejemplos

En este ejemplo crearemos un formulario con un número de campos de diferentes tipos, cada uno de los cuales tiene un valor inicial. Adicionalmente se proveerá un boton de reinicio para comprobar su funcionalidad.

<form action="../../form-result.php">
  <p>Name: <input type="text" value="Your name"></p>
  <p><input type="checkbox" checked> Travel</p>
  <p><input type="checkbox"> Sports</p>
  <p><button type="reset">Reset</button></p>
</form>

Name:

Travel

Sports

Ahora veremos 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=reset).

<form action="../../form-result.php">
  <p>Nombre: <input type="text" value="Tu nombre"></p>
  <p><button type="reset">Restaurar <i>este</i> formulario es <b>super cool</b></button></p>
</form>

Nombre:

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="reset" autofocus>Restaurar</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

<form action="../../form-result.php">
  <p>
    Ciudad: <input type="text" name="ciudad" value="Manhattan">
    <button type="button" disabled>Rastáurame... si puedes</button>
  </p>
</form>

Ciudad:

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>Asistente: <input type="text" name="asistente"></p>
</form>
<button type="reset" form="formulario1">Restaurar formulario</button>

Asistente:

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

<button type="button" name="botonreinicio" value="Hola!">Restaurar</button>

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="reset">Restaurar formulario</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

<button type="reset" name="botonreinicio" value="Hola!">Restaurar</button>

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.