Tutoriales de Electrónica Básica
FORMULARIOS EN PHP:

Cómo se envía la información al Servidor. Cómo se la recibe y Qué es lo que se devuelve para finalizar la transacción de información...

Tratamiento de Formularios en PHP:

No quise hacer una descripción de cómo crear un formulario en html, sino más bien, apunta a como será tratada la información en el servidor, por lo que serán necesarios al menos dos archivos, se puede hacer con uno pero la idea es hacerlo entendible.

A uno de ellos lo llamé formulario.html yo dejaré el código del formulario, si lo pruebas debes ponerlo en body de una página html. Al otro archivo lo llamé lib.php. El primero es el que verá el cliente, es decir el formulario, y el segundo es el que tratará la información que éste le envíe.

Te recomiendo que los ejemplos los vayas probando uno por uno. yo los puse a todos juntos, pero fue con fines educativos.

Repasemos un poco...

Formularios:

Un formulario se crea con la siguiente etiqueta:

<form method="post" action="lib.php" name="">
	...
</form>


Aquí aparecen 3 atributos de <form> que tienen que ver con el envío de la información:

  • method: Puede ser "post" (ocultos) o "get"(por la barra de dirección).
  • action: La ruta y el nombre de la página que procesará la información.
  • name: Sip, es el nombre del formulario.

Vamos por la primera

Campos text y password

Utilizaremos un campo de tipo "text" para que el usuario ingrese su nombre, otro de tipo "password" para que ingrese su contraseña y otro de tipo "submit" para que envíe los datos una vez cargados. Nuestro archivo quedará así...


formulario.html

<form method="post" action="lib.php" name="">
    Nombre de Usuario: <input type="text" name="user" id=""><br>
    Contraseña: <input type="password" name="pass" id=""><br>
    <hr>
    <input type="submit" name="enviar_txtpass" value="Enviar">
</form>


Este formulario enviará vía post el par (name_del_input = value_del_input) de cada uno de sus inputs y los recibirá el archivo lib.php, pero los recibirá como un par (variable = valor).

Si el method del formulario es get, las variables llegarán en la variable global $_GET[], que es un array, y contiene todos los datos del formulario.

En nuesto caso, la información viaja vía post, por tanto las variables llegarán protegidas en la variable global $_POST[], que es otro array, y contiene todos los datos del formulario.

Lo que recibiremos será algo así...

  $_POST['user']
  $_POST['pass']
  $_POST['enviar_txtpass']

Ahora nos centremos en este archivo...

Lo primero que haremos será averiguar de dónde provienen los datos, y como todo formulario se envía al presionar un botón, preguntaremos por la existencia de ese botón. Este es el momento en que aparece nuestra función estrella: isset($variable) que nos devuelve verdadero en caso de que $variable exista.

Ahora sí vamos por el código...


lib.php

<?php
if (isset($_POST['enviar_txtpass'])){		// si existe enviar_txtpass...
    $usuario = $_POST['user'];				// recuperamos datos...
    $clave = $_POST['pass'];
    echo "tu nombre es: ".$usuario."<br>" ;	// y los mostramos
    echo "tu contraseña es: ".$clave ;
}
?>

Listas de Selección (select)

Se trata de una lista que permite seleccionar uno de sus elementos. Esta lista es de tipo <select> y en nuestro ejemplo se llama "campolista", y cada uno de sus elementos es un <option> cuyo value es distinto para cada opción y es el que lo identifica. Cuando este formulario se envía, el name del select tomará el value del option seleccionado. Veamos cómo quedaría nuestro formulario.


formulario.html

<form method="post" action="lib.php" name="">
    <h3>Elige la provincia que más te guste y envíala:</h3>
    <select name="campolista" id="" size="4">
        <option value="Jujuy">JUJUY</option>
        <option value="Salta">SALTA</option>
        <option value="Tucumán">TUCUMAN</option>
        <option value="Córdoba">CORDOBA</option>
        <option value="La Rioja">LA RIOJA</option>
        <option value="San juan">SAN JUAN</option>
        <option value="Mendoza">MENDOZA</option>
    </select>
    <hr>
    <input type="submit" name="enviar_lista" value="Enviar">
</form>

El atributo size="4" de la etiqueta <select>, indica que son 4 los elementos de la lista que serán visibles al usuario. Veamos cómo quedaría nuestro código...


lib.php

<?php
if (isset($_POST['enviar_lista'])){           // si llega $enviar_lista...
    $prov = $_POST['campolista'];             // recupera datos...
    echo "tu provincia preferida es: ".$prov; // y muestra el mensaje
}
?>

Es decir, recibimos el par (name_del_select = value_del_option_seleccionado)

Listas Desplegables (select)

Este campo es una modificación del anterior, como podrás notar, no existe el atributo size="4" de la etiqueta <select>, por lo tanto sólo muestra un elemento de lista, y eso lo convierte en una lista desplegable. Nuestros archivos quedarían tal que así...


Formulario.html

<form method="post" action="lib.php" name="">
    <h3>Elige la provincia más linda:</h3>
    <select name="campocombobox" id="">
        <option value="Jujuy">JUJUY</option>
        <option value="Salta">SALTA</option>
        <option value="Tucumán">TUCUMAN</option>
        <option value="Córdoba">CORDOBA</option>
        <option value="La Rioja">LA RIOJA</option>
        <option value="San juan">SAN JUAN</option>
        <option value="Mendoza">MENDOZA</option>
    </select>
    <hr>
    <input type="submit" name="enviar_combobox" value="Enviar">
</form>

lib.php

<?php
if (isset($_POST['enviar_combobox'])){
    $prov = $_POST['campocombobox'];
    if ($prov == "Jujuy"){
        $mensaje = "Yessss, es la mejor...!!!";
    }else{
        $mensaje = "Noooo, Jujuy es la más linda..!!! ;o)";
    }
    echo "Elegiste <strong><em>$prov</em></strong>, $mensaje";
}
?>

Igual que en el caso anterior, recibimos el par (name_del_select = value_del_option_seleccionado)

Botones de Opción (Radio):

Son inputs de tipo radio, que permiten seleccionar sólo uno de ellos, todos deberán tener el mismo name y lo único que cambiará será su valor (value), ya que la información se envía como un par (name_del_radio = value_del_radio). Mira el formulario...


Formulario.html

<form method="post" action="lib.php" name="">
    <h3>Consulta por uno de los siguientes lenguajes:</h3>
    <input type="radio" id="h" name="len" value="HTML"><label for="h">HTML</label>
    <input type="radio" id="c" name="len" value="CSS"><label for="c">CSS</label>
    <input type="radio" id="j" name="len" value="JS"><label for="j">JavaScrip</label>
    <input type="radio" id="p" name="len" value="PHP" checked><label for="p">PHP</label>
    <input type="radio" id="m" name="len" value="MSQL"><label for="m">MySQL</label>
    <hr>
    <input type="submit" name="enviar_opcion" value="Enviar">
</form>

Las leyendas y sus opciones correspondientes, se encuentran relacionadas por el atributo id del <input> y for del <label> a fin de permitir seleccionarlas haciendo clic sobre la leyenda. Nota que para cada opción estos atributos tienen el mismo valor.

Por último, el atributo checked del radio, lo selecciona por defecto, en este caso PHP.

En lib.php debemos averiguar cuál de todas las opciones fue la seleccionada, y como son varias utilizaremos la estructura switch, ya que devolveremos algo distinto en cada caso...


lib.php

<?php
if (isset($_POST['enviar_opcion'])){      // si existe $enviar_opcion
    $lenguaje = $_POST['len'];   // recuperamos la opción seleccionada
    switch ($lenguaje) {         // y buscamos el texto que le corresponda
    case "HTML":                 // en caso sea HTML, carga $texto...
        $texto = "HTML te permitirá crear páginas estáticas simples.";
        break;                   // y sale de la estructura...
    case "CSS":
        $texto = "Con CSS podrás maquetar tu págnia HTML.<br>";		
        break;
    case "JS":
        $texto = "Con JavaScript podrás darle dinamismo a tu web.<br>";
        $texto .= "Prueba este enlace: ";
        $texto .= "<a href=\"javascript: window.history.back()\">regresar</a>";
        break;
    case "PHP":
        $texto = "Demás está hablar de PHP, para darte una idea, ";
        $texto .= "esto se creó con PHP.";
        break;
    case "MSQL":
        $texto = "MySQL es el gestor de Bases de Datos más usado en la web<br>";
        break;
    default:
        $texto = "La idea es que selecciones una opción";
    }
    // muestra el lenguaje y el texto que le corresponde
    echo "La opción seleccionada es: <strong>$lenguaje</strong><br>" 
    echo $texto;
}
?>

Cuadros de Selección (checkbox):

Son input de tipo checkbox, que permiten seleccionar una o más de las opciones disponibles, en este caso la información se envía como un array[] que contiene todas las opciones seleccionadas, por lo cual al atributo name de cada checkbox se le asigna un mismo array[], en este ejemplo el array se llama idioma[].


formaulario.html

