Listado completo de tutoriales

Temario del Tutorial10 - FORMULARIO (control radio)


El control HTML radio generalmente se utiliza en conjunto con otros controles radio. Cuando agrupamos un conjunto de controles radio solo uno de ellos puede estar seleccionado y si seleccionamos otro se desmarca el actual.

Para analizar este control dispondremos un ejemplo:

Implementar un formulario que solicite la carga de dos enteros, uno en cada text.
Disponer dos controles de tipo radio que nos permitan seleccionar si queremos sumar o restar los dos valores ingresados:

pagina1.html

<html>

<head>
  <title>Problema</title>
</head>

<body>
  <form action="pagina2.php" method="post">
    Ingrese primer valor:
    <input type="text" name="valor1">
    <br>
    Ingrese segundo valor:
    <input type="text" name="valor2">
    <br>
    <input type="radio" name="radio1" value="suma">sumar
    <br>
    <input type="radio" name="radio1" value="resta">restar
    <br>
    <input type="submit" name="operar">
  </form>
</body>

</html>

Es importante notar que se trata nuevamente de un archivo HTML puro, que no tiene código PHP.
La entrada de los dos números se efectúa en dos controles

    <input type="text" name="valor1">
    <input type="text" name="valor2">

Es importante notar que cada text tiene un name DIFERENTE.

Para seleccionar el tipo de operación a efectuar disponemos dos controles de tipo radio:

    <input type="radio" name="radio1" value="suma">sumar
    <input type="radio" name="radio1" value="resta">restar

Ahora vemos que los dos controles de tipo radio tienen el MISMO nombre. Esto es necesario para que el navegador sepa que los dos controles están relacionados (recordar que cuando uno selecciona un radio se debe deseleccionar el otro)

Desde la otra página accederemos al value del control seleccionado.

Por último disponemos un control de tipo submit para el envío de los datos del formulario.

El código de la página que procesa el formulario, llamada:"pagina2.php" (la que indicamos en el elemento FORM del formulario) es:

pagina2.php

<html>

<head>
  <title>Problema</title>
</head>

<body>
  <?php
  if ($_REQUEST['radio1'] == "suma") {
    $suma = $_REQUEST['valor1'] + $_REQUEST['valor2'];
    echo "La suma es:" . $suma;
  } else {
    if ($_REQUEST['radio1'] == "resta") {
      $resta = $_REQUEST['valor1'] - $_REQUEST['valor2'];
      echo "La resta es:" . $resta;
    }
  }
  ?>
</body>

</html>

El vector asociativo $_REQUEST tiene tres componentes:

  $_REQUEST['radio1']
  $_REQUEST['valor1']
  $_REQUEST['valor2']

En la componente $_REQUEST['radio1'] almacena la cadena "suma" o "resta" según cual se seleccionó en el formulario.

Con dos if verificamos cual operación está seleccionada y procedemos a efectuarla:

  if ($_REQUEST['radio1'] == "suma") {
    $suma = $_REQUEST['valor1'] + $_REQUEST['valor2'];
    echo "La suma es:" . $suma;
  } else {
    if ($_REQUEST['radio1'] == "resta") {
      $resta = $_REQUEST['valor1'] - $_REQUEST['valor2'];
      echo "La resta es:" . $resta;
    }
  }


Problema resuelto.

Copiar el contenido de este cuadro de texto al VS Code y almacenarlo en la carpeta c:\xampp\htdocs con un nombre con extensión php.
luego abrir el navegador (Chrome, FireFox, IExplorer etc.) y en la barra de direcciones tipear:
http://localhost/pagina1.php (o el nombre del archivo que le dió)

pagina1.php

Ejecutar ejemplo

pagina2.php

Problema propuesto.

Solicitar que se ingrese por teclado el nombre de una persona y disponer tres controles de tipo radio que nos permitan seleccionar si la persona: 1-no tiene estudios, 2-estudios primarios y 3-estudios secundarios.
En la página que procesa el formulario mostrar el nombre de la persona y un mensaje indicando el tipo de estudios que posee.

Solución
pagina1.php

Ejecutar ejemplo
pagina2.php

Retornar