Formularios


Indice


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:

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:

atributo valor descripción
name un nombre de variable válido nombre de la variable que almacenará el texto introducido
value cualquier cadena de caracteres cadena de caracteres que aparecerá por defecto
size un número entero tamaño del campo de texto, o, máximo número de caracteres visibles a la vez
maxlength un número entero máximo numero de caracteres que se pueden introducir en la variable

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:

Nombre:
Apellidos:

Ejercicios:


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:


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:


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:


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:

hombre
mujer

Ejercicios:


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:


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:


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:


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:

atributo valor descripción
rows un número entero número de filas del area de edición de texto
cols un número entero número de columnas del area de edición de texto

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:


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:

atributo valor descripción
name un nombre de variable valido nombre de la variable que contendrá el resultado de la selección
size un número entero número de opciones que se mostrarán a la vez, su valor por defecto es 1
multiple multiple si aparece indica que podemos escoger varias opciones

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:

atributo valor descripción
value cualquier cadena de caracteres valor que adoptará la variable indicada en name si se escoge
selected selected opción será marcada por defecto

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:


Ejemplos


Gustavo Romero Lopez
Last modified: Wed Sep 22 12:52:34 CEST 2004

Valid HTML 4.01! Valid CSS!