Formularios

Indice

• Introducción
• input
  • text
  • password
  • hidden
  • checkbox
  • radio
  • reset
  • submit
  • image
• textarea
• select

Introducción

La estructura de un formulario es muy sencilla: comienza con <form> y finaliza con </form>. Tiene dos parámetros obligatorios: action y method.

action contiene la dirección del programa encargado de interpretar los resultados del formulario y generar el resultado oportuno.

method indica en que forma se pasarán los datos a dicho programa. Los más comunes son:

• get: añade los parámetros a la linea del programa separados por el símbolo "?".
• post: envia los datos como parte de la entrada estándar.

Hay dos métodos sencillos para que veais el resultado de un formulario:

1. Enviandolos por correo electrónico, utilizando action="mailto:quiensea@donde.sea" y method="post". De esta forma el resultado del formulario es enviado por correo al destinatario reseñado.
2. El segundo método es utilizar un CGI que nos muestre toda la información que genera el formulario. En la dirección http://geneura.ugr.es/cgi-bin/gustavo/mostrar.cgi podeis encontrar uno de estos.

La etiqueta input

Es la etiqueta más utilizada dentro de un formulario y tienen multitud de opciones. Dependiendo del atributo type se distinguen varias formas de introducir información dentro del formulario.

text

Es el valor por defecto del campo type y sirve para introducir una línea de texto. En la siguiente tabla se muestran sus atributos:

Ejemplo:

    <table align=center>
      <tr>
	<td>Nombre:</td>
	<td><input type="text" name="login" value="Juan" size=10 maxlength=20></td>
      </tr>
      <tr>
	<td>Apellidos:</td>
	<td><input type="text" name="login" size=20 maxlength=40></td>
      </tr>
      </table>
      

Resultado del ejemplo:

Ejercicios:

• Escribe un formulario con varias entradas de texto que utilizen diferentes combinaciones de size y maxlenght y muéstralo utilizando el CGI mostrar.cgi.
• Aprovecha para observar la diferencia entre el uso de los diferentes valores de method.

password

Es otro tipo de entrada de texto muy parecida a text. La única diferencia es que los datos introducidos por el usuario no son visibles sino que aparecen enmascarados, normalmente aparecen asteriscos en lugar de los caracteres introducidos por el usuario.

Ejemplo:

       password <input type="password" name="passwd" size=10>
      

Resultado del ejemplo:

password:

Ejercicios:

• Escribe un formulario con una entrada de tipo password.

hidden

Sirve como almacén de datos. El navegador no la muestra pero si pasa su valor al programa encargado de procesar el formulario. Suele utilizarse para guardar información que permanece constante y es necesario pasar de un formulario a otro. Por ejemplo, cuando rellenamos parcialmente un formulario y queremos recordar la información ya introducida y poder requerir la que falta. Sus atributos son name y value, con el mismo significado que anteriormente.

Ejemplo:

       <input type="hidden" name="username" value="Godofredo">
      

Ejercicios:

• Escribe un formulario que utilice algún campo hidden y envialo a un formulario que haga posible verlo .

checkbox

Es una casilla de selección, un componente que sólo tiene dos valores: seccionado o ignorado. value recoge el valor cuando se selecciona, por defecto contiene la cadena on. Si no se selecciona, no es enviado al programa encargado de procesar el formulario. Puede utilizarse checked para hacer que aparezca seleccionada desde el comienzo.

Ejemplo:

       <input type="checkbox" name="spam" checked> Deseo que me envien publicidad gratuita
      

Resultado del ejemplo:

Deseo que me envien publicidad gratuita.

Ejercicios:

• Escribe un formulario que utilice varios checkbox hidden con diferentes valores por defecto y prueba el uso de checked.

radio

Los botones de radio asocian diferentes valores a una misma variable de forma que la variable sólo pueda tomar el valor de uno de ellos. Al igual que antes si no se selecciona ningun valor se devuelve la cadena vacia. El atributo checked permite elegir un valor por defecto.

