Implémentation de la soumission de formulaire en HTML

Auteur：Eve Cole Date de mise à jour：2025-01-18 12:48:01

code de soumission du formulaire

1. Analyse du code source

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body><form action=/form.html method=GET> <!-- action : Adresse pour la soumission du formulaire --> <!-- méthode : méthode de soumission de la politique --><div class=name> <label for=name>username</label> <input type=text name=name id=name placeholder = Veuillez entrer le nom d'utilisateur> <!-- l'espace réservé est un texte d'invite transparent--></div><div class=password> <label for=password>Mot de passe</label> <input type=password name=password id= mot de passe placeholder=Veuillez entrer le mot de passe></div><div class=sex> <label for=sex>genre</label> <input type=radio name=sex value=male>Homme<input type=radio name=sex value= female>Femme</div><div class=city> <label for=city>Ville préférée</label> <select name=city id=city> <option value=beijing>Pékin</option> <option value=shanghai>Shanghai</option> <option value=chongqing selected >Chongqing</option> <!-- selected indique l'option sélectionnée pour être affichée sur la page--> </select></div><div class =hobby > <label for=hobby>Hobby</label> <input type=checkbox name=hobby value=read>Lecture<input type=checkbox name=hobby value=flower>Arrangement floral<input type=checkbox name=hobby value=sing>Chant<!-- Tous les noms d'options doivent être identiques--></div><div class=area> <textarea id=area name=area cols=30 rows=10></textarea></ div> <button>bouton</button><!-- Le formulaire peut être soumis--><input type=submit value=submit> <!-- Le formulaire peut être soumis--><input type=button value=button><!-- Le formulaire ne peut pas être soumis--><input type=reset value=reset><!-- Réinitialiser le contenu qui a été saisi dans le formulaire--></form></body> < /html>

2. Fonctionnement des terminaux

Ouvrez le terminal gitbash et passez au dossier où se trouve le code HTML

Utilisez la ligne de commande http-server pour ouvrir le serveur statique Après l'ouverture, deux adresses IP apparaîtront. 127.xxx est l'adresse d'accès locale et 125.xxx est l'adresse d'accès LAN (le principe ici est que nodejs a été installé et que le serveur http-server a été installé avec npm)

Ouvrez le fichier html avec un navigateur. Utilisez http://127.0.0.1:8080 pour remplacer l'adresse du fichier local.

Cliquez sur l'en-tête check-network-header pour voir les informations soumises par le formulaire.

3. La différence entre les méthodes get et post

get concatène les données soumises dans une URL à l'aide de &, qui devient le contenu de la requête dans l'objet URL. Mais l'url du post est très propre
La quantité de données soumises varie et Get peut soumettre jusqu'à 1 000 données. Si la limite du navigateur est dépassée, les données seront tronquées. La publication est théoriquement illimitée, sous réserve des restrictions du serveur
Les données soumises par get se trouvent dans l'historique du navigateur et sont peu sécurisées.
L'important dans le get c'est de donner, l'important dans le post c'est de donner

4. Choses à noter

Toutes les balises d'entrée doivent être ajoutées avec un attribut de nom, sinon les données ne pourront pas être reçues correctement.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.