Formulaire d'inscription simple HTML+CSS
1 : Formulaire
Le formulaire est composé de <form></form>
Le formulaire permet de collecter des informations, telles que l'inscription : vous devez saisir votre nom d'utilisateur , mot de passe, e-mail et numéro de téléphone portable, code de vérification, etc. Ces données sont soumises via le formulaire et les informations sont reçues sur une autre page
Comment rédiger le formulaire comme suit :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎学习表单</title> </head> <body> <form></form> </body> </html>
De cette façon, nous avons mis un formulaire simple. Après l'avoir écrit, examinons les paramètres d'attribut suivants :
Examinons ensuite plusieurs attributs couramment utilisés de balises de formulaire
1. action
2.method
3.enctype="multipart/form-data"
action
L'attribut action définit l'action à effectuer lors de la soumission du formulaire.
La manière habituelle de soumettre un formulaire au serveur est d'utiliser un bouton de soumission.
En règle générale, les formulaires sont soumis à une page Web sur un serveur Web.
Veuillez regarder le code suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎学习表单</title> </head> <body> <form action="login.php"> <!-- 表单元素等 --> </form> </body> </html>
En regardant le code ci-dessus, notre formulaire est soumis à login.php Dans le fichier login.php, nous pouvons obtenir les informations du formulaire et le processus. it. , porter des jugements ou ajouter à la base de données, etc.
method
L'attribut method précise la méthode HTTP (GET ou POST) utilisée lors de la soumission du formulaire :
<form action=" " method="GET"></form>
<form action="" method="POST"></form>
Nous en reparlerons deux plus tard. La différence entre
enctype="multipart/form- data"
Quand on veut télécharger un fichier, cette phrase doit être mise sous la forme
< ;form action="" method="POST" enctype="multipart/form- data"></form>
Éléments de formulaire (souligné)
1. Zone de texte id=2>
3. "></textarea>
4. Bouton radio <input type="radio" name= "radio" value="radio" />
5. Case à cocher <input type="checkbox" name="checkbox" value="checkbox" />
6 . Liste déroulante Réinitialiser : réinitialiser le bouton Soumettre :
Ensuite, nous intégrons ces éléments de formulaire dans une instance, comme indiqué dans le code suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎学习表单</title> </head> <body> <form action="login.php" method="post" enctype="multipart/form- data"> 姓名：<input type="text" name="name" id=1><br><br> <input type="hidden" name="hidd"> <!--隐藏域默认是不显示的--> 简介：<textarea name="text" rows="10" cols=""></textarea> <br><br> <!--rows是要写多少行 cols每行要写多少个字符--> 国籍：<input type="radio" name="radio" value="radio" checked/>中国 <input type="radio" name="radio" value="radio" />美国 <input type="radio" name="radio" value="radio" />日本 <!--注：当使用单选按钮时，必须要有一个相同的name属性--> <br><br> 爱好：<input type="checkbox" name="checkbox" value="checkbox" checked/>篮球 <input type="checkbox" name="checkbox" value="checkbox" />足球 <input type="checkbox" name="checkbox" value="checkbox" />音乐 <br><br> 来自： <select> <option selected>安徽</option> <option>上海</option> <option>北京</option> <option>浙江</option> </select> <br><br> <input type="file"> <!--上传文件--> <br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="添加"> </form> </body> </html>
Sélection unique et multi-sélection, la sélection par défaut est cochée Vous pouvez écrire
directement dans la saisie, ou vous pouvez écrire chechked="checked"
dans la liste déroulante. , la sélection par défaut est sélectionnée
Bouton
réinitialiser Lorsque nous avons des informations dans le formulaire, cliquez dessus et le contenu sera effacé
La différence entre Soumettre et le bouton
Lorsque nous cliquons sur le bouton Soumettre, le formulaire sera soumis à une page Lorsque le bouton est cliqué, il n'y a pas de saut.
Le bouton doit être lié à un événement pour se déclencher. est déclenché, le formulaire sera également soumis
POST et GET Méthode de soumission
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>post</title> </head> <body> <form action="index.php" method="post"> 姓名：<input type="text" name="name"><br><br> 密码：<input type="password" name="pwd"><br><br> <input type="submit" value="登录"> </form> </body> </html>rrree
L'utilisation de get affichera le contenu soumis par le formulaire dans la barre d'adresse, l'utilisation de la méthode post n'affichera pas le contenu. informations soumises par le formulaire.
En général, la plupart des soumissions de formulaires utiliseront la méthode post, la sécurité est élevée
1 Lorsque Post transmet des données, elles n'ont pas besoin d'être affichées dans l'URL. , mais la méthode Get doit être affichée dans l'URL.
2.Post transmet une grande quantité de données, qui peut atteindre 2 Mo, tandis que la méthode Get ne peut transférer qu'environ 1024 octets en raison de la limite de longueur de l'URL.
3.Post, comme son nom l'indique, consiste à transmettre. données au segment du serveur, Get consiste à obtenir des données du segment du serveur. La raison pour laquelle Get peut également transmettre des données est uniquement conçue pour indiquer au serveur le type de données dont vous avez besoin. Les informations de publication sont utilisées comme contenu de la requête http. et Get est dans l'en-tête Http Transmis
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
