En este cap\u00edtulo veremos como generar una interacci\u00f3n entre los usuarios que visiten nuestro sitio web y nuestro servidor, es decir, que los usuarios puedan enviar informaci\u00f3n a nuestro servidor, y desde nuestro servidor procesar dicha informaci\u00f3n. Por ejm, que un usuario quiera autenticarse, lo que tiene que hacer es enviar su correo y contrase\u00f1a y desde nuestro servidor se comprobar\u00e1 que sean correctas, de ser as\u00ed iniciamos sesi\u00f3n, caso contrario lo rechazamos.<\/p>\n\n\n\n
Mediante los formularios se puede enviar dicha informaci\u00f3n. Para entender lo que son los formularios vamos a crear una sintaxis con todos los tipos de campos (inputs) que se pueden crear.<\/p>\n\n\n\n
Existen 2 m\u00e9todos para el env\u00edo de formulario:<\/p>\n\n\n\n
Siempre que enviamos informaci\u00f3n v\u00eda formulario, dicha informaci\u00f3n se queda almacenada en unas variables globales que tiene PHP. Existen varios tipos de estas variables globales.<\/p>\n\n\n\n
Cuando queramos enviar archivos a nuestro servidor no podemos utilizar el m\u00e9todo GET, debemos utilizar necesariamente el m\u00e9todo POST. Adem\u00e1s hay que habilitar el env\u00edo de archivos, para lo cual, a la etiqueta <form><\/em><\/strong> le tenemos que agregar el atributo enctype=\u00bbmultipart\/form-data\u00bb<\/em><\/strong>. De esta manera habilitamos el env\u00edo de archivos desde un formulario, si no lo hacemos no podremos enviar archivos al servidor.<\/p>\n\n\n\n Para recibir el archivo ya no utilizaremos las variables globales anteriormente utilizadas ($_POST o $_REQUEST), utilizaremos la variable global $_FILES[‘image’], siendo image la llave que utilizaremos para recuperar los datos del archivos que hemos enviado.<\/p>\n\n\n\n La etiqueta <select><\/select> viene acompa\u00f1ada de la etiqueta <option><\/option>. Los select funcionan de una manera similar a los inputs de tipo radio, s\u00f3lo que permite tener estos elementos en forma de lista.<\/p>\n\n\n\n La etiqueta <textarea> permite colocar una especie de input pero m\u00e1s grande, se utiliza si necesitamos mandar un texto m\u00e1s largo.<\/p>\n\n\n\n Os dejamos un ejemplo completo con dos p\u00e1ginas, una que env\u00eda los datos mediante un formulario y la otra que los recibe.<\/p>\n\n\n\n formulario.php<\/strong><\/p>\n\n\n\n formulario-recepcion.php<\/strong><\/p>\n\n\n\n En este cap\u00edtulo veremos como generar una interacci\u00f3n entre los usuarios que visiten nuestro sitio web y nuestro servidor, es […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4518,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5202","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo veremos como generar una interacci\u00f3n entre los usuarios que visiten nuestro sitio web y nuestro servidor, es […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/5202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=5202"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/5202\/revisions"}],"predecessor-version":[{"id":5205,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/5202\/revisions\/5205"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/4518"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=5202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Estructura select<\/h2>\n\n\n\n
Estructura textarea<\/h2>\n\n\n\n
Ejemplo<\/h2>\n\n\n\n
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n\n<body>\n <form action=\"21-formularios2.php\" method=\"POST\" enctype=\"multipart\/form-data\">\n <!-- Input type text -->\n <!-- Primera manera del uso de la etiqueta <label> junto con <input>, para ello en el input\n ponemos un atributo id que tiene que tener el mismo valor que el valor utilizado en el atributo\n for de la etiqueta label, en nuestro caso el atributo es 'nombre' -->\n\n <!-- <label for=\"nombre\">Nombre<\/label>\n <input type=\"text\" id=\"nombre\"> -->\n\n <!-- Segunda manera del uso de la etiqueta <label> junto con <input>, todo dentro\n de las etiquetas <label> <\/label> Ser\u00e1 el que usaremos para el ejercicio -->\n\n <label>\n Nombre: \n <input type=\"text\" name=\"nombre\" autofocus=\"autofocus\">\n <\/label> \n\n <br>\n\n <label>\n Edad: \n <input type=\"number\" name=\"edad\">\n <\/label> \n\n <br>\n\n <!-- Inputs de tipo radio para s\u00f3lo poder elegir una opci\u00f3n -->\n <!-- El atributo name tiene que llevar el mismo nombre -->\n <p>Sexo: <\/p>\n\n <label>\n <input type=\"radio\" name=\"sexo\" value=\"masculino\">\n Masculino \n <\/label> \n\n <label>\n <input type=\"radio\" name=\"sexo\" value=\"femenino\">\n Femenino \n <\/label> \n \n <br>\n\n <!-- Env\u00edo de m\u00e1s de 1 informaci\u00f3n en un mismo campo mediante un input tipo checkbox -->\n <p>Roles: <\/p>\n\n <label>\n <input type=\"checkbox\" name=\"roles[]\" value=\"administrador\">\n Administrador \n <\/label> \n\n <label>\n <input type=\"checkbox\" name=\"roles[]\" value=\"editor\">\n Editor \n <\/label> \n\n <label>\n <input type=\"checkbox\" name=\"roles[]\" value=\"moderador\">\n Moderador \n <\/label> \n\n <br><br>\n\n <!-- Env\u00edo de archivos -->\n <label>\n Imagen: \n <input type=\"file\" name=\"image\">\n <\/label> \n\n <br>\n\n <!-- Uso de la etiqueta <select>, similar a el input de tipo radio pero mostrando una lista -->\n <p>Oficio:<\/p>\n <select name=\"oficio\">\n <option value=\"mecanico\">Mec\u00e1nico<\/option>\n <option value=\"carpintero\" selected>Carpintero<\/option>\n <\/select>\n <br><br>\n\n <!-- Uso de la etiqueta <textarea> -->\n <label>\n Mensaje: <br>\n <textarea name=\"mensaje\" cols=\"100\" rows=\"10\">Escribe tu texto<\/textarea>\n <\/label>\n\n <br><br>\n\n <!-- Enviar todos los campos del formulario al archivo incluido en el atributo action de \n la etiqueta <form> -->\n <button type=\"submit\">Enviar<\/button>\n <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n<\/head>\n\n<body>\n <?php\n $nombre = $_REQUEST['nombre'];\n echo \"El nombre del usuario es: <b> $nombre<\/b>\";\n\n echo \"<br \/>\";\n \n $edad = $_REQUEST['edad'];\n echo \"La edad del usuario es: <b> $edad<\/b>\";\n\n echo \"<br \/>\";\n \n $sexo = $_REQUEST['sexo'];\n echo \"El sexo del usuario es: <b> $sexo<\/b>\";\n \n $roles = $_REQUEST['roles'];\n echo \"<p>Roles: <\/p>\";\n echo \"<ul>\";\n foreach ($roles as $rol) {\n echo \"<li>$rol<\/li>\";\n }\n echo \"<\/ul>\";\n \n $image = $_FILES['image'];\n \/\/ var_dump($image)\n \n \/\/ Creo una variable que muestra la ruta de nuestro servidor\n $patch = $_SERVER['DOCUMENT_ROOT'] . \"\/2025\/php8-mysql8-curso\/imagenes\/\" . $image['name'];\n \n \/\/ echo \"La ruta donde se almacena la imagen es: $patch\";\n \/\/ echo \"<br \/><br \/>\";\n \n \/\/ Vamos a mover la imagen de la carpeta temporal a la carpeta que est\u00e1 en la ruta $path\n \/\/ Lo haremos mediante la funci\u00f3n move_uploaded_file(donde se encuentra actualmente la imagen, ruta de destino)\n move_uploaded_file($image['tmp_name'], $patch);\n \n $oficio = $_REQUEST['oficio'];\n echo \"El oficio del usuario es: <b> $oficio<\/b><br \/>\";\n\n $mensaje = $_REQUEST['mensaje'];\n echo \"Mensaje enviado: $mensaje\";\n ?>\n <\/form>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"