Codificación aprenderaprogramar.com: CU00724B
BOTONES EN FORMULARIOS
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).
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.
|
<!DOCTYPE html> <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> |
Fíjate que hemos escrito <input type="submit" value="Enviar este formulario" />. Esta forma de escritura es una forma abreviada equivalente a: <input type="submit" value="Enviar este formulario"> </input>
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 http://aprenderaprogramar.com/accion.php escribiéramos simplemente accion.php la direccion accion.php se buscaría dentro del mismo directorio donde se encontrara el archivo 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.
|
<!DOCTYPE html> <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> |
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" 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).
|
<!DOCTYPE html> <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> |
Si ahora, hiciéramos click sobre el botón de imagen, podríamos observar como se envían las coordenadas donde hicimos el click.
Ejemplo de cómo se reflejaría en la ruta que muestra el navegador los datos correspondientes a valores x e y de coordenadas: http://www.aprenderaprogramar.com/?boton1.x=115&boton1.y=31
Ten en cuenta que además de las coordenadas se enviará toda la información contenida en el formulario. Por ejemplo si en el formulario tuviéramos un campo nombre donde se ha introducido “Carlos” y un campo fruta donde se ha introducido “Fresa”, la url de destino sería similar a esta: http://aprenderaprogramar.com/?nombre=Carlos&fruta=Fresa&boton1.x=46&boton1.y=65
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.
Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <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> |
Como podemos observar, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado la etiqueta <b> </b> para poner texto en negrita y la etiqueta <br /> para introducir un salto de línea. Ten en cuenta que la apariencia puede variar según el navegador que utilices.
A su vez hemos escrito <button type="submit">, lo que supondrá que el botón funcione como un botón de envío. Si hubiéramos escrito <button type="reset"> el botón funcionaría como un botón de restablecimiento de valores por defecto, y su hubiéramos escrito <button type="button"> el botón no daría lugar a ninguna acción. En caso de no especificarse type para el botón, normalmente el navegador considerará que es un botón tipo submit.
EJERCICIO
Crea una página web que contenga dos formularios que cumplan estas condiciones.
Como título antes del primer formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Saber y Ganar>>. Debe contener:
a) Nombre
b) Apellidos
c) email
d) Teléfono
e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>.
Como título antes del segundo formulario debe figurar con etiquetas h1 el texto “Petición de información”. Debe contener:
a) Nombre
b) País
c) email
d) Consulta que se quiere realizar (debe ser un textarea que permita escribir múltiples líneas).
e) Un botón para enviar de tipo imagen y un botón para restablecer de tipo button que muestre dentro del botón lo siguiente: <<Pulse aquí para cancelar>>, un salto de línea, y el texto <<Esto borrará los datos>>.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
