Controles Visuales en Formularios


 

Control Radio

            Estos tipos de controles permiten la selección de un único valor.

Ejemplo Práctico: Desarrollar un programa que permita en el servidor realizar la suma, resta, multiplicación o división de dos enteros.

Pantalla solicitada:

R1

Proceso: Incluir los dos text para la carga de los dos enteros, cuatro controles de tipo radio para permitir la selección de la operación y el botón submit para el envío de los datos al servidor.

Implementación (Radio.htm):

<html>
<head>
</head>
<body>
<form name="form1" method="post" action="Radio.php">
Ingrese primer valor:
<input type="text" name="text1">
<br>
Ingrese segundo valor:
<input type="text" name="text2">
<br>
<input type="radio" name="radio1" value="sumar">
Sumar
<br>
<input type="radio" name="radio1" value="restar">
Restar
<br>
<input type="radio" name="radio1" value="multiplicar">
Multiplicar
<br>
<input type="radio" name="radio1" value="dividir">
Dividir
<br>
<input type="submit" name="boton1" value="operar">
</form>
</body>
</html>

Explicación:

En el formulario los controles de tipo radio se definen:

<input type="radio" name="radio1" value="sumar">
<input type="radio" name="radio1" value="restar">
etc.
Lo importante es notar que todos los objetos de tipo radio tienen el mismo nombre, con ello se indica que cuando el operador selecciona uno, se debe desmarcar el seleccionado actualmente.

Si queremos que uno de los radios comience seleccionado, al mismo, le agregamos la palabra checked:
<input type="radio" name="radio1" value="sumar" checked>

Página que efectua las operaciones (Radio.php)

Verificar que radio ha sido seleccionado y realizar la operación correspondiente. Mostrar el resultado en otra página.

Procesos: Con una serie de condiciones verificar que operación realizar.

Implementación (Radio.php):

<html>
<head>
</head>
<body>
<?php
if ($_REQUEST['radio1']=="sumar")
       $resultado=$_REQUEST['text1']+$_REQUEST['text2'];

if ($_REQUEST['radio1']=="restar")
       $resultado=$_REQUEST['text1']-$_REQUEST['text2'];

if ($_REQUEST['radio1']=="multiplicar")
       $resultado=$_REQUEST['text1']*$_REQUEST['text2'];

if ($_REQUEST['radio1']=="dividir")
       $resultado=$_REQUEST['text1']/$_REQUEST['text2'];

echo "El resultado es: $resultado";
?>
</body>
</html>

Explicación:

En el vector $_REQUEST el subíndice del nombre de los controles radio almacena el valor del que fue seleccionado en el formulario anterior.
En caso de no estar seleccionado ningun radio el siguiente programa generará un error ya que no existe en el vector una componente con dicho nombre como subíndice. Podemos resolver este problema verificando si existe esta variable definida de la siguiente forma:

  if (isset($_REQUEST['radio1']))
     {
       if ($_REQUEST['radio1']=="sumar")
        $resultado=$_REQUEST['text1']+$_REQUEST['text2'];
              .
              .
              .
     }
     else
     {
         echo "Debe seleccionar una operacion";
     }

La función isset retorna true si esta definida dicha componente en el vector.

Control Checkbox

            Estos tipos de controles permiten la selección de un conjunto de opciones (a diferencia de los de tipo radio que permiten la selección de solo uno)

Ejemplo Práctico: Implementar un programa que permita en el servidor realizar la suma, resta, mul7tiplicacion o division de dos enteros, pudiendo realizar la selección de múltiples operaciones en forma simultanea.

Pantalla solicitada:

Ch1

Procesos: Incluir los dos text para la carga de los dos enteros, cuatro controles de tipo checkbox para permitir la selección de las operaciones y el botón submit para el envío de los datos al servidor.

Implementación (Checkbox.htm):

<html>
<head>
</head>
<body>
<form name="form1" action="Checkbox.php" method="post">
Ingrese primer valor:
<input type="text" name="text1">
<br>
Ingrese segundo valor:
<input type="text" name="text2">
<br>
<input type="checkbox" name="checkbox1">
Sumar
<br>
<input type="checkbox" name="checkbox2">
Restar
<br>
<input type="checkbox" name="checkbox3">
Multiplicar
<br>
<input type="checkbox" name="checkbox4">
Dividir
<br>
<input type="submit" name="boton1" value="operar">
</form>
</body>
</html>