Ejemplo:

      hombre <input type="radio" name="sexo" value="h" checked>
      mujer  <input type="radio" name="sexo" value="m">
      

Resultado del ejemplo:

Ejercicios:

• Escribe un formulario con varios grupos de botones de tipo radio que te permitan elegir entre varias opciones excluyentes.

reset

Es un valor especial que realmente no sirve para introducir información. Presenta el aspecto de un botón y se utiliza para dejar el formulario en su estado inicial, con los campos de texto limpios o con los valores por defecto y las opciones iniciales seleccionadas. El atributo value sirve ahora para definir el texto del botón.

Ejemplo:

      <input type="reset" value="limpiar formulario">
      

Resultado del ejemplo

Ejercicios:

• Añade un botón de reset a alguno de los formularios de los ejercicios anteriores.

submit

Al igual que reset, es un valor especial. Su acción es enviar los resultados del formulario al programa encargado de procesar el formulario especificado en action. Al igual que en el caso anterior value sirve ahora para definir el texto del botón.

Ejemplo:

      <input type="submit" value="enviar formulario">
      

Resultado del ejemplo

Ejercicios:

• Añade un botón de submit a alguno de los formularios de los ejercicios anteriores.

image

Es una especie de mapa sensible. Lo que hace es visualizar una imagen, y, en caso de hacer click sobre ella, desencadena una acción similar a la de submit, es decir envia el formulario al programa encargado de procesarlo, pero además añade un nuevo dato, las coordenadas sobre las que hemos hecho click. Estas son enviadas a través del valor de dos variables llamadas x e y.

Ejemplo:

      <input type="image" src="colores.gif">
      

Resultado del ejemplo

Ejercicios:

• Modificar alguno de los ejercicios anteriores para que utilicen una imagen para procesar el formulario.

La etiqueta textarea

Es parecido a text, pero a diferencia de este no esta limitado a la introducción de una única linea de texto. Es un campo de edición de texto multilinea. Veamos los nuevos atributoss que podemos utilizar:

Ejemplo:

      <textarea name="textarea1" rows=2 cols=15></textarea>
      <textarea name="textarea2" rows=5 cols=10></textarea>
      <textarea name="textarea3" rows=10 cols=5></textarea>
      

Resultado del ejemplo:

Ejercicios:

• Escribe un formulario en el que se pida al usuario que introduzca su nombre y su opinión sobre un curso de creación de páginas web.

La etiqueta select

Permite construir una lista de elementos seleccionables. Puede tener barras de desplazameinto y/o una lista desplegable similar a un menu en función de la aparición o no de varios atributos:

Para hacer uno de estos menús habrá que encerrar entre <select> y </select> varias etiquetas <option>. Utilizaremos una etiqueta option para definir cada una de las posibles opciones seleccionables. Detrás de cada etiqueta hemos de colocar el texto que queramos que aparezca para escoger cada opción. Esta etiqueta tiene dos atributos:

Ejemplo:

      <select name="option_number">
        <option value="opcion 1"> opcion 1
        <option value="opcion 2"> opcion 2
        <option value="opcion 3"> opcion 3
        <option value="opcion 4"> opcion 4
      </select>
      <select name="option_letter" size=4 multiple>
        <option value="opcion a"> opcion a
        <option value="opcion b" selected> opcion b
        <option value="opcion c"> opcion c
        <option value="opcion d" selected> opcion d
        <option value="opcion e"> opcion e
        <option value="opcion f"> opcion f
        <option value="opcion g"> opcion g
      </select>
      

Resultado del ejemplo:

Ejercicios:

• Crea un formulario que permita seleccionar la edad de una persona de entre varios rangos.
• Crea un formulario que permita escoger entre varios tipos de programas de televisión, cuales te gustan más.

Ejemplos

• Un poco de todo: test