Como hacer un FORMULARIO con HTML y PHP desde cero

Jonathan Melgoza

10 Aug 201716:28

Summary

TLDREste tutorial detallado abarca la creación de un formulario HTML desde cero y cómo enviar los datos ingresados a una página PHP. Cubre aspectos fundamentales como la estructura básica de HTML, etiquetas de formulario, campos de entrada, botón de envío y los atributos 'action' y 'method' para especificar el destino y el método de envío (GET o POST). Posteriormente, se explica cómo recibir y procesar los datos enviados en PHP utilizando las superglobales $_GET y $_POST. El video culmina demostrando la implementación completa y comparando visualmente las diferencias entre los métodos GET y POST.

Takeaways

😃 Se muestra cómo crear un formulario en HTML y enviar la información a una página PHP.
🔑 Se explica la creación de un archivo HTML con una estructura básica y la creación de campos de texto para nombre, asunto y mensaje.
📝 Se detalla la importancia de los atributos 'action' y 'method' en la etiqueta <form> para especificar el destino de los datos y el método de envío (GET o POST).
📤 Se crea un botón de envío con un input de tipo 'submit' dentro del formulario para desencadenar la acción de envío de datos.
📂 Se crea un archivo PHP llamado 'procesar.php' para recibir y procesar los datos enviados desde el formulario HTML.
💻 Se explica cómo acceder a los datos enviados desde el formulario utilizando las variables $_GET y $_POST en PHP, dependiendo del método utilizado.
🔄 Se demuestra la diferencia entre utilizar el método GET (datos en la URL) y el método POST (datos enviados internamente).
🕵️‍♂️ Se utiliza la herramienta Network de Google Chrome para inspeccionar los datos enviados en ambos métodos (GET y POST).
✍️ Se imprime la información recibida en el archivo PHP para verificar que se recibió correctamente.
🚀 Se destaca que una vez recibidos los datos en PHP, se pueden realizar diversas tareas como enviar correos electrónicos u otras acciones.

Q & A

¿Cuál es el objetivo principal del tutorial presentado en el guion?
-El objetivo principal es enseñar cómo crear un formulario en HTML y enviar la información ingresada por el usuario a una página en PHP.
¿Qué se necesita tener instalado para seguir el tutorial?
-Se necesita tener instalado un servidor PHP, como el paquete XAMPP mencionado en el guion.
¿Qué elementos básicos se crean en el formulario HTML mencionado?
-Se crean tres campos de texto simples para nombre, asunto y mensaje, y un botón de enviar.
¿Qué atributos se utilizan en la etiqueta form para especificar el destino y método de envío de los datos?
-Se utilizan los atributos 'action' para especificar el destino de los datos y 'method' para el método de envío, que puede ser GET o POST.
¿Cuál es la función del atributo 'action' en un formulario HTML?
-El atributo 'action' indica a qué página del sitio se enviará la información ingresada en el formulario por el usuario.
¿Qué diferencia hay entre enviar datos con el método GET y el método POST?
-El método GET envía los datos a través de la URL, mientras que el método POST los envía de forma interna, sin mostrarlos en la URL.
¿Por qué es importante asignar un atributo 'name' a cada input del formulario?
-El atributo 'name' permite identificar cada input del formulario y acceder a su valor en el archivo PHP que procesa la información.
¿Cómo se accede a la información enviada desde el formulario en el archivo PHP?
-Se accede a la información mediante los arreglos $_GET o $_POST en PHP, utilizando el 'name' de cada input como clave.
¿Cuál es la ventaja de usar el método POST sobre GET para enviar datos de un formulario?
-La ventaja principal del método POST es que los datos enviados no se muestran en la URL, lo que lo hace más seguro para enviar información sensible.
¿Qué se puede hacer con la información una vez que es recibida en el archivo PHP?
-Una vez recibida la información en PHP, se puede procesar de diversas maneras, como almacenarla en una base de datos, enviar un email, entre otras.

Outlines

00:00

🌐 Creación de un formulario HTML y envío de información a PHP

Esta sección introduce el tema principal: crear un formulario HTML desde cero y enviar la información ingresada a una página PHP. Se explica que se tiene instalado un servidor PHP y se crea un archivo index.html. Se comienza a estructurar el formulario HTML básico con etiquetas head, body y form. Se agregan tres campos de texto (nombre, asunto y mensaje) utilizando la etiqueta input.

05:03

🔖 Atributos action y method del formulario

Se explican los atributos action y method de la etiqueta form. El atributo action indica la página a la que se enviará la información del formulario (en este caso, procesar.php). El atributo method especifica cómo se enviará la información, ya sea mediante GET o POST (inicialmente se utiliza GET). Se agrega un botón de envío con un input de tipo submit. También se mencionan los atributos name para cada campo de texto, los cuales servirán para acceder a la información enviada desde PHP.

10:06

💻 Creación del archivo procesar.php

Se crea el archivo procesar.php, que recibirá la información enviada desde el formulario HTML. Se obtienen los valores ingresados por el usuario utilizando la superglobal $_GET y los nombres de los campos de texto. Se almacenan estos valores en variables PHP (nombre, asunto, mensaje). Finalmente, se imprimen los valores recibidos en el navegador utilizando etiquetas HTML.

15:07

📡 Cambio al método POST y prueba

Se modifica el método del formulario a POST y se actualiza la forma de obtener los valores en procesar.php utilizando $_POST en lugar de $_GET. Se realiza una prueba ingresando datos en el formulario y se comprueba que la información se envía correctamente a procesar.php sin aparecer en la URL. Además, se utiliza la herramienta Network de las herramientas de desarrollador para ver los datos del formulario enviados. Se mencionan brevemente las diferencias entre los métodos GET y POST.

Mindmap

Keywords

💡Formulario

Un formulario es un documento estructurado que contiene campos para ingresar datos, como campos de texto, casillas de verificación, botones de opción, etc. En el contexto del video, se crea un formulario HTML con tres campos de texto (nombre, asunto y mensaje) y un botón de envío. El formulario permite al usuario ingresar información y enviarla a una página PHP para su procesamiento.

💡HTML

HTML (Hyper Text Markup Language) es un lenguaje de marcado utilizado para crear y estructurar páginas web. En el video, se utiliza HTML para crear la estructura básica de la página y el formulario con sus respectivos campos de entrada. El código HTML define los elementos visuales y la disposición del formulario que el usuario verá en el navegador.

💡PHP

PHP (Hypertext Preprocessor) es un lenguaje de programación de código abierto ampliamente utilizado para el desarrollo web. En el video, se crea un archivo PHP (procesar.php) que recibe y procesa la información enviada desde el formulario HTML. PHP permite manipular los datos del formulario y realizar acciones adicionales, como enviar correos electrónicos o almacenar información en bases de datos.

💡Acción

La acción (action) es un atributo del elemento <form> en HTML que especifica la página o script al que se enviarán los datos del formulario cuando se envíe. En el ejemplo del video, la acción se establece como 'procesar.php', lo que indica que los datos ingresados en el formulario se enviarán a ese archivo PHP para su procesamiento.

💡Método

El método (method) es otro atributo del elemento <form> en HTML que determina la forma en que se enviarán los datos del formulario al servidor. En el video, se explican los dos métodos principales: GET y POST. GET envía los datos como parte de la URL, mientras que POST los envía de forma oculta en el cuerpo de la solicitud HTTP. En el ejemplo, se muestra cómo cambiar entre los métodos GET y POST y cómo acceder a los datos en PHP utilizando las variables superglobales $_GET y $_POST, respectivamente.

💡Nombre (name)

El nombre (name) es un atributo de los elementos de entrada (<input>) en un formulario HTML. Asigna un nombre único a cada campo de entrada, lo que permite identificar y acceder a los datos enviados desde el formulario en el lado del servidor (en este caso, en el archivo PHP). En el video, se muestra cómo asignar nombres a los campos de entrada para poder recuperar sus valores en el archivo 'procesar.php'.

💡Valor (value)

El valor (value) es un atributo utilizado en los elementos de entrada (<input>) de un formulario HTML. Representa el valor inicial o predeterminado que se muestra en el campo de entrada. En el video, se utiliza el atributo value para establecer el texto del botón de envío ('Enviar') mediante un elemento <input type='submit'>.

💡Enviar (submit)

Enviar (submit) se refiere a la acción de enviar los datos ingresados en un formulario HTML al servidor para su procesamiento. En el video, se crea un botón de tipo 'submit' que, cuando se hace clic, desencadena el envío de los datos del formulario a la página PHP especificada en el atributo 'action'.

💡GET

GET es uno de los métodos HTTP utilizados para enviar datos de formulario al servidor. Cuando se utiliza el método GET, los datos del formulario se anexan a la URL como parte de la cadena de consulta. En el video, se muestra cómo los datos del formulario se agregan a la URL cuando se utiliza el método GET y cómo acceder a esos datos en PHP mediante la variable superglobal $_GET.

💡POST

POST es otro método HTTP utilizado para enviar datos de formulario al servidor. A diferencia de GET, los datos enviados mediante POST no se agregan a la URL, sino que se envían en el cuerpo de la solicitud HTTP, lo que puede ser más seguro y permite enviar grandes cantidades de datos. En el video, se muestra cómo cambiar al método POST y cómo acceder a los datos del formulario en PHP mediante la variable superglobal $_POST.

Highlights

Vamos a ver cómo crear un formulario con HTML y enviar información o pasar información de este mismo formulario a una página en PHP.

Tenemos instalado un servidor PHP y una carpeta llamada 'php_formulario' creada.

Crearemos un archivo 'index.html' con la estructura básica HTML, incluyendo el título 'Formulario HTML' y la meta para permitir caracteres especiales.

Dentro del formulario, crearemos tres campos de texto simples para nombre, asunto y mensaje.

Utilizaremos la etiqueta 'form' para crear el formulario y los atributos 'action' y 'method' para indicar a dónde enviar la información y el método de envío (GET o POST).

Crearemos un botón de envío con el input de tipo 'submit' y el atributo 'value' para mostrar el texto del botón.

Utilizaremos el atributo 'name' en cada input para poder acceder a la información enviada desde PHP.

Crearemos un archivo 'procesar.php' para recibir la información enviada desde el formulario HTML.

En PHP, accederemos a la información enviada mediante el arreglo '$_GET' o '$_POST', dependiendo del método utilizado en el formulario.

Imprimiremos la información recibida en el archivo 'procesar.php' para comprobar que se envió correctamente.

Cambiaremos el método de envío de 'GET' a 'POST' para mostrar la diferencia en cómo se envía la información.

Con el método 'GET', la información se envía a través de la URL como parámetros, mientras que con el método 'POST', la información se envía de forma interna.

Utilizaremos la herramienta 'Network' del navegador para ver cómo se envía la información en ambos métodos.

Elegir entre 'GET' o 'POST' depende de los requerimientos y necesidades del proyecto.

Una vez que la información está en PHP, se puede procesar y realizar acciones como enviar un correo electrónico.