<form method="post" action="lib.php" name="">
    <h3>Envíame los Idiomas que dominas con toda confianza:</h3>
    <input type="checkbox" id="e" name="idioma[]" value="español" checked>
    <label for="e">Español</label>
    <input type="checkbox" id="i" name="idioma[]" value="italiano">
    <label for="i">Italiano</label>
    <input type="checkbox" id="n" name="idioma[]" value="ingles">
    <label for="n">Inglés</label>
    <input type="checkbox" id="f" name="idioma[]" value="frances">
    <label for="f">Francés</label>
    <hr>
    <input type="submit" name="enviar_checks" value="Enviar">
</form>

El atributo checked del checkbox, selecciona por defecto las opciones en las cuales se encuentran definidos, en este caso Español.

Ahora veamos cómo tratar esta información

Primero recuperamos el array en otra variable llamada $misidiomas y la recorremos mediante foreach(), esta instrucción toma cada elemento de $misidiomas y lo pasa a una variable llamada $lengua que es la que finalmente mostramos al usuario, pero en forma de lista. Aquí lo tienes...


lib.php

<?php
if (isset($_POST['enviar_checks'])){    // si existe $enviar_checks
    $misidiomas = $_POST['idioma'];     // recupera idiomas seleccionados
    $msg = "Los lenguajes que yo domino son:"; // construye el mensaje
    $msg .= "<ul>";                     // ...creando una lista
    foreach ($misidiomas as $lengua){
        $msg .= "<li>".$lengua."</li>";
    }
    $msg .= "</ul>";
    echo $msg;                          // ...y luego la muestra 
}
?>

Áreas de Texto (textarea):

Se trata de un área de texto que permite ingresar textos largos, su etiqueta correspondiente es <textarea>, los atributos cols y rows corresponden a las columnas de caracteres y líneas de texto respectivamente, que serán visibles al usuario...


formulario.html

<form method="post" action="lib.php" name="">
    <h3>Envíame un comentario sobre esta web:</h3>
    <textarea name="comentario" cols="40" rows="4" id="" >
    </textarea>
    <hr>
    <input type="submit" name="enviar_textarea" value="Enviar">
</form>

Al enviar este formulario, se recibirá el par (name_del_text_area = su_value). Checa cómo se vería la información recibida en lib.php


lib.php

<?php
if (isset($_POST['enviar_textarea'])){  // si existe $enviar_textarea
    $coment = $_POST['comentario'];     // reuperamos el comentario
    echo $coment;                       // y lo mostramos
}
?>

Envío de Archivos y campos ocultos (file y hidden):

Se trata de inputs tipo file y tipo hidden respectivamente.

El primero File, crea un cuadro de texto y un botón "Examinar" que abre un cuadro de diálogo para seleccionar un archivo, el cual se enviará al servidor.

El segundo Hidden, es un campo oculto, no será visible al usuario pero si se enviará a nuestro servidor, en este caso lo usaremos para definir mediante una variable global MAX_FILE_SIZE y su value, el tamaño máximo del archivo a subir, en nuestro ejemplo 1000000 bits (1 Mb)..

Otro detalle a tener en cuenta y que resulta obligatorio es el atributo enctype en el formulario, que deberá ser "multipart/form-data". Aquí el formulario...


formulario.html

<form enctype="multipart/form-data" method="post" action="lib.php" name="">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" id="">
    Enviar este Archivo: <input name="archivo" type="file">
    <hr>
    <input type="submit" name="enviar_archivo" value="Enviar">
</form>

Cuando se envía el formulario, se recibe un conjunto de datos almacenados en una variable global llamada $_FILES que es un array con toda la información del archivo. en este array "archivo" es el nombre del input file que envía el formulario. Veamos la lista de datos que envía...

$_FILES["archivo"]["name"]: nombre original del archivo
$_FILES["archivo"]["type"]: tipo mime del archivo, por ejemplo image/gif
$_FILES["archivo"]["tmp_name"]: nombre temporal que utiliza para almacenarse en el servidor.
$_FILES["archivo"]["error"]: nº de error al subir el archivo, 0 si todo fue bien.
$_FILES["archivo"]["size"]: tamaño en bytes del archivo recibido

En nuestro script, lo primero que haremos será verificar que no se hayan producido errores al recibir el fichero. De estar todo bien, escribiremos todas las variables descritas anteriormente utilizando un ciclo foreach, donde la variable $clave contiene en identificador de dicha variable, y $valor el dato correspondiente.

Finalmente lo subimos con la función: move_uploaded_file(ubicación_temporal,ubicación_destino)


lib.php (versión 1)

