Aprendiendo PHP, parte 17: Elementos de formulario

4 Oct

En la anterior publicación conocimos el envío de formularios y los dos métodos que nos permiten enviarlos al servidor, GET y POST. En esa ocasión habíamos usado dos elementos, input text, para ingresar texto e input password para las contraseñas. En esta ocasión profundizaremos un poco más sobre los elementos de formulario, aunque si bien esto pertenece más a un tema de HTML más que a PHP es importante entender bien su funcionamiento y como llegan los valores ingresados por el usuario al servidor.

Para ello vamos a crear un pequeño formulario con algunos de los campos más usados:

<!DOCTYPE>
<html>
 <head>
    <title> Formulario </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <form id="formulario" method="post" action="index.php">
       <table>
          <tr>
             <td> <label> Nombre y apellido </label> </td>
             <td> <input type="text" name="nombre_apellido" required="required" /> </td>
          </tr>
          <tr>
             <td> <label> Sexo </label> </td>
             <td>
                <input type="radio" name="sexo" value="Femenino" required="required" /> Femenino
                <input type="radio" name="sexo" value="Masculino" required="required" /> Masculino
             </td>
          </tr>
          <tr>
             <td> <label> Nacionalidad </label> </td>
             <td>
                <select name="nacionalidad" required="required">
                   <option value=""> --- </option>
                   <option value="Argentina"> Argentina </option>
                   <option value="Bolivia"> Bolivia </option>
                   <option value="Brasil"> Brasil </option>
                   <option value="Chile"> Chile </option>
                   <option value="Paraguay"> Paraguay </option>
                   <option value="Uruguay"> Uruguay </option>
                </select>
             </td>
          </tr>
          <tr>
             <td> <label> Intereses </label> </td>
             <td>
                <input type="checkbox" name="intereses[]" value="Cine" /> Cine
                <input type="checkbox" name="intereses[]" value="Deportes" /> Deportes 
                <input type="checkbox" name="intereses[]" value="Deportes" /> Internet
                <input type="checkbox" name="intereses[]" value="Libros" /> Libros 
                <input type="checkbox" name="intereses[]" value="Música" /> Música 
             </td>
          </tr>
          <tr>
             <td> <label> Acerca de vos </label> </td>
             <td>
                <textarea name="acerca_de_vos" rows="5" cols="50" required="required"></textarea>
             </td>
          </tr>
       </table>
       <input type="submit" value="Enviar" />
    </form>
 </body>
</html>

Esto le dará un aspecto sencillo pero que nos servirá de ejemplo:

Ahora vamos a analizar los elementos. Comencemos.

Input text

<input type="text" name="nombre_apellido" required="required" />

Este elemento ya lo vimos, y es muy fácil de entender, una vez enviado el formulario llegará al servidor el cual podremos recuperar por su name, como todo elemento de formulario, en este caso “nombre_apellido”.

Input radio

<input type="radio" name="sexo" value="Femenino" required="required" />
<input type="radio" name="sexo" value="Masculino" required="required" />

Los elementos de tipo input radio permiten que el usuario envíe un único valor dentro de un grupo. Si te has fijado bien, para definir grupos debemos usar el mismo name para todos los que formen justamente ese grupo. Además debemos ingresar de forma obligatoria un segundo atributo llamado value que será el valor con el que llegue ese valor al servidor. En este ejemplo de elegir el primero el valor será “Femenino”, sino el segundo, “Masculino”.

Select

<select name="nacionalidad" required="required">
   <option value=""> --- </option>
   <option value="Argentina"> Argentina </option>
   <option value="Bolivia"> Bolivia </option>
   <option value="Brasil"> Brasil </option>
   <option value="Chile"> Chile </option>
   <option value="Paraguay"> Paraguay </option>
   <option value="Uruguay"> Uruguay </option>
</select>

Los elementos de tipo select, también conocidos en otros lenguajes como combobox, al igual que los input radio nos permiten seleccionar una opción dentro de un grupo, aunque estos son más útiles cuando se tienen muchas opciones. Es importante aclarar que el valor que viajará al servidor, osea el que elija el usuario, es obviamente el del atributo value y no el que se le muestra al usuario. Osea que si por ejemplo uno de los option fuese:

<option value="py"> Paraguay </option>

El valor que llegará al servidor será “py” y no “Paraguay”.

Input checbox

<input type="checkbox" name="intereses[]" value="Cine" /> Cine
<input type="checkbox" name="intereses[]" value="Deportes" /> Deportes 
<input type="checkbox" name="intereses[]" value="Deportes" /> Internet
<input type="checkbox" name="intereses[]" value="Libros" /> Libros 
<input type="checkbox" name="intereses[]" value="Música" /> Música

