Connaissance approfondie des formulaires HTML

8.1 Balise de formulaireff9c23ada1bcecdd1a0fb5d5a0f18437

38f012d9ec1a43e82a1a09c8a721c9b6..... .< ;/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éed5fd7aea971a85678ba271703566ebfd

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" />

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" />

(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="域值">

(4) Domaine de fichier fichier

Le domaine de fichier peut transmettre le 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">

(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"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->

(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"/>阅读

(7)提交按钮 submit

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

<input type="submit" name="按钮名称" value="按钮显示文本">

普通按钮 button

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

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">

重置按钮 reset

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

<input type="reset" name="按钮名称" value="按钮显示文本">

图像按钮 image

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

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">

(8)选择列表标记221f08282418e2996498697df914ce4e

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记4750256ae76b6b9d804861d8f69e79d3

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

(10)2e1cf0710519d5598b1f0f14c36ba674 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 2e1cf0710519d5598b1f0f14c36ba674 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：2b5469ab79cf842344327415c3b3bb95 e911751791aa3ba95dc724e2fb905976...a814477f903c8e27bd1ff8e5c6bbe7c1 ff9c23ada1bcecdd1a0fb5d5a0f18437...f5a47148e367a6035fd7a2faa965022e a3ae74428855f48d0438405a4619fe75

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!