10 - Formulario HTML (control select)


Veamos el control HTML de tipo select. Este tipo de control el funcionamiento es similar al funcionamiento de un conjunto de controles de tipo radio.

Confeccionaremos el mismo problemas del concepto anterior es decir cargar dos números y posteriormente mediante un control de tipo select seleccionar si queremos sumarlos o restarlos (solo una de estas operaciones se puede seleccionar)

La página HTML es la siguiente:
pagina1.html

<html>
<head>
<title>Problema</title>
</head>
<body>
<form action="pagina1.asp" method="post">
Ingrese primer valor:
<input type="text" name="valor1">
<br>
Ingrese segundo valor:
<input type="text" name="valor2">
<br>
<select name="operacion">
<option value="suma">Sumar</option>
<option value="resta">Restar</option>
</select>
<br>
<input type="submit" value="operar">
</form>
</body>
</html>

La sintaxis del control de tipo select es:

<select name="operacion">
<option value="suma">Sumar</option>
<option value="resta">Restar</option>
</select>

Es importante notar que la sintaxis es bastante distinta a los controles de tipo text y radio.

El elemento select tiene definido la propiedad name mediante la cual rescataremos el valor seleccionado en el servidor.

El elemento select contiene un conjunto de elementos option. Cada elemento option tiene definido la propiedad value. El que quede seleccionado el control select rescata su propiedad value.

Ahora el algoritmo en la página ASP es igual al planteado para los controles radio:
pagina1.asp

<%option explicit%>
<html>
<head>
<title>problema</title>
</head>
<body>
<%
dim v1,v2,suma,operacion,resta
v1=request.form("valor1")
v2=request.form("valor2")
operacion=request.form("operacion")
if (operacion="suma") then
  suma=cint(v1)+cint(v2)
  response.write("la suma de los dos valores es:")
  response.write(suma)
end if
if (operacion="resta") then
  resta=cint(v1)-cint(v2)
  response.write("la diferencia de los dos valores es:")
  response.write(resta)
end if
%>
</body>
</html>

Definimos las variables y rescatamos los tres valores del formulario:

dim v1,v2,suma,operacion,resta
v1=request.form("valor1")
v2=request.form("valor2")
operacion=request.form("operacion")

Ahora en la variable operación tenemos el valor seleccionado en el control select.

Mediante dos if detectamos la operación seleccionada y procedemos a calcular e imprimir su resultado:

if (operacion="suma") then
  suma=cint(v1)+cint(v2)
  response.write("la suma de los dos valores es:")
  response.write(suma)
end if
if (operacion="resta") then
  resta=cint(v1)-cint(v2)
  response.write("la diferencia de los dos valores es:")
  response.write(resta)
end if


Retornar