Implementação de envio de formulário em html

Autor：Eve Cole Data da Última Atualização：2025-01-18 12:48:01

código de envio do formulário

1. Análise do código-fonte

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title></head><body><form action=/form.html method=GET> <!-- ação: Endereço para envio do formulário --> <!-- método: método de envio da política --><div class=name> <label for=name>nome de usuário</label> <input type=text name=name id=name placeholder = Por favor, insira o nome de usuário> <!-- placeholder é um texto de prompt transparente--></div><div class=password> <label for=password>Senha</label> <input type=password name=password id= senha placeholder=Digite a senha></div><div class=sex> <label for=sex>gênero</label> <input type=radio name=sex value=male>Masculino<input type=radio name=sex value= feminino>Feminino</div><div class=city> <label for=city>Cidade favorita</label> <select name=city id=city> <option value=beijing>Pequim</option> <option value=shanghai>Shanghai</option> <option value=chongqing selected >Chongqing</option> <!-- selected indica a opção selecionada para ser exibida na página--> </select></div><div class =hobby > <label for=hobby>Hobby</label> <input type=checkbox name=hobby value=read>Leitura<input type=checkbox name=hobby value=flower>Arranjos de flores<input type=checkbox name=hobby value=sing>Cantando<!-- Todos os nomes de opções devem ser iguais--></div><div class=area> <textarea id=area name=area cols=30 rows=10></textarea></ div> <button>button</button><!-- O formulário pode ser enviado--><input type=submit value=submit> <!-- O formulário pode ser enviado--><input type=button value=button><!-- O formulário não pode ser enviado--><input type=reset value=reset><!-- Redefinir o conteúdo que foi inserido no formulário--></form></body> </html>

2. Operação terminal

Abra o terminal gitbash e mude para a pasta onde o html está localizado

Use a linha de comando http-server para abrir o servidor estático. Após a abertura, dois endereços IP aparecerão. 127.xxx é o endereço de acesso local e 125.xxx é o endereço de acesso LAN (a premissa aqui é que o nodejs foi instalado e o servidor http-server foi instalado com npm)

Abra o arquivo html com um navegador. Use http://127.0.0.1:8080 para substituir o endereço do arquivo local.

Clique no check-network-header para ver as informações enviadas pelo formulário.

3. A diferença entre os métodos get e post

get concatena os dados enviados em uma URL usando &, que se torna o conteúdo da consulta no objeto URL. Mas a URL do post está bem limpa
A quantidade de dados enviados varia e pode enviar até 1 mil dados. Se o limite do navegador for excedido, os dados serão truncados. A postagem é teoricamente ilimitada, sujeita a restrições do servidor
Os dados enviados por get estão no histórico do navegador e têm segurança insuficiente
O importante de receber é dar, o importante de postar é dar

4. Coisas a serem observadas

Todas as tags de entrada devem ser adicionadas com um atributo name, caso contrário os dados não poderão ser recebidos corretamente.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.