Los input checkbox a diferencia de los input radio y select permiten elegir varias opciones dentro de un grupo. Además, como en este caso, si necesitamos enviar mútiples opciones, el valor del name debemos usarlo con corchetes de apertura y cierre al final para que al llegar al servidor y PHP lo recupere como un array, en donde cada posición sea cada valor de los que han sido seleccionados por el usuario.

Textarea

<textarea name="acerca_de_vos" rows="5" cols="50" required="required"></textarea>

Los campos de tipo textarea, al igual que los input text, son campos de texto libre, aunque claro, estos están pensados para ingresos de mucho texto.

También existen otros campos que no están en el ejemplo, pero los nombraré a continuación:

Input file

<input type="file" name="imagen" />

Estos campos nos permiten adjuntar archivos, pero lo veremos más adelante ya que merece un capítulo aparte.

Input password

<input type="password" name="contrasena" />

Estos permiten ingresar datos privados como contraseñas, y cada caracteres será invisible para protegerlo visualmente.

Input hidden

<input type="hidden" name="campo_oculto" value="Este es un valor oculto" />

Se utilizan para valores que estarán ocultos en el formulario, y su fin es que el usuario no tena que llenarlos. Más adelante veremos que son muy útiles.

Input button

<input type="button" value="Enviar" />

Es un botón, como input submit, pero a diferencia de éste, no sirve para enviar el formulario, sino que sirve para otro tipo de cosas, por ejemplo se le puede aplicar funcionalidad Javascript.

Input reset

<input type="reset" value="Limpiar campos" />

También es un botón, que al pulsarlo vaciará todos los datos que haya ingresado el usuario en el formulario donde está contenido. Este elemento no suele utilizarse mucho.

Input image

<input type="image" value="Enviar" src="imagen.jpg" />

También permite enviar el formulario, pero es un botón que da la posibilidad de cargarle una imagen a través del atributo src.

Input submit

<input type="submit" value="Enviar" />

Al pulsar este botón el formulario será enviado al servidor.

Además con la salida de Html5 se han integrado nuevos campos, si querés verlos podés visitar esta publicación: Elementos de formulario en html5.

 

Bueno siguiendo con el ejemplo que estábamos haciendo, vamos a crear la cabecera de la página, en donde recibiremos los campos que fueron enviados del formulario:

<?php
header('Content-Type: text/html; charset=utf-8');
$por_post = ($_SERVER['REQUEST_METHOD'] == 'POST');
if ($por_post) {
   $nombre_apellido = $_POST['nombre_apellido'];
   $sexo = $_POST['sexo'];
   $nacionalidad = $_POST['nacionalidad'];
   $intereses = (isset($_POST['intereses'])) ? $_POST['intereses'] : null;
   $acerca_de_vos = $_POST['acerca_de_vos']; 
}
?>

Bueno, como en el ejemplo anterior definimos una cabecera utf-8 para que el PHP soporte caracteres especiales. Además preguntamos si hay una petición por POST, para comprobar si el usuario está enviando el formulario y de ser así guardamos las variables de los campos.

Notar que al recuperar los intereses debemos utilizar el operador ternario preguntando si existe una variable $_POST[‘intereses’]:

$intereses = (isset($_POST['intereses'])) ? $_POST['intereses'] : null;

Esto se debe a que si el usuario no ha seleccionado ninguno de los checkbox no llegará ninguna variable POST con ese nombre. Además recordar que si en cambio el usuario selecciona uno o más de los checkbox esta variable será un arrray.

Ahora vamos a terminar nuestro ejemplo, haciendo lo siguiente: si el usuario llena el formulario y pulsa el botón de enviar deben mostrarse los datos que ingresó:

