Formularios
|
|
Unidad Formularios (I)
|
|
|
|
|
En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué elementos pueden contener.
|
|
|
|
|
Formulario <form>
|
|
|
|
|
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia .
|
|
|
|
|
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:
<form action="mailto:formularios@aulaclic.com" method="post" enctype="text/plain" >
... </form> A continuación veamos los distintos elementos que se pueden incluir en un formulario.
|
|
|
|
|
Áreas de texto <textarea>
|
|
|
|
|
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse para que incluyan comentarios.
Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>.
El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos.
El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto.
El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto.
Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el atributo rows, y más caracteres por línea de los especificados en el atributo cols.
Por ejemplo, para insertar el área de texto:
Escribe el texto que quieras
Habría que escribir:
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea>
|
|
|
|
|
|||
|
|
Unidad Formularios (II)
|
|
|
|
|
Elementos de entrada <input>
|
|
|
|
|
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.
El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos.
Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Habría que escribir:
<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">
Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contraseña:
Habría que escribir:
<input name="contra" type="password" value="contraseña" size="20" maxlength="15">
Botón:
Para insertar un botón, el atributo type debe tener el valor submit, restore o button.
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.
El atributo value indica el texto que mostrará el botón.
Por ejemplo, para insertar el botón:
Habría que escribir:
<input name="boton" type="submit" value="Enviar">
Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.
Por ejemplo, para insertar la casilla:
Habría que escribir:
<input name="casilla" type="checkbox" value="acepto" checked>
Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.
Por ejemplo, para insertar los botones de opción:
Habría que escribir:
<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar"> Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.
<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar"> Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.
Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario.
Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables.
|
|
|
|
|
|||
|
|
Unidad Formularios (III)
|
|
|
|
|
|||
|
|
Campos de selección <select> ...
|
|
|
|
|
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado.
El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista.
La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.
La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>.
La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma valores.
Por ejemplo, para insertar el menú:
--- Elige mascota --- Perro Gato
Habría que escribir:
<select name="mascota">
<option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> Y para insertar la lista:
---Elige animales--- Loro Perro Gato Pez
Habría que escribir:
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select> |
|
|
|
|
|||
|
Ejercicio paso a paso. Insertar objetos de formulario
|
|
Objetivo.
|
|
|
Practicar las operaciones que hay que realizar para insertar algunos objetos de formulario.
|
|
|
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Abre el documento consultas.htm, de la carpeta originales/animales del curso.
3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
4 Busca la línea <td>Campo de seleccion</td>, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente código:
<select name="animal">
<option selected>--- Elige opción ---</option> <option>Perro</option> <option>Gato</option> <option>Otros</option> </select> Con este código estarás insertando un menú, llamado animal, que tendrá cuatro opciones (--- Elige opción ---, Perro, Gato, Otros).
La opción seleccionada inicialmente será la primera (selected).
5 Inserta una línea en blanco debajo de la línea <input name="restablecer" type="reset" value="Restablecer">, y escribe el siguiente código en ella:
<input name="enviar" type="submit" value="Enviar">
Con este código, estarás insertando un botón para enviar el formulario (type="submit"), cuyo nombre será enviar, y que tendrá el texto Enviar.
6 Haz clic sobre el menú Archivo.
7 Haz clic sobre la opción Guardar.
8 Abre el documento consultas.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece
|
|
|
Ejercicios Unidad Formularios
Insertar elementos de formulario |
|
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación.
|
|
|
Ejercicio 1: Deportes.
|
|
|
1 Abrir el documento reservas.htm, de la carpeta originales/deportes del curso.
2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes
En dicho documento hay dos botones de opción.
3 Modificar el primer botón de opción para que tenga el valor si, y esté activado inicialmente.
4 Modificar el segundo botón de opción para que tenga el valor no.
5 Guardar los cambios y comprobar el funcionamiento en un navegador.
|
|
|
Ejercicio 2: Flores.
|
|
|
1 Abrir el documento pedidos.htm, de la carpeta originales/flores del curso.
2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
3 Añadir el formulario que aparece a continuación. El elemento de entrada llamado cuenta debe ser un campo de contraseña, que permita escribir y mostrar a la vez 20 caracteres.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.
|
|
|
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aquí te lo explicamos.
|
|
|
Ayuda Ejercicios Unidad formularios
Insertar elementos de formulario |
|
Ejercicio 1: Deportes
|
|
|
|
Apartado 3 Buscar la primera línea en la que aparezca <input type="radio".
Añadir value="si" y checked dentro de esa etiqueta <input>.
Apartado 4 Buscar la segunda línea en la que aparezca <input type="radio".
Añadir value="no".
Apartado 5 Hacer clic sobre la opción Guardar, del menú Archivo.
Abrir el documento reservas.htm en un navegador, y comprobar que el primer botón de opción aparece activado inicialmente.
|
||
|
Ejercicio 2: Flores
|
|
|
|
Apartado 3 Añadir delante de la etiqueta </body> el siguiente código:
<form action="" method="post">
<table width="600" border="0" align="center" cellspacing="2"> <tr> <td width="100"><div align="right"><font color="#990033" size="4">Nombre:</font></div></td> <td><input name="nombre" type="text" size="50" maxlength="50"> <font color="#990033" size="4"> DNI:</font> <input name="dni" type="password" size="9" maxlength="9"></td> </tr> <tr> <td><div align="right"><font color="#990033" size="4">Nº de cuenta:</font></div></td> <td><input name="cuenta" type="password" size="20" maxlength="20"> <font color="#990033" size="4">Nº de teléfono: </font> <input name="telefono" type="text" size="9" maxlength="9"></td> </tr> <tr> <td><div align="right"><font color="#990033" size="4">Dirección:</font></div></td> <td><input name="direccion" type="text" size="50" maxlength="50"></td> </tr> <tr> <td valign="top"><div align="right"><font color="#990033" size="4"> Destinatario:</font></div></td> <td valign="top"><textarea name="destinatario" cols="60" rows="2" ></textarea></td> </tr> <tr> <td height="56" valign="top"><div align="right"><font color="#990033" size="4">Pedido:</font></div></td> <td valign="top"><textarea name="pedido" cols="60" rows="2" ></textarea></td> </tr> </table> <div align="center"> <input name="restablecer" type="reset" value="Restablecer"> <input name="enviar" type="submit" value="Enviar"> </div> </form> Apartado 4 Hacer clic sobre la opción Guardar, del menú Archivo.
Abrir el documento pedidos.htm en un navegador, y comprobar que al escribir en el campo que aparece junto al texto Nº de cuenta, el texto se muestra codificado con asteriscos.
|
||