Elemento button (type=submit)

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 "submit" es su atributo type, representa un botón que, cuando es presionado, envía el formulario (form) al que pertenece. La etiqueta de un botón button es representada por el contenido del elemento.

Con el arribo de HTML5, varios atributos nuevos han sido agregados a este elemento (formaction, formenctype, formmethod, formnovalidate y formtarget) que definen y anulan ciertos parámetros relacionados a cómo el formulario debe ser enviado. Estos nuevos atributos pueden ser usados, por ejemplo, para proveer más de un botón de envío en un mismo formulario, y hacer que cada uno de ellos lleve a cabo un tipo diferente de envío.

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

Ejemplos

En el siguiente ejemplo crearemos un formulario (form) básico con un par de campos y un botón de envío. Aquí podrás ver y probar la funcionalidad del botón de envío: cuando lo presionas, el formulario es automáticamente enviado.

<form action="../../form-result.php" target="_blank">
  <p>Usuario: <input type="text" name="usuario"></p>
  <p>Contraseña: <input type="password" name="pass"></p>
  <p><button type="submit">Enviar formulario</button></p>
</form>

Usuario:

Contraseña:

Ahora proveeremos dos botones de envío en el mismo formulario, y haremos que cada uno realice un tipo distinto de envío. Mientras el primer botón usa la configuración por defecto declarada en el elemento form, el segundo anula algunos de los atributos originales y produce un envío mediante el método GET y sin validación de los datos.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Usuario: <input type="text" name="usuario" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{3,15}$" title="Un nombre de usuario apropiado debe comenzar con una letra, contener letras, números, guiones bajos y puntos, y tener entre 3 y 15 caracteres de longitud" required></p>
  <p>Contraseña: <input type="password" name="pass" pattern="[a-zA-Z0-9]{6,15}" title="Una contraseña válida debe estar compuesta por letras y/o números y tener una longitud entre 6 y 15 caracteres" required></p>
  <p>
    <button type="submit">Enviar</button>
    <button type="submit" formmethod="get" formnovalidate>Enviar sin validación</button>
  </p>
</form>

Usuario:

Contraseña:

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=submit).

<form action="../../form-result.php" target="_blank">
  <p>Buscar: <input type="search" name="cadenabusqueda"></p>
  <p><button type="submit">Envía <b>este</b> form<br>Ja! ja! ja!</button></p>
</form>

Buscar:

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="submit" autofocus>Enviar formulario</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" target="_blank">
  <p>
    Busca un ítem: <input type="search" name="itembuscado">
    <button type="submit" disabled>Buscar</button>
  </p>
</form>

Busca un ítem:

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" target="_blank">
  <p>Nombres: <input type="text" name="nombres"></p>
</form>
<p><button type="submit" form="formulario1">Enviar</button></p>

Nombres:

formaction

Un URI que indica la ubicación del programa responsable de la manipulación de los datos enviados por el formulario. Este programa está normalmente escrito en un lenguaje del lado servidor como ASP, PHP, Python, etc.

Este atributo es nuevo en HTML5 y, si está presente, anula al atributo action del elemento form. Esto permite a los autores proveer un formulario con dos o más botones que lleven a cabo diferentes tipos de envíos.

Ejemplo

<form target="_blank">
  <p>
    Tipo: <input type="text" name="tipo">
    <button type="submit" formaction="../../form-result.php">Enviar</button>
  </p>
</form>

Tipo:

formenctype

Un valor que especifica el método de codificación a utilizarse para los datos cuando el formulario es enviado. Existen tres valores posibles, insensibles a mayúsculas/minúsculas:

  • application/x-www-form-urlencoded: los espacios son reemplazados con signos más ("+") y los caracteres especiales son convertidos a valores HEX. Este es el valor por defecto.
  • multipart/form-data: no se aplica ninguna codificación. Este valor es necesario para la subida de archivos.
  • text/plain: solo los espacios son reemplazados por signos más ("+").

Recuerda que debes usar el valor "multipart/form-data" siempre que un archivo vaya a ser subido en el formulario. Sin esta configuración, la subida de archivos fallará.

