Formas y Aplicación de Servidor

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.

Tags input

El Tag input permite pasar un conjunto de variables con sus respectivos valores en una forma.

Tipo Text

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).

Tipo Password

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.

Tipo Radio

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.

Tipo Checkbox

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.

Tipo Hidden

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">

Tag select

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.

Tag textarea

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.

Ranking Lenguajes de Programación Septiembre 2012 Sin un cambio destacado sobre el último ranking, el indice TIOBE vuelve a mostrar la popularidad de Visual Basic .NET, lenguaje de programación orient...
Oracle acusa a HP de tener un pacto secreto con Intel La batalla que desde este verano enfrenta a HP y Oracle con el procesador Intel Itanium como centro tiene un nuevo capítulo: esta vez ha sido Oracle l...
Angry Birds para Windows Phone Por si poco cabreados andaban ya los pajarracos de Angry Birds, ahora serán otros pollos los que se agarren el mosqueo: los usuarios de Windows Phone ...
Chrome ahora es segundo navegador más usado a nivel mundial Google no puede quejarse de su trayectoria en 2011. Y no solo por la expansión de su plataforma Android o la buena acogida de su red social Google +, ...
¿Cambiarías tu notebook por una Tablet PC? Un estudio realizado por una compañía de informática, Sybase, reveló que 1 de cada 4 estadounidenses reemplazaría su laptop por un dispositivo tab...
Diseño Web en HTML5 con Adobe Edge Adobe Edge es una herramienta intuitiva desarrollada para la creación animaciones que funcionen en dispositivos móviles y navegadores de escritorio, s...
Casi 3 cuartas partes de los usuarios de Android no compraría un Iphone5 Sea como sea, la compañía Google – otrora conocida como gigante de las búsquedas – ha logrado hacerse con la parte más importante de usuarios de telef...
Un nuevo método para enviar información por fibra óptica a 400Gbps Un equipo de investigadores liderados por Xiang Liu de los Laboratorios Bell en Estados Unidos publicaron un estudio en Nature Photonics donde afirman...
Google+ Mejorado cada día mas Tras las mejoras en la funcionalidad Hangouts que Google+ implementó recientemente, ahora la plataforma social alternativa a Facebook prepara una bate...
Internet Explorer es el navegador con más fallos Internet Explorer sigue siendo el navegador con más errores del panorama de Internet. Según un estudio, los programas de Microsoft sufren el doble de ...
Creando Formularios en HTML
Tagged on: