Saltar la navegación

El elemento button

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento <button>; añade lo siguiente justo encima de la etiqueta de cierre </form>:

El elemento <button> también acepta un atributo de type, que a su vez acepta uno de estos tres valores: submit, reset o button.

  • Un clic en un botón submit (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo action del elemento <form>.
  • Un clic en un botón reset restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.
  • Un clic en un botón button no hace... ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.

Nota:

También puedes usar el elemento <input> con el atributo type correspondiente para generar un botón, por ejemplo <input type="submit">. La ventaja principal del elemento <button> es que el elemento <input> solo permite texto sin formato en su etiqueta, mientras que el elemento <button> permite contenido HTML completo, lo que permite generar botones creativos más complejos.