Uso de Formularios

En este taller practicará diversos sistemas para recuperar la información de un formulario con elementos texto, select o boton radio.

Declaración del formulario

En primer lugar debe disponder de una página en la que declará los elementos del formulario. Cree un archivo de nombre 'Datos.htm' e introduzca el siguiente código:

Formulario de entrada de datos

<html>
<head>
	<title>Datos personales</title>
</head>
<body>
<form name="form1" action="ProcesarDatos.asp" method="post">
   Nombre: <input type ="text" name="nombre"> <br>
   Sexo:   <input type="radio" name="sexo" value="H">Hombre
           <input  type="radio" name="sexo" value="M">Mujer  <br>
   Edad: <select name="edad">
           <option selected value="">menos de 24 años</option>
           <option value="">entre 24 y 40 años</option>
           <option value="">entre 40 y 55 años</option>		
           <option value="">más de 55 años</option>		
         </select>
   <input type=submit>
</form>
</body>
</html>

Un formulario de HTML lo componen un elemento <form> y diversos elementos contenedores de datos como campos de texto, botones radio, listas seleccionables o campos ocultos.

Entre los atributos del tag form destacan action y method.

  • Action permite especifiar el receptor de los datos del formulario cuando el usuario pulsa el botón de enviar -típicamente un CGI, servlet o como en este caso, una página ASP-.
  • Por su parte, el atributo method especifica el modo en que los datos son enviados ya sea mediante la URL (post) o en variables ocultas (get). Cómo verá más adelante, según el método utilizado, se utilizarán tambien diferentes instrucciones ASP para recoger el valor de los campos del formulario.

Con el método Post, no se visualizarán los parámetros en la ventana de dirección del navegador. Sin embargo, con el método Get, cómo puede ver en la captura anterior el nombre y el valor de las distintos objetos aparece en la URL de la página destino del formulario unidos por el caracter "&" del modo siguiente:

Nombre_pagina.asp?variable1=valor1&variable2=valor2&variable3=valor3

Recepción de las variables

En la segunda parte de esta práctica, debe crear la página receptora del formulario (ProcesarDatos.asp). En ella leerá los contenidos de los objetos del formulario "nombre", "sexo" y "edad" que hayan sido introducidos por el usuario.

ASP de proceso de datos

<html>
<head>
	<title>Valores introducidos</title>
</head>
<body>
Ha introducido:<br>
	<%= request.form("nombre")%> en el campo nombre<br>
	<%= request.form("sexo")%> en el campo Sexo<br>	
	<%= request.form("edad")%> en el campo Edat<br>	
</body>
</html>

Post y Get

Si el formulario era transmitido mediante método POST, debe utilizar la sentencia Request.form("nombre_variable") para recuperar el valor de los distintos objetos del formulario (tal y como se refleja en el ejemplo anterior). Por el contrario, si utilizó el método GET, debe recurrir a la sentencia Request.querystring("nombre_variable") para obtener los resultados.

Tratamiento de listas

Cuando utilice formularios con objetos del tipo <select multiple>, en los que un mismo objeto almacena más de un valor, es interesante disponer de un método flexible para recuperar los valores seleccionados.

Por ejemplo suponga una página con el siguiente formulario, en el que puede seleccionar un conjunto de paises de la lista mediante la combinación del clic del mouse y las teclas Mayúsculas o Control.

Formulario con Multiselección

<form name="form1" action="ProcesarDatos.asp" method="POST">
   <select multiple size="4" name="paises">
   	<option value="España">España</option>
   	<option value="Argentina">Argentina</option>
   	<option value="Uruguay">Uruguay</option>
   	<option value="Chile">Chile</option>
   	<option value="Paraguay">Paraguay</option>
   	<option value="Colombia">Colombia</option>
   	<option value="Cuba">Cuba</option>
   	<option value="México">México</option>	
   	<option value="Panamá">Panamá</option>	
</select>
<input type=submit>
</form>

A continuación, debe crear la página que leerá los datos del formulario. Un elemento del tipo Select como el del ejemplo devuelve en la variable paises la lista de opciones seleccionadas separadas por el caracter ",". En el código siguiente se utiliza la función "ListToArray" para copiar el contenido del objeto select a un array mucho más manejable. Para finalizar se realiza un recorrido del array para mostrar los elementos que contiene.

Recepción del select

<% function ListToArray(Byval Lista)
   redim Array(1)
   pos = instr(Lista,",")
   if pos <> 0 then
      do while pos > 0 
         actual = Ubound(Array)
         redim preserve Array(actual + 1)
         Array(actual) = mid(Lista,1,pos - 1)
         Lista = trim(mid(Lista,pos+1,len(Lista) - (pos)))
         pos = instr(Lista,",")
      loop			
   end if
   actual = Ubound(Array) 
   redim preserve Array(actual)
   Array(actual) = Lista
   end function	 %>
<html>
<head>
	<title>Paises seleccionados</title>
</head>
<body>
Ha seleccionado los paises:<br>
<%
   Dim Array() 
   Lista = request.form("paises") 
   ListToArray(Lista)
   for i = 1 to Ubound(Array)
      response.write Array(i) & "<br>"
   next
%>
</body>
</html>

El objeto Form

También puede referirse a los objetos del formulario sin conocer sus nombres mediante el objeto Request.Form. Para finalizar este artículo, pruebe el siguiente código que le permitirá imprimir el nombre del campo del formulario y el valor que contiene.

Recepción de variables sin saber su nombre

<html>
<head>
	<title>El objeto Form</title>
</head>
<body>
Descripción del formulario:<br>
<%
	For Each x In Request.Form
	response.write  "El campo del formulario <b>" & x & "</b> _
	                1contiene el valor <b>" & Request.Form(x) & "</b><br>"
	next
 %>
</body>
</html>

Aspecto de la página que lee los datos de un formulario.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO