BOTONES DE ENVÍO (SUBMIT)
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.
<html>
<head>
<title>Ejemplo
del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="submit" value="Enviar
este formulario" />
</form>
</body>
</html>
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" las coordenadas serán enviadas en la forma
"boton1.x" y "boton1.y"). 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).
<html>
<head>
<title>Ejemplo del uso
de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<input name="boton1" type="image"
src="/images/aprenderaprogramar/imagen.png">
</form>
</body>
</html>
BOTONES DE
RESTABLECIMIENTO (RESET)
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.
<html>
<head>
<title>Ejemplo
del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com/accion.php">
<input type="text" name="texto1" value="Valor
por defecto" /><br />
<input type="checkbox" name="condiciones" checked="checked" />
Acepto las
condiciones<br />
<input type="reset"
value="Restablecer
todos los campos a su valor predeterminado" />
</form>
</body>
</html>
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.
<html>
<head>
<title>Ejemplo del uso de formularios -
aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="http://aprenderaprogramar.com">
<button type="submit">
El <b>tag HTML type button</b><br />
permite contenido HTML en su interior.
</button>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario