Como hacer un FORMULARIO con HTML y PHP desde cero
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
🌐 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.
🔖 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.
💻 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.
📡 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
💡HTML
💡PHP
💡Acción
💡Método
💡Nombre (name)
💡Valor (value)
💡Enviar (submit)
💡GET
💡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.
Transcripts
[Música]
muy bien el día de hoy 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
vamos a hacer todo esto desde cero para
lo cual damos por hecho que ya tenemos
instalado un servidor php en mi caso
tengo instalado el paquete de sham tengo
ya creada en hd 2 php formulario es una
carpeta todavía no tengo ningún archivo
tengo abierto un sublime text 3 listo ya
para comenzar a crear
todo lo necesario para este pequeño
ejemplo vamos a comenzar con el
formulario en html para lo cual vamos a
crear un nuevo archivo en nuestra
carpeta
vamos a llamarle index.html vamos a
crear una estructura básica
a html
con el heat
con el cuerpo de nuestra página
en el head vamos a poner el título vamos
a ponerle el formulario
formulario html
y vamos a ponerle también la meta de
para evitar los los caracas para poder
tener los caracteres como acentos y
otros caracteres la luz f 8
muy bien ahora vamos a comenzar con
nuestro nuestro formulario
qué es un pequeño comentario y vamos a
comenzar lo primero que vamos a hacer es
mediante la etiqueta form
creamos lo que es nuestro formulario y
dentro de ésta de este formulario vamos
a crear tres campos de texto simples
para para meternos en el nombre
asunto mensaje y cualquier cosa que se
nos pueda ocurrir vamos a crear dentro
del formulario con la etiqueta de
párrafo
vamos a crear el primero como dijimos un
nombre
y posteriormente vamos a crear una una
caja de texto tipo input de tipo text
input ex imputa
computaex
aunque por el momento vamos a dejarlo
así posteriormente vamos a ver lo que se
necesita agregarle a este imputa para
poder enviar información desde nuestro
formulario en html a nuestra página de
php vamos a copiar un par de veces más
este esta línea de código vamos a
agregar también no sé de que nuestro
formulario también pida el asunto que
pida
un mensaje
suponiendo que fuera un formulario tipo
enviar correo para enviar correo
electrónico
ok hasta el momento nuestro formulario
quedaría de esta manera guardamos
vemos que nuestro formulario ahora sí ya
está un poco más en forma tenemos
nuestra caja de nombre nuestra caja de
asunto nuestra caja para mensaje
lo que vemos que falta es obviamente un
botón de enviar
a falta también en el momento de darle
clic en el botón de enviar se envié toda
la información que el usuario ingrese en
estos tres en estas tres cajas a una
página php en donde procesaremos la
información
para hacer todo esto que falta vamos a
ver que en la etiqueta de fort tiene
varios atributos entre ellos está el
atributo action y el atributo método
método vamos a revisar el primero el
atributo actions de formulario indica a
donde a qué páginas de nuestro sitio
vamos a mandar la información que el
usuario escribe dentro del formulario es
decir yo como usuario en nombre de pongo
jonathan en asunto pongo prueba el
mensaje pongo hola esta información a
donde la voy a enviar una vez que el
usuario presione el botón de enviar que
todavía no creamos a dónde es a qué
página se va a enviar toda esta
información esto es lo que quiere decir
el action por ejemplo aquí vamos a
suponer que vamos a enviar toda esta
información a una página que se va a
llamar procesar punto php que es que
todavía no hemos creado pero que vamos a
crear posteriormente
otro atributo
de forma de nuestro formulario es el
atributo método un método que nos dice
de qué forma vamos a enviar la
información desde nuestro formulario a
esta página del action a nuestro proceso
php existen dos formas de enviar la
información lo que es enviar la
información a través del método get y lo
que es la enviar la información a través
del método post por el momento vamos a
ponerle web ya posterior a que tengamos
nuestro ejemplo más avanzado voy a
explicar las diferencias entre el de
tipos y qué pasa si en lugar de que le
ponemos post
por el momento vamos a dejarle la acción
del forma que sea procesado punto php
una página que posteriormente vamos a
crear y que es a donde se va a enviar la
información y el método vamos a dejarlo
como get ok falta también nuestro botón
para enviar la información para eso
vamos a crear otro otro párrafo vamos a
quitarle el texto vamos a dejar un input
pero éste ya no va a ser un input de
tipo text sino va a ser un hipotético de
tipo submit
y vamos a llevar otro atributo llamado
valor y vamos a ponerle enviar este
atributo llamado valor es lo que va a
decir el botón entonces todo todo de
tipo submit que esté dentro de un
formulario lo que va a hacer es que va a
desencadenar la acción del formulario en
este caso va a ser pues la de enviar la
información a la página procesar punto
php
entonces si te preguntas cuándo es
cuando le decimos al botón que ya cuando
le pique en enviar se envíen la
información pues esto es por defecto
todos los input de tipo submit dentro de
un formulario lo que hacen es
desencadenar la acción de la acción
propia del formulario en este caso
procesar punto php es decir que toda la
información dentro de este formulario se
va a enviar a la página procesar punto
de php ahora como la vamos a recibir en
esta en este archivo de procesar punto
php para esto es necesario que en cada
input dentro de nuestro formulario
establezcamos su nombre un name a través
del atributo name
nosotros podemos decirle que este input
en el que nosotros sabemos que va a ser
para almacenar el nombre pero que el
sistema no sabe vamos a ponerle en name
vamos a ponerle nombre
vamos a poner también un mail
para asunto
your name para mensaje posteriormente ya
que creemos la página de procesar punto
php vamos a ver más en detalle porque
cuál es la función en particular en
especial de este name te puedo decir
ahorita que es la forma en la que tú
puedes acceder a la información de cada
input que se envió ok entonces lo
siguiente que vamos a hacer es crear ya
nuestra página de procesar punto php
simplemente aquí en sublime text en caso
de que estés usando cualquier otro
programa pues simplemente es crear un
nuevo archivo vamos a guardarlo como
procesar punto php que es el nombre de
los tracks de nuestro documento que le
pusimos en nuestro action en nuestro
formulario procesar punto php procesar
punto php este documento es de php por
lo tanto hay que abrir nuestros nuestras
clásicas entradas de php
ahora lo siguiente que vamos a hacer es
crear una variable llamada nombre
crear una variable llamada nombre que
sea igual
a la información que se va a recibir que
index.html a través de su formulario nos
va a enviar para acceder a esta
información que se que se está
recibiendo se accede a través de un
arreglo en php que se accede de esta
forma el signo de dólar guión bajo get y
entre los corchetes va a ir el nombre el
name del atributo que queremos del input
que queremos obtener su información en
este caso si yo quiero obtener lo que el
usuario ingresó en este input que yo le
puse en el input le puse el nombre
entonces ya sabemos que yo quiero
obtener lo que en el input nombre con el
input de en el nombre el usuario
escribió lo mismo vamos a hacer
para obtener
asunto creamos una variable para asunto
y vamos a obtenerlo mediante get
asunto repito una vez más este lo que va
adentro de get asunto debe de coincidir
con lo que tú quieres bajar que está
dentro de tu name de tu input en este
caso pues van a ser nombre va a ser
asunto iba a ser mensaje entonces yo
quiero obtener la información que el
usuario escribió el nombre en asunto y
el mensaje una vez que ya tengamos esta
estas variables ahora sí lo que el
usuario escribió en cada una de las tres
cajas de texto ya la tengo guardado aquí
sin usar escribió juan ya tengo el
nombre ya tengo guardado lo que es juan
si en asuntos ilustrar escribió demo ya
tengo la palabra demo si el mensaje que
me faltó ponerle la variable se llama
mensaje sin la variable mensaje
en el input mensaje el usuario escribió
hola mundo en la variable mensaje ahora
ya tengo ese texto de hola mundo para
comprobarlo
vamos a imprimir con hecho vamos a
imprimir bueno primero vamos a poner
un encabezado un h 2 que digan no sé de
información recibida desde php
vamos a imprimir otro hecho
que diga el nombre es el nombre recibido
el nombre recibido es y vamos a
concatenar en php se concatena con el
punto vamos a concatenar y vamos a
mandar a llamar la variable en donde
guardamos nombre el nombre que el
usuario escribió vamos a volver a
concatenar y vamos a darle un salto de
línea
vamos a copiar esta línea un par de
veces más para hacer lo mismo para
asunto
el asunto recibido es y concatenados con
la variable asunto y el mensaje recibido
es y con acá tenemos con la variable el
mensaje
ok vamos a
vamos a recargar nuestra página y puedes
ver que ya se agregó el botón
y vamos a escribir aquí en nombre
suponerle jonathan vamos a ponerle a la
xunta vamos a tener la prueba y vamos a
ponerle un mensaje vamos a darle clic en
enviar y como puedes ver se llamando a
la página procesar punto php mandó la
información a través de la url en forma
de parámetros
esto es procesar punto php el signo de
interrogación que cierra y el nombre de
nuestro input es igual al valor que
tiene un signo del asunto que es el
nombre del segundo input igual al texto
de ese input otra vez el signo de iu y
el nombre del tercer input y igual al
texto que tenía este tercer esta tercera
caja como puedes ver por el método que
se pues se pasa toda la información a
través de la url de nuestra de nuestra
página también puedes ver que aquí todo
lo que imprimimos se pasó correctamente
nosotros pusimos en el formulario el
nombre de recibidores jonathan pusimos
enlace
prueba y pusimos el mensaje hola cómo
estás todo se envió correctamente desde
un formulario en html a través de una a
través de un formulario a php vamos a
dar en regresar vamos a recargar
y vamos ahora a cambiar el el método por
el que el formulario pasa la información
de index html a procesar php para eso
vamos a revisar ahora el método post lo
hicimos todo esto mediante el método get
el método que te pasa todos los
parámetros por la url ahora vamos a
hacerlo a través del método post para
eso simplemente hay que cambiar el
método en el formulario y en php la
manera en la que recibimos esta
información ya no va a ser con dólar
guión bajo get sino con dólar bajo post
todo con mayúsculas
cambiamos guardamos los cambios y vamos
de nuevo a recargar la página
voy a través a poner jonathan vamos a
volver a poner pruebas y hola cómo estás
vamos a dar en enviar y como puedes ver
el resultado es exactamente el mismo se
mandó a la misma información se imprimió
pero la diferencia es que la información
o está éstos esta información ya no se
ve en forma de parámetros en la url sino
que se mandaron digamos de forma interna
pero se siguen mandando podemos ver un
ejemplo si vamos a inspeccionar
estoy en google chrome tiene una
herramienta de network de red para para
seguir o tráquea los eventos de red
vamos
volverá a ser el ejemplo vamos a ponerle
aquí jonathan prueba hola cómo estás
vamos a darle en enviar y como puedes
ver si le damos clic aquí en procesar
punto php nos da cierta información de
los ya desde esta conexión y nos vamos
hasta abajo en datos del formulario nos
vemos como de todo modo se sigue pasando
la información el nombre con su con su
valor jonathan el input name asunto con
su valor prueba y el input ni mensaje y
con su valor hola cómo estás entonces
aunque no se siga habían aunque no se
vea en la url también se está mandando
la información pero de forma interna
está en ocasiones es mejor utilizar el
método get y en otras ocasiones es mejor
usar el método post ya depende de las
necesidades y requerimientos de nuestro
proyecto y pues esto es todo hemos visto
cómo crear un formulario con html pasar
información de este formulario a php ya
una vez aquí podemos hacer lo que
queramos con información mandar un email
lo que queramos
[Aplausos]
[Música]
[Aplausos]
[Música]
Посмотреть больше похожих видео
![](https://i.ytimg.com/vi/pJM3inWDSSA/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AHUBoAC4AOKAgwIABABGGQgZChkMA8=&rs=AOn4CLDsJiyB91X-3gf7EuyxoQd6HtjfEg)
Web 1 - Formularios con Javascript
![](https://i.ytimg.com/vi/HSj1CRba8tg/hq720.jpg)
FormData en javascript - Obteniendo datos de un formulario - Como cuando y porque usarlo - JS
![](https://i.ytimg.com/vi/xbYl8fdZ3Xg/hq720.jpg)
Curso de HTML y CSS. 2.1. Estructura de una página web. Párrafos de texto
![](https://i.ytimg.com/vi/_LVmsODU5FQ/hq720.jpg?v=60f5ecb0)
Cómo hacer una PÁGINA WEB en BLOC de NOTAS
![](https://i.ytimg.com/vi/tpCOfg1FgPw/hq720.jpg)
🧡 TODOS los Elementos de formularios en HTML [Curso de HTML desde cero]
![](https://i.ytimg.com/vi/LZ1v5TtsyeE/hq720.jpg)
3.- PHP Orientado a Objetos - Metodos & Atributos
5.0 / 5 (0 votes)