Este atributo es nuevo en HTML5 y, si está presente, anula al atributo enctype del elemento form. Esto permite a los autores proveer un formulario con dos o más botones que lleven a cabo diferentes tipos de envíos.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre completo: <input type="text" name="nombrecompleto"></p>
  <p>Foto: <input type="file" name="foto"></p>
  <p>
    <button type="submit" formenctype="multipart/form-data">Enviar con foto</button>
    <button type="submit">Enviar sin foto</button>
  </p>
</form>

Nombre completo:

Foto:

formmethod

El método que deberían usar los navegadores para enviar la información del formulario. Existen tres valores posibles, insensibles a mayúsculas/minúsculas:

  • get: los datos se adjuntan al URL de la petición (el provisto en el atributo action). Los pares nombre-valor se organizan de la forma "nombre=valor" y se separan unos de otros con un signo "&". Toda esta cadena es sumada al URL de la petición, precedida por un signo de interrogación ("?"). Por ejemplo, una cadena GET podría ser: "resultados.php?usuario=john&pass=123456"
  • post: los datos se adjuntan al cuerpo de la petición.
  • dialog: específico para formularios dentro de un elemento dialog. Instruye al navegador a cerrar el cuadro de diálogo cuando el formulario es enviado. Los resultados del formulario deberían ser manipulados por programas.

Este atributo es nuevo en HTML5 y, si está presente, anula al atributo method del elemento form. Esto permite a los autores proveer un formulario con dos o más botones que lleven a cabo diferentes tipos de envíos.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>
    Ciudad: <input type="text" name="ciudad">
    <button type="submit" formmethod="get">Enviar con GET</button>
    <button type="submit" formmethod="post">Enviar con POST</button>
  </p>
</form>

Ciudad:

formtarget

Un valor que especifica dónde deberían cargarse los resultados del programa a cargo del procesamiento de los datos. Este valor puede ser un nombre de contexto de navegación (como el valor del atributo name de un iframe) o cualquiera de los siguientes valores (insensibles a mayúsculas/minúsculas):

  • _blank: en una nueva ventana/pestaña.
  • _parent: en el contexto padre inmediato.
  • _self: en el mismo contexto que contiene al formulario.
  • _top: en el más alto contexto de naveción (el contexto más exterior que contiene al formulario).

Este atributo es nuevo en HTML5 y, si está presente, anula al atributo target del elemento form. Esto permite a los autores proveer un formulario con dos o más botones que lleven a cabo diferentes tipos de envíos.

Ejemplo

<form action="../../form-result.php" method="post">
  <p>
    Grupo: <input type="text" name="grupo">
    <button type="submit" formtarget="_blank">Enviar</button>
  </p>
</form>

Grupo:

formnovalidate

Un valor booleano que instruye al navegador a no validar los datos del formulario durante su envío. Si este atributo toma los valores "formnovalidate" o la cadena vacía (""), o si simplemente está presente, el navegador debería omitir la validación del formulario durante el envío.

Este atributo es nuevo en HTML5 y, si está presente, anula al atributo novalidate del elemento form. Esto permite a los autores proveer un formulario con dos o más botones que lleven a cabo diferentes tipos de envíos.

Este atributo es parte de la API de validación de restricciones, una nueva característica que permite a los autores proveer validación de campos en los formularios con mínima intervención de la programación.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>
    Usuario: <input type="text" name="usuario" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{3,15}$" title="Un nombre de usuario apropiado debe comenzar con una letra, contener letras, números, guiones bajos y puntos, y tener entre 3 y 15 caracteres de longitud" required>
    <button type="submit">Enviar</button>
    <button type="submit" formnovalidate>Enviar sin validar</button>
  </p>
</form>

Usuario:

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" target="_blank">
  <p>
    Usuario: <input type="text" name="usuario">
    <button type="submit" name="botonenvio" value="presionado">Enviar</button>
  </p>
</form>

Usuario:

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="submit">Enviar datos</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" target="_blank">
  <p>
    Modelo: <input type="text" name="modelo">
    <button type="submit" name="botonenvio" value="presionado">Enviar</button>
  </p>
</form>

Modelo:

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.