Explicación:

En el formulario, los controles de tipo checkbox se definen como:

<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox2">
etc.

Página que efectua las operaciones (Checkbox.php)

Objetivo: Verificar que checkbox ha sido seleccionado y realizar la operación correspondiente. Mostrar los resultados de las operaciones seleccionadas.

Procesos: Con una serie de condiciones verificar que checkbox estan seleccionados.

Implementación (Checkbox.php):

<html>
<head>
</head>
<body>
<?php
     if (isset($_REQUEST['checkbox1']))
     {
       $suma=$_REQUEST['text1']+$_REQUEST['text2'];
       echo "La suma es $suma <br>";
     }
     if (isset($_REQUEST['checkbox2']))
     {
       $dif=$_REQUEST['text1']-$_REQUEST['text2'];
       echo "La diferencia es $dif <br>";
     }
     if (isset($_REQUEST['checkbox3']))
     {
       $mul=$_REQUEST['text1']*$_REQUEST['text2'];
       echo "La multiplicacion es $mul <br>";
     }
     if (isset($_REQUEST['checkbox4']))
     {
       $div=$_REQUEST['text1']/$_REQUEST['text2'];
       echo "La division es $div <br>";
     }
?>
</body>
</html>

Explicación:

En el vector $_REQUEST se define una componente por cada checkbox seleccionado en el formulario.

Control Select

            Este tipo de control permite la selección de un unico valor o múltiples valores según como se lo defina.

Ejemplo Práctico: IDEM de la operación de dos enteros en primera instancia que permita seleccionar un único valor del select.

Pantalla solicitada:

S1

Procesos: Incluir los dos text para la carga de los dos enteros, un select para la selección de la operación y el botón submit para el envío de los datos al servidor.

Implementación (Select.htm):

<html>
<head>
</head>
<body>
<form name="form1" action="Select.php" method="post">
Ingrese primer valor:
<input type="text" name="text1">
<br>
Ingrese segundo valor:
<input type="text" name="text2">
<br>
Seleccione la operacion:
<select name="select1">
  <option value="sumar">sumar</option>
  <option value="restar">restar</option>
  <option value="multiplicar">multiplicar</option>
  <option value="dividir">dividir</option>
</select>
<br>
<input type="submit" name="boton1" value="operar">
</form>
</body>
</html>

Explicación:

Para disponer un select se utiliza la marca:

<select name="select1">

Los distintos item que tendrá el select, se los indican con las marcas:

<option value="sumar">sumar</option>
<option value="restar">restar</option>

El texto que va fuera de las marcas es el que se muestra en el formulario, y la propiedad value es la que se envía al formulario y se debe consultar en la página php que procesa el formulario.

Por defecto aparece seleccionada la primera opción, si se quiere que aparezca otra seleccionada, se debe agregar el comando selected en la marca option correspondiente:

<option value="multiplicar" selected>multiplicar</option>

Página que efectua la operación (Select.php)

Verificar que opción ha sido seleccionada y realizar la operación correspondiente.

Procesos: Con una serie de condiciones verificar que operación realizar.

Implementación (Select.php):

<html>
<head>
</head>
<body>
<?php
     if ($_REQUEST['select1']=="sumar")
     {
       $suma=$_REQUEST['text1']+$_REQUEST['text2'];
        echo "La suma es $suma <br>";
     }
     if ($_REQUEST['select1']=="restar")
     {
        $dif=$_REQUEST['text1']-$_REQUEST['text2'];
        echo "La diferencia es $dif <br>";
     }
     if ($_REQUEST['select1']=="multiplicar")
     {
        $mul=$_REQUEST['text1']*$_REQUEST['text2'];
        echo "La multiplicacion es $mul <br>";
     }
     if ($_REQUEST['select1']=="dividir")
     {
        $div=$_REQUEST['text1']/$_REQUEST['text2'];
        echo "La division es $div <br>";
     }
?>
</body>
</html>
Explicación:

En el vector $_REQUEST se crea una componente que almacena la propiedad value de la opción seleccionada en el formulario.
Con una serie de if se verifica cual valor se cumple:

  if ($_REQUEST['select1']=="sumar")

 

Control Select con Selección Múltiple

Objetivo: Solicitar la carga de dos enteros y el o los tipos de operaciones a ejecutar.

