Formulario - Botones

Un botón en un formulario nos permite realizar una acción con el formulario que lo contenga, existen varios tipos de botones pero 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).

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 :

<input type="submit" value="Enviar este formulario" />.

Esta forma de escritura es una forma abreviada equivalente a:

Ambos códigos producen el mismo resultado, pero es más habitual usar la primera forma (abreviada) que la segunda en este tipo de elementos (y en otros). En el ejemplo anterior, simplemente lo que ocurrirá al pulsar sobre el botón ‘Enviar este formulario’ es que el navegador irá a la página ‘accion.php’ y recibirá los datos que pudiera llevar el formulario. Si en vez de accion.php escribiéramos simplemente accion.php la direccion accion.php se buscaría dentro del mismo directorio donde se encontrara el archivo html.

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.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios </title>
</head>
<body>
<form method="post" action"registrar35.php">
Ingrese su nombre: <input type="text" name="nombre" size="20">
<br>
<input type="submit" value="Enviar este formulario" />
<input type="reset" value="Borrar este formulario" />
</form>
</body>
</html>

Ver ejemplo

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.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios </title>
</head>
<body>
<form method="post" action"registrar35.php">
Ingrese su nombre: <input type="text" name="nombre" size="20">
<br>
<button type="submit" ><img src="imagenes/enviar.gif" alt="enviar"></button>
<button type="reset" ><img src="imagenes/borrar.gif" alt="borrado"></button> </form>
</body>
</html>

Ver ejemplo

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.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="post" action="">
<button type="submit">El <b>tag HTML type button</b><br />
permite contenido HTML en su interior.
</button>
</form>
</body>
</html>

Ver ejemplo