{"id":134,"date":"2023-06-20T21:13:56","date_gmt":"2023-06-20T21:13:56","guid":{"rendered":"https:\/\/robetorr.com\/?p=134"},"modified":"2023-06-22T22:59:25","modified_gmt":"2023-06-22T22:59:25","slug":"pasar-valores-de-formulario-en-html-a-php","status":"publish","type":"post","link":"https:\/\/robetorr.com\/index.php\/2023\/06\/20\/pasar-valores-de-formulario-en-html-a-php\/","title":{"rendered":"Pasar valores de formulario en HTML a PHP"},"content":{"rendered":"\n<p>En esta entrega, me propongo a explicar el proceso de ingresar datos con un formulario hecho en HTML \/ Bootstrap y enviarlos al backend PHP (servidor) como primer paso para que puedas entender como PHP recibe los datos desde el frontend (HTML).<\/p>\n\n\n\n<p>Primero que todo tienes que entender la terminolog\u00eda, en este caso, cuando escuches que hablen del frontend debes saber que se est\u00e1n refiriendo a todo el proceso que ocurre del lado del cliente, es decir lo que tu vez en tu computador y dispositivos como HTML, dise\u00f1o, color y fuentes de letras (CSS) y javascript. Cuando te hablen de backend tienes que entender que se refieren a lo que sucede del lado de servidor, el proceso que se ejecuta detr\u00e1s de lo que tu vez en pantalla, para ejecutar estos procesos se utilizan gran variedad de lenguajes de programaci\u00f3n, en este caso en particular, usaremos PHP.<\/p>\n\n\n\n<p>Entonces, el proceso que haremos es el siguiente:<\/p>\n\n\n\n<ul>\n<li>crearemos tres programas con extensi\u00f3n (.php) los cuales llamaremos formulario1-front.php, formulario1-back.php y formulario2-back.php.<\/li>\n\n\n\n<li>Luego, subiremos (copiaremos) esos archivos a nuestro servidor web<\/li>\n\n\n\n<li>Finalmente Probaremos el c\u00f3digo.<\/li>\n<\/ul>\n\n\n\n<p>En Windows creamos una carpeta que lleve por nombre Curso. Y abrimos el editor de texto en mi caso, yo utilizo el editor sublime-text.<\/p>\n\n\n\n<p>Creamos un nuevo archivo al cual llamaremos formulario1-front.php y escribiremos en el lo siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t\t&lt;!-- Meta --&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt; \n\t\t&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;\n\t\t&lt;!-- SITE TITLE --&gt;\n\t\t&lt;title&gt;Curso PHP&lt;\/title&gt;\t\t\t\n\t\t&lt;!-- Latest Bootstrap min CSS --&gt;\n  &lt;!-- Google Fonts --&gt;\n  &lt;link href=\"assets\/img\/favicon.png\" rel=\"icon\"&gt;\n  &lt;link href=\"assets\/img\/favicon.png\" rel=\"apple-touch-icon\"&gt;    \n    &lt;!-- Bootstrap CSS File --&gt;\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO\/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\"&gt;\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-2.2.4.min.js\" integrity=\"sha256-BbhdlvQf\/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.1\/dist\/umd\/popper.min.js\" integrity=\"sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ\/xAww941Ai1SxSY+0EQqNXNE6DZiVc\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"container-fluid\"&gt;\n  &lt;div class=\"row justify-content-center\"&gt;\n    &lt;div class=\"col-md-9\"&gt;\n      &lt;h2&gt;Formulario de Envio de Datos Metodo Post&lt;\/h2&gt;\n      &lt;form id=\"form1\" action=\"formulario1-back.php\" method=\"POST\"&gt;\n        &lt;div class=\"mb-3\"&gt;\n          &lt;label for=\"nombre\" class=\"form-label\"&gt;Nombre&lt;\/label&gt;\n          &lt;input type=\"text\" class=\"form-control\" name=\"nombre\" id=\"nombre\" placeholder=\"Ingrese el Nombre\"&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"mb-3\"&gt;\n          &lt;label for=\"direccion\" class=\"form-label\"&gt;Direccion&lt;\/label&gt;\n          &lt;textarea class=\"form-control\" name=\"direccion\" id=\"direccion\" rows=\"3\" placeholder=\"Ingrese la Direccion\"&gt;&lt;\/textarea&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"mb-3 text-center\"&gt;\n          &lt;button type=\"submit\" class=\"btn btn-primary\"&gt; Enviar &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/form&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;script type=\"text\/javascript\"&gt;\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>El contenido que va entre las equiquetas &lt;head> y &lt;\/head> ya fue explicado brevemente <a href=\"https:\/\/robetorr.com\/index.php\/2023\/06\/07\/primer-codigo-bootstrap-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a> puedes ir y consultar esa parte. Yo en este caso para ir avanzando, me voy a enfocar en las etiquetas <strong>FORM<\/strong>, <strong>INPUT<\/strong> y <strong>BUTTON<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form id=\"form1\" action=\"formulario1-back.php\" method=\"POST\"&gt;<\/code><\/pre>\n\n\n\n<p>En los atributos de FORM tenemos<\/p>\n\n\n\n<p>id=\"form1\" el id es el identificador unico que html le asigna a cada uno de los elementos o etiquetas que componen el sitio web.<\/p>\n\n\n\n<p>action=\"formulario1-back.php\" el action, es el atributo de la etiqueta form que le indica a html que debe hacer en caso de que se produzca el evento \u201csubmit\u201d o env\u00edo del formulario. En este caso al indicar action=\u201dformulario1-back.php\u201d le estamos incicando que cuando ocurra el evento \u201csubmit\u201d debe llamar a el script de formulario1-back.php.<\/p>\n\n\n\n<p>method=\"POST\" el m\u00e9todo, es el atributo que indica como se van a enviar los datos, existen dos tipos de m\u00e9todos com\u00fanmente usados para enviar la informaci\u00f3n. Estos m\u00e9todos son: m\u00e9todo POST y m\u00e9todo GET.<\/p>\n\n\n\n<p><strong>M\u00e9todo POST<\/strong> los datos son enviados al backend de manera oculta y es el m\u00e9todo mas usado por HTML y PHP ya que la informaci\u00f3n es enviada de manera confidencial.<\/p>\n\n\n\n<p><strong>M\u00e9todo GET<\/strong> los datos son enviados como par\u00e1metros encadenados en una direcci\u00f3n URL por lo que la informaci\u00f3n que va del frontend al backend es visible.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" class=\"form-control\" name=\"nombre\" id=\"nombre\" placeholder=\"Ingrese el Nombre\"&gt;<\/code><\/pre>\n\n\n\n<p>En los atributos de form tenemos:<\/p>\n\n\n\n<p>type=\"text\" type es el atributo que indica el tipo de entrada. Los tipos de entradas mas comunes son :<\/p>\n\n\n\n<ul>\n<li>text (Para entradas de tipo de texto)<\/li>\n\n\n\n<li>button (Para botones)<\/li>\n\n\n\n<li>radio (Para radio botones)<\/li>\n\n\n\n<li>submit (Para enviar el formulario)<\/li>\n\n\n\n<li>checkbox (Para campos verdadero\/falso)<\/li>\n\n\n\n<li>email (Para validar correos)<\/li>\n\n\n\n<li>password (Para ocultar contenido)<\/li>\n<\/ul>\n\n\n\n<p>class=\"form-control\" el atributo class es para indicar que clase css esta usando ese input. Es est\u00e9tico, indica con que ancho, color y fuente se va a mostrar el input en pantalla.<\/p>\n\n\n\n<p>name=\"nombre\" es el nombre de la variable con la que se va enviar el dato ingresado en el input es el par\u00e1metro mas importante en este caso porque su nomenclatura es que que se toma en cuenta para enviar los valores al backend.<\/p>\n\n\n\n<p>Mientras que id=\"nombre\" es un identificador \u00fanico que html le asigna a cada uno de los elementos o etiquetas que componen el sitio web.<\/p>\n\n\n\n<p>placeholder=\"Ingrese el Nombre\" el placeholder es lo que el input muestra cuando este vac\u00edo. En este caso se establece que por defecto muestre la frase \"Ingrese el Nombre\"<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"submit\" class=\"btn btn-primary\"&gt;<\/code><\/pre>\n\n\n\n<p>type=\"submit\" el type submit como ya lo indicamos anteriormente, es utilizado en los campos de tipo bot\u00f3n y es el que produce el evento \u201csubmit\u201d con el cual el formulario ejecuta la acci\u00f3n que le hemos indicado con el atributo action.<\/p>\n\n\n\n<p>Creamos un nuevo archivo al cual llamaremos formulario1-back.php y escribiremos en el lo siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nif(isset($_POST&#91;\"nombre\"])){\n  $nombre=$_POST&#91;\"nombre\"];\n}\nif(isset($_POST&#91;\"direccion\"])){\n  $direccion=$_POST&#91;\"direccion\"];\n}\n?&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t\t&lt;!-- Meta --&gt;\n\t\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt; \n\t\t&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;\n\t\t&lt;!-- SITE TITLE --&gt;\n\t\t&lt;title&gt;Curso PHP&lt;\/title&gt;\t\t\t\n\t\t&lt;!-- Latest Bootstrap min CSS --&gt;\n  &lt;!-- Google Fonts --&gt;\n  &lt;link href=\"assets\/img\/favicon.png\" rel=\"icon\"&gt;\n  &lt;link href=\"assets\/img\/favicon.png\" rel=\"apple-touch-icon\"&gt;    \n    &lt;!-- Bootstrap CSS File --&gt;\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO\/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\"&gt;\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-2.2.4.min.js\" integrity=\"sha256-BbhdlvQf\/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.1\/dist\/umd\/popper.min.js\" integrity=\"sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/js\/bootstrap.min.js\" integrity=\"sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ\/xAww941Ai1SxSY+0EQqNXNE6DZiVc\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"container-fluid\"&gt;\n  &lt;div class=\"row justify-content-center\"&gt;\n    &lt;div class=\"col-md-9\"&gt;\n    &lt;div class=\"row\"&gt;\n      &lt;div class=\"col text-center\"&gt;\n        &lt;h2&gt;Se Han recibido estos datos en el backend:&lt;\/h2&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n      &lt;form id=\"form1\" action=\"formulario1-front.php\" method=\"POST\"&gt;\n        &lt;div class=\"mb-3\"&gt;\n          &lt;label for=\"nombre\" class=\"form-label\"&gt;Nombre&lt;\/label&gt;\n          &lt;input type=\"text\" class=\"form-control\" name=\"nombre\" id=\"nombre\" placeholder=\"Ingrese el Nombre\" value=\"&lt;?php if(!empty($nombre)) { echo $nombre; } ?&gt;\" disabled&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"mb-3\"&gt;\n          &lt;label for=\"direccion\" class=\"form-label\"&gt;Direccion&lt;\/label&gt;\n          &lt;textarea class=\"form-control\" name=\"direccion\" id=\"direccion\" rows=\"3\" placeholder=\"Ingrese la Direccion\" disabled&gt;&lt;?php if(!empty($direccion)) { echo $direccion; } ?&gt;&lt;\/textarea&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"mb-3 text-center\"&gt;\n          &lt;button type=\"submit\" class=\"btn btn-primary\"&gt; Regresar &lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/form&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script type=\"text\/javascript\"&gt;\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>B\u00e1sicamente es el mismo c\u00f3digo con la diferencia de que en este programa, recibiremos los datos de enviados por formulario1-front.php.<\/p>\n\n\n\n<p>Para recibir los datos f\u00edjense en estas primeras lineas:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nif(isset($_POST&#91;\"nombre\"])){\n  $nombre=$_POST&#91;\"nombre\"];\n}\nif(isset($_POST&#91;\"direccion\"])){\n  $direccion=$_POST&#91;\"direccion\"];\n}\n?&gt;<\/code><\/pre>\n\n\n\n<p>isset() es una funcion de php que determina si una variable esta definida, en este sentido nos permite verificar si realmente, estamos recibiendo valores en la variable $_POST[\"nombre\"] las variables $_POST se utilizan para capturar valores provenientes del m\u00e9todo POST es un arreglo con todos los parametros enviados por POST y declarados con el atributo name del INPUT HTML<\/p>\n\n\n\n<p>Entonces, el condicional if indica que si las variables $_POST[\"nombre\"] y $_POST[\"direccion\"] estan definidas, le asigne sus respectivos valores a $nombre=$_POST[\"nombre\"] y $direccion=$_POST[\"direccion\"] con esto ya hemos definido dos variables adicionales ue son $nombre y $direccion. A diferencia de otros lenguajes de programaci\u00f3n PHP no tiene una nomenclatura especifica para declarar y definir variables, con solo escribir por ejemplo: $variable=2; PHP interpreta que $variable es una variable de tipo num\u00e9rico entero. Entonces tenemos ejemplos adicionales:<\/p>\n\n\n\n<p>$variable=\u2019Hola que tal\u2019; Encapsulada entre comillas o comilla simple $variable es de tipo texto.<\/p>\n\n\n\n<p>$variable=2.65; $variable es de tipo decimal o doble precision.<\/p>\n\n\n\n<p>$variable=true; $variable es de tipo boolean (verdadero\/falso).<\/p>\n\n\n\n<p>$variable=[\u20181\u2019,\u2019Hola\u2019]; $variable es de tipo array (arreglo de varios valores).<\/p>\n\n\n\n<p>Continuando con la explicaci\u00f3n de tenemos que el input id=\u201dnombre\u201d tiene el siguiente atributo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" class=\"form-control\" name=\"nombre\" id=\"nombre\" placeholder=\"Ingrese el Nombre\" value=\"&lt;?php if(!empty($nombre)) { echo $nombre; } ?&gt;\" disabled&gt;<\/code><\/pre>\n\n\n\n<p>value=\"&lt;?php if(!empty($nombre)) { echo $nombre; } ?&gt;\"<\/p>\n\n\n\n<p>Aqu\u00ed se inserta el c\u00f3digo PHP dentro del atributo value. El atributo value le asigna un valor por defecto al campo. Entonces, aqu\u00ed le estamos de una vez asignando el valor contenido en la variable $nombre.<\/p>\n\n\n\n<p>Noten que en el action del form esta definido para que ejecute formulario1-front.php, entonces cuando le hagamos click al boton regresar, el formulario formulario1-back.php retornara a formulario1-front.php.<\/p>\n\n\n\n<p>Importante tambi\u00e9n el atributo \u201cdisabled\u201d que se ha definido en los input para configurarlos como no editables.<\/p>\n\n\n\n<p>El ultimo archivo formulario2-back.php tiene el mismo contenido pero con la diferencia que en el los valores se reciben por m\u00e9todo GET esta definido en las primeras lineas de esta manera:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nif(isset($_GET&#91;\"nombre\"])){\n  $nombre=$_GET&#91;\"nombre\"];\n}\nif(isset($_GET&#91;\"direccion\"])){\n  $direccion=$_GET&#91;\"direccion\"];\n}\n?&gt;<\/code><\/pre>\n\n\n\n<p>Para enviar valores por GET, los datos se encadenan de la siguiente manera:<\/p>\n\n\n\n<p>https:\/\/ hosting\/programa.php?nombredevariable=valor&amp;nombredevariable2=valor2<\/p>\n\n\n\n<p>En nuestro caso seria algo como as\u00ed: https:\/\/ 10.72.3.105\/Curso\/formulario2-back.php?nombre=Robert&amp;direccion=Maracay<\/p>\n\n\n\n<p>Esto se escribe directamente en la barra de direcciones del navegador o se llama desde javascript.<\/p>\n\n\n\n<p>En conclusion, en esta entrega te explique en que consisten:<\/p>\n\n\n\n<ul>\n<li>Atributos de FORM<\/li>\n\n\n\n<li>Atributos de INPUT<\/li>\n\n\n\n<li>Tipos de INPUT<\/li>\n\n\n\n<li>Evento SUBMIT<\/li>\n\n\n\n<li>Los metodos GET y POST<\/li>\n\n\n\n<li>Algunos tipos de variables PHP<\/li>\n<\/ul>\n\n\n\n<p>A continuacion, te dejo el video de como subir los datos al server en este caso yo utilizo una maquina virtual con debian instalado para emular un servidor web y utilizo WINSCP para subir los archivos a ese \"hosting\" emulado<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-gestor-del-servicio wp-block-embed-gestor-del-servicio wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Primer formulario sencillo HTML y PHP nombre y direccion. Metodos POST y GET\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/yY4mO2nZcpw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>En esta entrega, me propongo a explicar el proceso de ingresar datos con un formulario hecho en HTML \/ Bootstrap y enviarlos al backend PHP (servidor) como primer paso para que puedas entender como PHP recibe los datos desde el frontend (HTML). Primero que todo tienes que entender la terminolog\u00eda, en este caso, cuando escuches [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/134"}],"collection":[{"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":6,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/posts\/134\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robetorr.com\/index.php\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}