La recabación de datos forma una parte muy importante para cualquier sitio de Internet y esta también se lleva acabo con elementos HTML denominados formas, los elementos principales de una forma son los tags <form> que indican como y a donde será enviada la información. Dentro de <form> se declaran dos atributos muy importantes, uno de ellos es method y el otro action .
<body> ...... ...... <form method="post" action="/cgi-bin/confirmar.pl"> ...... ...... </form> ..... </body> |
El atributo method le indica al navegador ("Netscape" o "Explorer") como debe ser enviada la información al Servidor, este valor puede ser post o get , sin entrar en mucho detalle, si se utiliza get los elementos de la forma serán enviados al Servidor en el URL ("Universal Resource Locator") de action, esto es, si dentro de la forma se solicitan los valores: nombre,edad y nacionalidad, la información sería enviada de la siguiente manera:
http://www.osmosislatina.com/cgi-bin/confirmar.pl? nombre=PedroMtz&edad=25&nacionalidad=americana |
Después del URL el navegador agrega ? para indicar que continúan variables solicitadas, a partir de ? continúan las variables definidas por medio de un = y separadas por un &, en cambio si se utiliza post las variables y sus valores se incluirán en el contenido de la requisición, por debajo del URL. Lo anterior garantiza que el usuario final no sea capaz de observar las variables en el URL, fuera de esto, la única implicación en utilizar post o get es que la
aplicación de Servidor
sea capaz de leer las variables y sus valores.
En el caso anterior la Aplicación de Servidor (Programa) que procesa esta información es aquella definida por el atributo action , la cual es un "script" en Perl llamado: confirmar.pl ; en otros casos esta Aplicación de Servidor pudo ser: Un
JSP ("Java Server Page")
, ASP ("Active Server Page"),
PHP ("Hypertext Preprocessor")
u otra metodología de Servidor.
Para declarar variables en una forma se pueden utilizar varios métodos o menús, los cuales son descritos a continuación:
El Tag input permite pasar un conjunto de variables con sus respectivos valores en una forma.
Este tipo de variable permite al usuario final asignar un valor de texto a la variable en cuestión , se expresa de la siguiente manera:
País: <input type="text" name="pais" size="10" maxlength="20" value="mexico"> |
La declaración indica que será desplegado un recuadro de 10 espacios (size) donde la variable llevará por nombre pais, dicha variable puede tener un valor máximo de 20 letras (maxlength) y aparecerá un valor "default" mexico (este valor puede ser modificado por el usuario).
También permite que el usuario especifique un valor de texto, pero a diferencia del tipo text el usuario observará asteriscos ( **** ) mas no el texto.
Contraseña: <input type="password" name="pass" size="15" maxlength="30"> |
NOTA: A pesar que el valor no aparece en pantalla, el valor no es protegido al momento de ser transferido al nivel de Red, para realizar esta protección se requiere utilizar encriptación en el Servidor de Paginas.
Este tipo de variable es utilizada para desplegar un menú con botones.
País:<input type="radio" name="pais" value="ar">Argentina
<input type="radio" name="pais" value="br">Brazil
<input type="radio" name="pais" value="co">Colombia
<input type="radio" name="pais" checked value="mx">México
<input type="radio" name="pais" value="ve">Venezuela
|
Lo anterior indica que el nombre de la variable pais será un menú de selección de botones, donde el valor "default" ( checked ) será México, los parámetros value indican el valor que tomará la variable en caso de ser seleccionada; value es de gran ayuda cuando la descripción de la variable es extensa y solo se desea enviar un vocablo o iniciales como valor al Servidor de Paginas, si se omite el valor value , el valor de la variable pasa a ser aquel que se encuentra del lado derecho del elemento.
Este tipo de variable es utilizada para desplegar un menú con cuadros de selección, a diferencia del tipo Radio , Checkbox permite la selección de múltiples valores :
Intereses:<input type="checkbox"
name="intereses" value="p">Política
<input type="checkbox"
name="intereses" checked value="d">Deportes
<input type="checkbox"
name="intereses" value="c">Cine
<input type="checkbox"
name="intereses" checked value="t">Tecnología
<input type="checkbox"
name="intereses" value="a">Administración
|
Los parámetros que son utilizados para este tipo de variable tienen el mismo funcionamiento que el Tipo radio ( name, checked, value), la única diferencia es que si son seleccionados varios valores, la información es pasada al Servidor de Paginas como: intereses="d" intereses="t" , por lo tanto debe asegurarse que su Aplicación de Servidor sea capaz de procesar dos o más valores para la misma variable.
Este tipo de elemento es utilizado para esconder el valor de cierta variable, se utiliza generalmente cuando es necesario procesar datos a lo largo de dos o tres paginas, de esta manera la variable sigue existiendo en la forma, pero no es desplegada en pantalla.
<input type="hidden" name="intereses">
<input type="hidden" name="pais" value="mexico">
|
El Tag select permite generar menús de una manera similar a las mencionadas anteriormente.
<select size="3" name="intereses" multiple> <option value="p">Política <option value="t" selected>Tecnología <option value="d">Deportes <option value="c">Cine <option value="m">Música </select> |
Los parámetros del Tag select son:
name : Indica el nombre de la variable (como los Tag input). size : Especifica el número de opciones que serán desplegadas en pantalla ( las restantes serán incluidas en forma de menú). multiple (opcional): Permite al usuario final elegir varios valores (si se omite multiple solo se permite seleccionar un valor, como el comportamiento del
input radio ); para seleccionar diversos elementos de manera aleatoria, se oprime del teclado Ctrl. <option> : Define los valores de la variable en cuestión, dentro de estos tags es posible indicar el parámetro value que tiene el mismo funcionamiento que los Tags input , y selected que permite preseleccionar ciertos valores.
Los Tags textarea son muy similares a
input text
, la diferencia estriba en que textarea permite definir el área por renglones y columnas.
El parámetro name indica el nombre de la variable que llevará el contenido, mientras cols y rows definen el espacio que es visible en pantalla, cualquier texto que aparezca entre los tags textarea será desplegado dentro del recuadro.