Su
utilidad se basa fundamentalmente en el envio de datos a programas.
Podriamos decir que los formularios son el interface mediante el cual
una persona introduce datos en un programa. Estos programas que reciben
los datos de los formularios son clasificados generalmente en 2 grupos:
scripts y CGIs. Los primeros, los scripts, son lenguajes embebidos en
el propio HTML, e interpretados junto con el código HTML en el
propio navegador (PHP, ASP, JavaScript, etc.). Los segundos, los CGIs,
son programas ejecutables que residen en el servidor de nuestra página
web, y que efectúan su "salida" en función de
los parámetros que les pasemos en nuestro formulario.
Como
veis, la interactividad alcanza un punto importante con el uso de los
formularios, porque estamos hablando de elementos que nos permiten recoger
ciertos parámetros, y se los pasan a un programa que actuará
en función de estos.
Las
etiquetas que definen un formulario son, a "grosso modo":
<form
action="elemento_destino" method="metodo">
(cuerpo del formulario, con sus distintos elementos)
</form>
Básicamente,
podemos ver que el contenido del formulario viene delimitado por las
etiquetas de apertura y cierre <form>
y </form>. Y sólo
cabe destacar los parámetros de la etiqueta de apertura , que
son:
action="elemento_destino"
: donde elemento_destino es la dirección del script
o CGI que va a recibir los parámetros que se introduzcan en el
formulario.
method="metodo"
: mediante este parámetro específicamos el método
mediante el cual se mandan los datos del formulario al script o CGI.
Existen 2 métodos, GET y POST.
GET:
el conjunto de datos del formulario se agrega al URL especificado por
el atributo action (con un signo de interrogación ("?")
como separador) y este nuevo URL se envía al agente procesador.
POST:
Con el método HTTP post, el conjunto de datos del formulario
se incluye en el cuerpo del formulario y se envía al agente procesador.
Ahora
veamos los diferentes elementos a través de los cuales podemos
introducir los datos del formulario, y que están en el cuerpo
del mismo:
Casillas
de verificación
Se
definen mediante la etiqueta:
<input
type="checkbox" name="nombre" [checked]> (…)
</input>
Se
utilizan para ofrecer valores binarios (de encendido/apagado). Donde
nombre es el nombre del parámetro y checked
indica si la casilla estará activada inicialmente o no.
Un
ejemplo:
<input
type="checkbox" name="valor1" checked >1</input>
En
este ejemplo se mostraría una casilla de verificación,
activada por el uso del parámetro checked (opcional).
El valor del parámetro en el caso de estar activada la casilla
es true, y en el caso de no estar activada será false.
Radiobotones
Se
definen mediante la etiqueta:
<input
type="radio" name="nombre" value="valor">
(…) </input>
Se
utilizan para ofrecer varias opciones para un mismo parámetro,
de manera excluyente, donde nombre es el nombre del parámetro
y valor es el valor del mismo en el caso de que se active este botón.
Un
ejemplo:
<input
type="radio" name="x" value="1">1</input>
<input type="radio" name="x" value="2">2</input>
<input type="radio" name="x" value="3">3</input>
Este
ejemplo nos mostraría 3 botones, y dependiendo del que seleccionemos
(el formulario sólo deja elegir una opción por variable,
por eso son excluyentes) este será el valor que se pase al script
o CGI.
Menús
Se
definen mediante las etiquetas:
<select
name="nombre" [size="filas" multiple]>
<option>valor1
<option>valor2
(…)
</select>
Se
utilizan para realizar selecciones de un menú, que definiremos
por tantas opciones como etiquetas <option> utilizemos.
Donde nombre es el nombre del parámetro, filas
es el número de filas del menú que queremos mostrar (por
defecto 1) y multiple indica si el menú permitirá
activar múltiples opciones o no. Los dos últimos parámetros
son opcionales.
Un
ejemplo:
<select
name="x" >
<option>1
<option>2
<option>3
</select>
En
este ejemplo presentaremos un menú desplegable, que sólo
permitirá elegir una opción de las tres posibles, y pasaremos
el valor del parámetro x en función de la opción
que elijamos (1,2,3).
Entrada
de texto de 1 linea
Se
define mediante la etiqueta:
<input
type="text" name="nombre" [size="tamaño"
maxlength="longitud_max"]>
Donde
nombre es el nombre del parámetro a pasar, tamaño
es el ancho (en caracteres) que ocupará el campo del formulario
y longitud_max es el número máximo de caracteres
que dejará introducir como parámetro. Los dos últimos
parámetros son opcionales.
Ejemplo:
<input
type="text" name="email" size="10" maxlength="50">
Aquí
se mostrará un campo de entrada de texto de 1 linea, con 10 caracteres
de ancho, que dejará introducir una cadena de texto de hasta
50 caracteres y donde el parámetro recibirá el nombre
email.
Entrada
de texto de múltiples lineas
Se
define mediante la etiqueta:
<textarea
name="nombre" rows="filas" cols="columnas">
[texto predefinido]
</textarea>
En
donde nombre es el nombre del parámetro, y rows
y cols es el número de filas y columnas (en caracteres),
respectivamente, que ocupará el campo de entrada. Todos estos
parámetros son obligatorios. Cabe mencionar que entre las etiquetas
de apertura y cierre se puede insertar el texto predefinido que se quiera
(si se quiere) que se mostrará como texto por defecto.
Ejemplo:
<textarea
name="direccion" rows="5" cols="50">
Escribe aquí tu dirección completa…
</textarea>
En
este ejemplo presentaremos un campo de entrada de texto de múltiples
lineas, cuyo nombre de parámetro es direccion, y que
se presentará en un campo de 5 filas y 50 columnas. En el caso
de que el texto a introducir sobrepasara las 5 filas de texto, se mostrarán
automáticamente las barras de desplazamiento en el campo de entrada.
En este ejemplo aparecerá el texto "Escribe aquí
tu dirección completa…" predefinido dentro del campo
del formulario.
Botones
de envio y borrado
Una
vez que hallamos cumplimentado los datos de nuestro formulario y queramos
mandarlos para su procesamiento, lo haremos pulsando el botón
de envio del formulario. Este botón se define mediante la etiqueta:
<input type="submit" value="texto">.
En donde texto será el texto que se mostrará en el botón
de envio. Cabe destacar que la inserción de este elemento es
obligatoria en todos los formularios, ya que sin él sería
imposible poder enviar los datos del mismo al script o CGI.
Ejemplo:
<input
type="submit" value="Enviar los datos">
En
este ejemplo se mostrará el botón de envio de datos, con
el texto que nosotros le hemos indicado: "Enviar los datos".
Cuando se pulse sobre el botón, se mandarán los datos
del formulario al script o CGI.
También
podemos insertar un botón en nuestro formulario que borre el
contenido de todos los campos (por ejemplo, por si nos hemos equivocado).
Este botón se define mediante la siguiente etiqueta:
<input type="reset" value="texto">.
En donde texto será el texto que se mostrará
en el botón de borrado de datos.
Ejemplo:
<input
type="reset" value="Borrar datos">
Aquí
mostraremos un botón de eliminación de los datos (elimina
los datos introducidos hasta el momento, con el texto "Borrar datos".
