Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: botón enviar el formulario (envío o submit) y botón poner todos los campos a sus valores iniciales (restablecimiento o reset). Normalmente un formulario contendrá, como mínimo, un botón (el botón enviar). Además de estos dos tipos de botones existe un botón especial al que denominamos “botón de contenido”, que no posee ninguna acción predefinida. El resultado de pulsar este botón o acción a ejecutar deberá ser especificada en cada caso.
Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).
Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta <input … />. Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type = "submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
Fíjate que hemos escrito :Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen. En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para restablecer los campos a sus valores iniciales.
BOTONES DE IMAGEN (IMAGE)
Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1" . En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastará con recuperar la información útil y ya está.
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca). Si ahora, hiciéramos click sobre el botón de imagen, podríamos observar como se envían las coordenadas donde hicimos el click.
BOTONES DE CONTENIDO (BUTTON)
Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type").
Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc.
Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset" en su atributo "type".
Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar ahora cómo para centrarnos en el HTML). Un valor submit hará que el botón funcione como un botón de envío. Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario.