Los formularios han de dar plaza no solamente a la información a tomar del
usuario sino también a otra serie de funciones. Concretamente, han de
permitirnos su envío mediante un botón. También puede resultar práctico poder
proponer un botón de borrado o bien acompañarlo de datos ocultos que puedan
ayudarnos en su procesamiento.
En este capitulo, para terminar la saga de formularios, daremos a conocer los
medios de instalar todas estas funciones.
botón de envío
Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar
a su gestor, el navegante ha de validarlo por medio de un botón previsto a tal
efecto. La construcción de dicho botón no reviste ninguna dificultad una vez
familiarizados con las etiquetas input ya vistas:
<input type="submit" value="Enviar">
Con este código generamos un botón como este:
Como puede verse, tan solo hemos de especificar que se trata de un botón de
envío (type="submit") y hemos de definir el mensaje del botón por medio del
atributo value.
botón de borrado
Este botón nos permitirá borrar el formulario por completo en el caso de que
el usuario desee rehacerlo desde el principio. Su estructura sintáctica es
análoga a la anterior:
<input type="reset" value="Borrar">
A diferencia del botón de envío, indispensable en cualquier formulario, el
botón de borrado resulta meramente optativo y no es utilizado frecuentemente.
Hay que tener cuidado de no ponerlo muy cerca del botón de envío y de distinguir
claramente el uno del otro.
Datos ocultos
En algunos casos, aparte de los propios datos enviados por el usuario, puede
resultar práctico enviar datos definidos por nosotros mismos que ayuden al
programa en su procesamiento del formulario. Este tipo de datos, que no se
muestran en la página pero si pueden ser detectados solicitando el código fuente,
no son frecuentemente utilizados por páginas construidas en HTML, son más bien
usados por páginas que emplean tecnologías de servidor. No os asustéis, veremos
más adelante qué quiere decir esto. Tan solo queremos dar constancia de su
existencia y de su modo creación. He aquí un ejemplo:
<input type=hidden name="sitio" value="
**www.desarrolloweb.com">**
Esta etiqueta, incluida dentro de nuestro formulario, enviara un dato
adicional al correo o programa encargado de la gestión del formulario. podríamos,
a partir de este dato, dar a conocer al programa el origen del formulario o
algún tipo de acción a llevar a cabo (una redirección por ejemplo).
Botones normales
Dentro de los formularios también podemos colocar botones normales, pulsables
como cualquier otro botón. Igual que ocurre con los campos hidden, estos botones
por si solos no tienen mucha utilidad pero podremos necesitarlos para realizar
acciones en el futuro. Su sintaxis es la siguiente.
<input type=button value="Texto escrito en el botón">
Quedaría de esta manera:
El uso más frecuente de un botón es en la programación en el cliente.
Utilizando lenguajes como Javascript podemos definir acciones a tomar cuando un
visitante pulse el botón de una página web.
Ejemplo de formulario
Con este capitulo finalizamos nuestro tema de formularios. Pasemos ahora a
ejemplificar todo lo aprendido a partir de la creación de un formulario que
consulta el grado de satisfacción de los usuarios de una línea de autobuses
ficticia. El formulario está construido para que envíe los datos por correo
electrónico a un buzón determinado.
Vemos el formulario en esta página. Vosotros tratar de construirlo para ver
si habéis entendido bien los temas sobre formularios.
Nombre
Email
Población
Sexo
Hombre
Mujer
Frecuencia de los viajes
Varias veces al diaUna vez al diaVarias veces a la semanavarias veces al mes
Comentarios sobre su satisfacción personal
Deseo recibir
notificación de las novedades en las líneas de autobuses.
Recordad que podéis ver el código fuente de cualquier página web
utilizando los menús de vuestro navegador, así podréis revisar el código que
hemos utilizado para construir el formulario.
A continuación también mostraremos el código fuente de este formulario, que
es importante que todos le echemos un vistazo, aunque sea rápidamente.
<form action="mailto:colabora@desarrolloweb.com"
method="post" enctype="text/plain">
Nombre <input type="text" name="nombre" size="30" maxlength="100">
<br>
Email <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Población <input type="text" name="poblacion" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Varon" checked> Hombre
<br>
<input type="radio" name="sexo" value="Hembra"> Mujer
<br>
<br>
Frecuencia de los viajes
<br>
<select name="utilizacion">
<option value="1">Varias veces al dia
<option value="2">Una vez al dia
<option value="3">Varias veces a la semana
<option value="4">varias veces al mes
</select>
<br>
<br>
Comentarios sobre su satisfacción personal
<br>
<textarea cols="30" rows="7" name="comentarios"></textarea>
<br>
<br>
<input type="checkbox" name="recibir_info" checked>
Deseo recibir notificación de las novedades en las líneas de autobuses.
<br>
<br>
<input type="submit" value="Enviar formulario">
<br>
<br>
<input type="Reset" value="Borrar todo">
</form>
Para acabar, vamos a ver lo que recibirían por correo electrónico en la
empresa de autobuses cuando un usuario cualquiera rellenase este formulario y
pulsase sobre el botón de envio.
nombre=Federico Mijo Silvestre
email=fede@terramix.com
poblacion=Astorga, León
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena linea. Poner más autobuses.
recibir_info=on
