communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Connaissance approfondie des formulaires HTML

Connaissance approfondie des formulaires HTML

迷茫
Libérer： 2017-03-25 15:23:30
original
2518 Les gens l'ont consulté

8.1 Balise de formulaire

..... .< ;/form>

☟ Attributs du formulaire :

◆ action : Le programme serveur utilisé pour spécifier le formulaire, stipule quand le formulaire est soumis Quand et où envoyer les données du formulaire. La valeur de l'action est : premièrement, une URL (URL absolue/URL relative), pointant généralement vers un programme côté serveur. Le programme reçoit les données soumises par le formulaire (c'est-à-dire la valeur de l'élément du formulaire) et les traite en conséquence. . Par exemple :

Lorsque l'utilisateur soumet ce formulaire, le serveur exécutera un gestionnaire général nommé "reg.ashx". Deuxièmement, utilisez l'adresse URL du protocole mailto, qui enverra le contenu du formulaire sous forme d'e-mail. Cette situation est relativement rare car elle nécessite qu'un programme d'envoi d'email soit installé et correctement paramétré sur l'ordinateur du visiteur. Troisièmement, une valeur nulle Si l'action est nulle ou non écrite, cela signifie qu'elle est soumise à la page actuelle.

◆ méthode : Cet attribut définit la manière dont le navigateur soumet les données du formulaire au gestionnaire du serveur. Les plus couramment utilisés sont get et post, et la méthode get est utilisée par défaut.

Quelle est la différence entre obtenir et publier ?

① Requête de données : Par exemple, lors de la navigation sur un forum, l'URL contient généralement des informations telles que la catégorie, le numéro de page, le nombre d'enregistrements par page, etc. Avec la méthode get, vous pouvez voir en un coup d’œil les informations (conditions) que vous souhaitez interroger. Étant donné que post masque ces informations, il n'est pas pratique de vérifier les conditions de la requête.

② Soumission de données sensibles (sécurité) : lors de modifications ou d'ajouts à un enregistrement, comme l'enregistrement d'un utilisateur, la modification des informations de l'utilisateur, etc. La méthode get ajoutée à l’URL entraînera une fuite d’informations sensibles. La méthode de publication peut masquer des informations sensibles.

démo :

Après avoir cliqué sur soumettre en utilisant la méthode get : l'URL devient : php中文网/ashx/login.ashx?login_username=admin&login_pswd=123456

Cliquer avec la méthode post Après soumission : l'URL devient : php Chinese website/ashx/login.ashx ☜ Vous pouvez voir qu'il s'agit uniquement de l'URL spécifiée par l'action, et les paramètres ne sont pas ajoutés à l'URL.

③ Livraison de texte Big Data : bien que get soit pratique pour les requêtes, car il est attaché à l'URL, chaque navigateur a également une limite de longueur pour l'URL. IE : 2048 caractères. Chrome et FF semblent avoir 8 182 caractères. La poste ne semble pas avoir une telle restriction.

◆ onsubmit : utilisé pour spécifier la fonction de script pour traiter le formulaire

◆ enctype : Définissez le type MIME, la valeur par défaut est application/x-www-form-urlencoded. Lorsque vous devez télécharger des fichiers sur le serveur, vous devez définir cet attribut sur multipart/form-data

8.2 Balise d'entrée

La plupart des éléments de formulaire peuvent utiliser Définition d'entrée, afin d'identifier chaque donnée, nous devons ajouter l'attribut name à l'élément de formulaire, donc name est un attribut obligatoire, name="Nom du champ"

(1) Texte de la zone de texte

Les informations saisies sont affichées en texte clair 

用户名: <input type="text" name="user" />
Copier après la connexion

Voici les principaux attributs de la zone de texte sur une seule ligne :

name (nom, qui peut être obtenu comme identifiant dans les données du script), maxlength (définir le nombre maximum de caractères pouvant être saisis dans la zone de texte), size (longueur de la zone de texte, environ en octets)

valeur : spécifiez la valeur par défaut de la zone de texte, qui se trouve dans le navigateur. La valeur qui s'affiche dans la zone de texte lorsque le formulaire est affiché pour la première fois ou après que l'utilisateur a cliqué sur le bouton de réinitialisation.

readonly : attribut en lecture seule. Lorsque l'attribut en lecture seule est défini, la zone de texte peut obtenir le focus, mais l'utilisateur ne peut pas modifier la valeur dans la zone de texte.

désactivé : lorsque la zone de texte est désactivée, elle ne peut pas obtenir le focus. Bien entendu, l'utilisateur ne peut pas modifier la valeur de la zone de texte. Et lors de la soumission du formulaire, le navigateur n'envoie pas la valeur de cette zone de texte au serveur.

(2)Boîte de mot de passe mot de passe

Faites écho aux caractères saisis avec les symboles « * » ou « ● », Joue ainsi le rôle de la confidentialité

密码: <input type="password" name="pwd" />
Copier après la connexion

(3) Domaine caché caché

Le domaine caché ne sera pas vu par les téléspectateurs Il est principalement utilisé dans La valeur. défini dans le domaine de livraison de différentes pages 

<input type="hidden" name="hid" value="域值">
Copier après la connexion

(4) Domaine de fichier fichier

Le domaine de fichier peut transmettre le <🎜 local >Téléchargement de fichiers sur le serveur. Il n'y a pas de valeur par défaut pour le téléchargement de fichiers. Lors de l'utilisation de cette fonction, l'attribut de méthode doit être spécifié dans la balise form. Pour spécifier la méthode comme post, l'attribut enctype est spécifié comme multipart/form-data. Sinon, le contenu du fichier ne pourra pas être téléchargé 

<input type="file" name="photo">
Copier après la connexion

(5) Bouton radio radio

Faire une seule sélection dans un ensemble d'options, représenté par une case ronde

Utilisation : Pour implémenter la fonction de sélection radio, les valeurs de nom doivent être égales. Utilisez un groupe de boutons radio portant le même nom et définissez des valeurs différentes pour différentes radios. De cette façon, vous pouvez savoir qui est sélectionné en prenant la valeur du nom spécifié, sans avoir besoin d'un jugement séparé. La valeur de l'élément du bouton radio est explicitement définie par l'attribut value Lorsque le formulaire est soumis, la valeur et le nom de l'élément sélectionné sont empaquetés et envoyés sans définir explicitement la valeur. 

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
Copier après la connexion

(6) Case à cocher du bouton

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
Copier après la connexion

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
Copier après la connexion

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
Copier après la connexion

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
Copier après la connexion

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
Copier après la connexion

(8)选择列表标记