El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:

submit

Envía los datos del formulario al servidor. Para los elementos <button>, omitir el atributo type (o introducir un valor de tipo no válido) da como resultado un botón de envío (_submit_).

reset

Restablece todos los controles de formulario a sus valores por defecto.

button

Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.

Además, el elemento <button> puede tomar un atributo type para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <button> propiamente admiten aplicación de estilo en mayor medida.

A continuación puedes encontrar ejemplos de cada tipo de botón <input>, junto con el tipo de botón equivalente.

Enviar

Reiniciar

Anónimo

Los botones siempre se comportan igual, independientemente de su usas un elemento <button> o un elemento <input>. Sin embargo, como puedes ver en los ejemplos, los elementos <button> te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <button> de apertura y cierre. Los elementos <input>, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo value y, por lo tanto, solo acepta contenido de texto sin formato.

Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.

Botón de imagen

El control botón de imagen se muestra exactamente como un elemento <img>, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.

Se crea un botón de imagen usando un elemento <input> con su atributo type establecido en el valor image. Este elemento admite exactamente el mismo conjunto de atributos que el elemento <img>, además de todos los atributos que admiten el resto de botones de formulario.

Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:

• La clave del valor X es el valor del atributo name seguido de la cadena de caracteres «_.x_».
• La clave del valor Y es el valor del atributo name seguido de la cadena de caracteres «_.y_».

Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método get, verás los valores añadidos a la URL de la manera siguiente:

Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo Enviar los datos del formulario.