<?php
header('Content-Type: text/html; charset=utf-8');
$por_post = ($_SERVER['REQUEST_METHOD'] == 'POST');
if ($por_post) {
   $nombre_apellido = $_POST['nombre_apellido'];
   $sexo = $_POST['sexo'];
   $nacionalidad = $_POST['nacionalidad'];
   $intereses = (isset($_POST['intereses'])) ? $_POST['intereses'] : null;
   $acerca_de_vos = $_POST['acerca_de_vos'];
}
?>
<!DOCTYPE>
<html>
 <head>
    <title> Formulario </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <?php if ($por_post): ?>
       <ul>
          <li> <strong> Nombre y apellido: </strong> <?php echo $nombre_apellido ?> </li>
          <li> <strong> Sexo: </strong> <?php echo $sexo ?> </li>
          <li> <strong> Nacionalidad: </strong> <?php echo $nacionalidad ?> </li>
          <?php if($intereses): ?> <li> <strong> Intereses: </strong> <?php echo implode(' - ', $intereses) ?> </li> <?php endif; ?>
       </ul>
       <div>
          <?php echo nl2br($acerca_de_vos) ?>
       </div>
    <?php else: ?>
       <form id="formulario" method="post" action="index.php">
          <table>
             <tr>
                <td> <label> Nombre y apellido: </label> </td>
                <td> <input type="text" name="nombre_apellido" required="required" /> </td>
             </tr>
             <tr>
                <td> <label> Sexo: </label> </td>
                <td>
                   <input type="radio" name="sexo" value="Femenino" required="required" /> Femenino
                   <input type="radio" name="sexo" value="Masculino" required="required" /> Masculino
                </td>
             </tr>
             <tr>
                <td> <label> Nacionalidad: </label> </td>
                <td>
                   <select name="nacionalidad" required="required">
                      <option value=""> --- </option>
                      <option value="Argentina"> Argentina </option>
                      <option value="Bolivia"> Bolivia </option>
                      <option value="Brasil"> Brasil </option>
                      <option value="Chile"> Chile </option>
                      <option value="Paraguay"> Paraguay </option>
                      <option value="Uruguay"> Uruguay </option>
                   </select>
                </td>
             </tr>
             <tr>
                <td> <label> Intereses: </label> </td>
                <td>
                   <input type="checkbox" name="intereses[]" value="Cine" /> Cine
                   <input type="checkbox" name="intereses[]" value="Deportes" /> Deportes 
                   <input type="checkbox" name="intereses[]" value="Deportes" /> Internet
                   <input type="checkbox" name="intereses[]" value="Libros" /> Libros 
                   <input type="checkbox" name="intereses[]" value="Música" /> Música 
                </td>
             </tr>
             <tr>
                <td> <label> Acerca de vos: </label> </td>
                <td>
                   <textarea name="acerca_de_vos" rows="5" cols="50" required="required"></textarea>
                </td>
             </tr>
          </table>
          <input type="submit" value="Enviar" />
       </form> 
    <?php endif; ?>
 </body>
</html>

Bueno vamos a analizar las nuevas líneas, en primer lugar verificamos si se ha enviado el formulario con:

<?php if ($por_post): ?>

Si así fue mostrará los datos que envió el usuario, de lo contrario será el formulario.

Los valores serán impresos por pantalla en una lista y el campo textarea con un div:

<ul>
   <li> <strong> Nombre y apellido: </strong> <?php echo $nombre_apellido ?> </li>
   <li> <strong> Sexo: </strong> <?php echo $sexo ?> </li>
   <li> <strong> Nacionalidad: </strong> <?php echo $nacionalidad ?> </li>
   <?php if($intereses): ?> <li> <strong> Intereses: </strong> <?php echo implode(' - ', $intereses) ?> </li> <?php endif; ?>
</ul>
<div>
   <?php echo nl2br($acerca_de_vos) ?>
</div>

Notar dos cosas. En primer lugar la forma en que mostramos los intereses, los checkbox que el usuario tildó. Usamos un if para verificar si existen los intereses, osea que si no ha tildado ninguno, la variable será null y salteará ese item. Segundo, la forma que mostramos los intereses, de haberlos, a través de la función implode(), que como vimos en una publicación pasada, convierte un array en un string separando sus posiciones con un caracteres específico. También podríamos haber recorrido el array con un foreach y mostrar cada posición, cada interés, uno abajo del otro.

Tal vez te preguntes también porque la variable $acerca_de_vos la mostramos con la función nl2br(), esta función convierte los saltos de línea en etiquetas <br />, debido a que HTML no los tiene en cuenta, o mejor dicho no los muestra como tal.

Esto nos mostrará por pantalla algo como esto:

 

Descargar ejemplo

 

Anterior: Aprendiendo PHP, parte 16: Introducción a formularios (métodos GET y POST)

Siguiente: Aprendiendo PHP, parte 18: Validar formularios

Redes sociables

    2 thoughts on “Aprendiendo PHP, parte 17: Elementos de formulario

    1. Hola, tengo que hacer una pagina y en un formulario llamado recibo, tengo que colocar un Rendido y un Pagado….lo hice con radio…pero en la base no me carga el dato, que debo agregar?
      en la base los tengo a ambos como tinyint y en la confirmación a la variable le asigne valor 0 pero no me carga. Podría agregar un If donde 0=rendido y 1 es no rendido…pero no se como formularlo :( u otra cosa no se….me ayudas?

      • Hacé una cosa así:

        Ponele que tenés un radio:

        Y cuando lo recibís en el PHP hacés:

        $pagado = (isset($_POST[‘pagado’])) ? 0 : 1;

        Saludos!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *