Implementación del envío de formularios en html.

Autor：Eve Cole Fecha de actualización：2025-01-18 12:48:01

código de envío del formulario

1. Análisis del código fuente

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>Documento</title></head><body><form action=/form.html método=GET> <!-- acción: Dirección para el envío del formulario --> <!-- método: método de envío de la política --><div clase=nombre> <label for=nombre>nombre de usuario</label> <tipo de entrada=texto nombre=nombre id=nombre marcador de posición = Ingrese el nombre de usuario> <!-- el marcador de posición es un texto emergente transparente--></div><div class=contraseña> <label for=contraseña>Contraseña</label> <tipo de entrada=nombre de contraseña=id de contraseña= contraseña placeholder=Por favor ingrese la contraseña></div><div class=sex> <label for=sex>gender</label> <input type=radio name=sex value=male>Hombre<input type=radio name=sex value= mujer>Mujer</div><div class=ciudad> <label for=ciudad>Ciudad favorita</label> <seleccione nombre=ciudad id=ciudad> <opción valor=pekín>Pekín</opción> <opción value=shanghai>Shanghai</option> <option value=chongqing seleccionado >Chongqing</option> <!-- seleccionado indica la opción seleccionada para mostrar en la página--> </select></div><div clase =hobby > <label for=hobby>Hobby</label> <tipo de entrada=nombre de casilla de verificación=valor de pasatiempo=leer>Lectura<tipo de entrada=nombre de casilla de verificación=valor de pasatiempo=flor>Arreglos florales<tipo de entrada=nombre de casilla de verificación=hobby value=sing>Singing<!-- Todos los nombres de las opciones deben ser iguales--></div><div class=area> <textarea id=area name=area cols=30 rows=10></textarea></ div> <botón>botón</botón><!-- El formulario se puede enviar--><input type=enviar valor=enviar> <!-- El formulario se puede enviar--><input type=botón value=button><!-- El formulario no se puede enviar--><input type=reset value=reset><!-- Restablecer el contenido que se ha ingresado en el formulario--></form></body> < /html>

2. Operación terminal

Abra la terminal gitbash y cambie a la carpeta donde se encuentra el html

Utilice la línea de comando http-server para abrir el servidor estático. Después de abrir, aparecerán dos direcciones IP. 127.xxx es la dirección de acceso local y 125.xxx es la dirección de acceso LAN (la premisa aquí es que nodejs se ha instalado y el servidor http se ha instalado con npm)

Abra el archivo html con un navegador. Utilice http://127.0.0.1:8080 para reemplazar la dirección del archivo local.

Haga clic en el encabezado de red de verificación para ver la información enviada por el formulario.

3. La diferencia entre los métodos get y post

get concatena los datos enviados en una URL usando &, que se convierte en el contenido de la consulta en el objeto URL. Pero la URL de la publicación está muy limpia.
La cantidad de datos enviados varía y get puede enviar hasta 1.000 datos. Si se excede el límite del navegador, los datos se truncarán. La publicación es teóricamente ilimitada, sujeta a restricciones del servidor.
Los datos enviados por get están en el historial del navegador y tienen poca seguridad.
Lo importante de recibir es dar, lo importante de publicar es dar

4. Cosas a tener en cuenta

Todas las etiquetas de entrada deben agregarse con un atributo de nombre; de lo contrario, los datos no se podrán recibir correctamente.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.