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>歡迎學(xué)習(xí)表單</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>歡迎學(xué)習(xí)表單</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>歡迎學(xué)習(xí)表單</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"> <!--隱藏域默認(rèn)是不顯示的--> 簡介：<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" />日本 <!--注：當(dāng)使用單選按鈕時，必須要有一個相同的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