<?php
if (isset($_POST['enviar_archivo'])){
    if ($_FILES["archivo"]["error"] == 2){
        echo "el archivo es demasiado grande";
    }elseif ($_FILES["archivo"]["error"] == 4){
        echo "debe seleccionar un archivo";
    }else{
        foreach($_FILES['archivo'] as $clave => $valor){
            echo "la clave ".$clave." tiene el valor ".$valor."
"; } move_uploaded_file ($_FILES["archivo"]["tmp_name"],"imagen/".$_FILES["archivo"]["name"]); } } ?>

Como verás el archivo se guardará en la carpeta "imagen/", si no la creas no podrás subir el archivo, con esto es suficiente para que vayas y veas si lograste subirlo o no, pero podríamos hacer más, crear un enlace para verlo...

lib.php (versión 2)

<?php
if (isset($_POST['enviar_archivo'])){
    if ($_FILES["archivo"]["error"] == 2){
        echo "el archivo es demasiado grande";
    }elseif ($_FILES["archivo"]["error"] == 4){
        echo "debe seleccionar un archivo";
    }else{
        foreach($_FILES['archivo'] as $clave => $valor){
            echo "la clave ".$clave." tiene el valor ".$valor."<br>";
        }
        move_uploaded_file ($_FILES["archivo"]["tmp_name"],"imagen/".$_FILES["archivo"]["name"]);		
        echo "<br>";
        echo "Ahora puedes ver el <a href=\"imagen/".$_FILES['archivo']['name']."\">Archivo que Subiste</a><br><br>";
    }
}
?>

Hemos creado un enlace para ver el archivo que acabamos de subir.

Y podemos hacer más, por ejemplo, darle al usuario la posibilidad de quitar dicho archivo: Allá vamos...

lib.php (versión 3)

<php
if (isset($_POST['enviar_archivo'])){
    if ($_FILES["archivo"]["error"] == 2){
        echo "el archivo es demasiado grande";
    }elseif ($_FILES["archivo"]["error"] == 4){
        echo "debe seleccionar un archivo";
    }else{
        foreach($_FILES['archivo'] as $clave => $valor){
            echo "la clave ".$clave." tiene el valor ".$valor."<br>";
        }
        move_uploaded_file ($_FILES["archivo"]["tmp_name"],"imagen/".$_FILES["archivo"]["name"]);		
        echo "<br>";
        echo "Ahora puedes ver el <a href=\"imagen/".$_FILES['archivo']['name']."\">Archivo que Subiste</a><br><br>";
        echo "Puedes quitar este archivo si lo deseas: <br>";
        echo "<form method=\"post\" action=\"lib.php\">";
        echo "<input type=\"hidden\" name=\"archivo\" value=\"".$_FILES['archivo']['name']."\">";
        echo "<input type=\"submit\" name=\"quitararchivo\" value=\"Borrar Archivo\">";
        echo "</form>";
    }
}
if (isset($_POST['quitararchivo'])){
    unlink ("imagen/".$_POST['archivo']);
    echo "El archivo ha sido borrado";
}
?>

El último isset que aparece en este código es para dar de baja al archivo cuando se presione el botón Borrar Archivo. Lo cual se hace con la función unlink("ruta_de_archivo_a_borrar")

Campo de Imagen (image):

El campo image envía las coordenadas en donde se hizo clic al momento de enviar el formulario. Por Lo que recurrimos a la implementación de un campo hidden para confirmar dicho envío.

Se agregó también un evento JavaScript que asigna al campo hidden el value 'botonimag' el cual será comprobado por nuestro script en lib.php para saber si la información está llegando de este formulario...


formulario.html

<form method="post" action="lib.php" name="frmimagen">
    <b>Enviar este texto:</b>
    <input type="text" name="texto" value="Imagen como botón" id="">
    <br>
    <input type="hidden" name="btnim" id="">
    <input type="image" onclick="javascript: frmimagen.btnim.value='botonimag'" name="btnimagen" src="btn.png">
</form>

y aquí nuestro archivo lib.php

lib.php

<?php
if (isset($_POST['btnim'])) {
    echo "Si lees este texto es porque presionaste el botoncito enviar, el cual es una imagen, como habrás notado.";
}
?>

Quizás más adelante hagamos algo como Formularios Avanzados o Algo así, les parece…??? Por ahora quedamos aquí, por cierto te dejo un pequeño obsequio por haber leído todo este tutorial...

Recursos Extras:
Son los archivos de ejemplo

Descomprime los archivos en el host de tu servidor virtual y ejecuta el archivo index.php. Apuestos que se converrtirá en tu archvo de consulta, luego me cuentas

Saludos..!!! es todo por ahora...


R-Luis...