Vista preliminar:

M1

Procesos: Incluir los dos text para la carga de los dos enteros, un select para la selección de las operaciones y el botón submit para el envío de los datos al servidor.

Implementación (Multiple.htm):

<html>
<head>
</head>
<body>
<form name="form1" action="Multiple.php" method="post">
Ingrese primer valor:
<input type="text" name="text1">
<br>
Ingrese segundo valor:
<input type="text" name="text2">
<br>
Seleccione las operaciones:
<select name="select1[]" size="4" multiple>
  <option value="sumar">sumar</option>
  <option value="restar">restar</option>
  <option value="multiplicar" selected>multiplicar</option>
  <option value="dividir" selected>dividir</option>
</select>
<br>
<input type="submit" name="boton1" value="operar">
</form>
</body>
</html>

Explicación:

Para disponer un select con múltiples selecciones:
<select name="select1[]" size="4" multiple>
Además de agregar la palabra clave multiple el nombre del control debe tener los caracteres [] (esto indica que se debe crear un vector)

Las opciones que queremos que aparezcan seleccionadas se disponen de la siguiente manera:
  <option value="multiplicar" selected>multiplicar</option>
y las que no queremos que aparezcan inicialmente seleccionadas:
  <option value="sumar">sumar</option>

Página que efectua la operación (Multiple.php)

Verificar que opciones han sido seleccionadas y realizar las operaciones correspondientes.

Procesos: Con una serie de condiciones verificar que operación realizar.

Implementación (Multiple.php):

<html>
<head>
</head>
<body>
<?php
     foreach($_REQUEST['select1'] as $valor)
     {
      if ($valor=="sumar")
       {          
        $suma=$_REQUEST['text1']+$_REQUEST['text2'];
        echo "La suma es $suma <br>";
       }
      if ($valor=="restar")
       {
        $dif=$_REQUEST['text1']-$_REQUEST['text2'];
        echo "La diferencia es $dif <br>";
       }
      if ($valor=="multiplicar")
       {
        $mul=$_REQUEST['text1']*$_REQUEST['text2'];
        echo "La multiplicacion es $mul <br>";
       }
      if ($valor=="dividir")
       {
        $div=$_REQUEST['text1']/$_REQUEST['text2'];
        echo "La division es $div <br>";
       }
     }
?>
</body>
</html>

Explicación:

La componente $_REQUEST['select1'] se crea con una serie de componentes (es decir es un vector de vectores)
Recorremos este vector interno con el comando foreach:

     foreach($_REQUEST['select1'] as $valor)

En cada ejecución del foreach se almacena en la variable $valor el contenido del atributo value del select.
Disponemos dentro del foreach un if para cada valor posible:

          if ($valor=="sumar")
                                    . . .                                          
          if ($valor=="restar")

                                   . . .      


Control Textarea

Objetivo.
Cargar en un formulario el cuerpo, titulo de un Libro y un comentario del mismo. A continuación, mostrar los datos ingresados.

Formulario de carga (Textarea.htm)

Vista preliminar:

T1

Implementación (Textarea.htm):

<html>
<head>
</head>
<body>
<form name="form1" action="Textarea.php" method="post">
Titulo:
<input type="text" name="titulo" size="50">
<br>
Comentario:
<br>
<textarea rows="10" cols="40" name="comentario"></textarea>
<br>
<input type="submit" name="boton1" value="enviar">
</form>
</body>
</html>

Explicación:
El código html es muy sencillo.
La parte nueva es la incorporación del textarea:
<textarea rows="10" cols="40" name="comentario"></textarea>
Las propiedades rows y cols le dan el tamaño relativo al cuadro de carga de datos (textarea)

Si queremos que se inicie con un texto cargado:
<textarea rows="10" cols="40">este texto aparece inicialmente</textarea>

Página que efectua la operación (Textarea.php)

Mostrar los datos cargados previamente.

Procesos: Extraer del vector asociativo los valores cargados en el formulario e imprimirlos en la nueva página.

Implementación (Textarea.php):

<html>
<head>
</head>
<body>
<?php
echo "Libro recomendado";
echo "<br>"; echo "<br>";
echo "Titulo:".$_REQUEST['titulo']."<br>";
echo "Comentario:".$_REQUEST['comentario']."<br>";
?>
</body>
</html>