Quel est le rôle des formulaires dans le front-end web ?

Le formulaire a deux fonctions : 1. Pour les utilisateurs, c'est une interface de saisie et de soumission des données ; 2. Pour les sites Web, c'est un moyen d'obtenir des informations sur les utilisateurs ; Un formulaire comporte trois composants de base : 1. La balise form, qui contient l'URL du programme CGI utilisé pour traiter les données du formulaire et la méthode de soumission des données au serveur. 2. Le champ du formulaire, qui comprend la zone de texte, zone de mot de passe, champ caché et zones de texte multilignes, etc. ; 3. Les boutons de formulaire, y compris les boutons de soumission, les boutons de réinitialisation et les boutons généraux, sont utilisés pour transférer des données vers des scripts CGI sur le serveur ou annuler une saisie, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

Le formulaire dans le front-end Web

Le rôle du formulaire dans la page Web ne peut être sous-estimé. Il est principalement responsable de la fonction de collecte de données. Par exemple, vous pouvez collecter le nom et l'adresse e-mail. adresse du visiteur, questionnaire, livre d'or, etc. attendez.

Le rôle du formulaire :

• Pour l'utilisateur, le formulaire est une interface de saisie et de soumission des données ;

• Pour le site Internet, le formulaire est un moyen d'obtenir des informations sur l'utilisateur ;

Un formulaire comporte trois composants de base :

• Balise de formulaire <form></form> : Elle contient l'URL du programme CGI utilisé pour traiter les données du formulaire et l'URL du données soumises à la méthode serveur. <form></form>：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 

• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签<form></form>

form标签用于创建供用户输入的HTML表单（表单域），以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

form表单域中可以包含各种交互控件--控件标签（文本字段、复选框、单选框、提交按钮等等），比如、、、等标签。

标签语法格式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

method提交方式常用的4种：

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

表单域和表单按钮

input标签

• input 输入的意思
• <input />标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

type="text"为普通输入框 value为里面的值 name和id会在写js的时候用

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="text" name="" id="" value="你好">
    </form>

input标签的一些属性:

checked属性只有单选框和复选框才有

Champs de formulaire : y compris les zones de texte, les zones de mot de passe, les champs masqués, les zones de texte multilignes, les cases à cocher, les zones de boutons radio, les zones de sélection déroulantes et les zones de téléchargement de fichiers, etc. Balise de formulaire Format de syntaxe des balisesQuatre méthodes de soumission couramment utilisées : Champs et boutons de formulaire

L'attribut type définit différentes valeurs d'attribut​​pour spécifier différents types de contrôletype="text" est la zone de saisie normale, la valeur est la valeur à l'intérieur, le nom et l'identifiant seront utilisés lors de l'écriture de js

        爱好： <br> 
        抽烟<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        烫头<input type="checkbox" name="hobby" id="" value="">

Valeur de l'attributDescriptioncase à cocher "Bouton Normal" Bouton Soumettre sous forme d'imageFichier Champ de texte Le nom de l'espaceLa valeur de texte par défaut dans le contrôle de saisieLa largeur d'affichage du contrôle de saisie sur la pageDéfinir les éléments sélectionnés par défaut dans l'espace de sélectionLe nombre maximum de caractères autorisés à être saisis par le contrôle

	Boutons de formulaire : incluent des boutons de soumission, des boutons de réinitialisation et des boutons généraux ; utilisés pour transférer des données vers des scripts CGI sur le serveur ou pour annuler la saisie, les boutons de formulaire peuvent également être utilisés pour contrôler d'autres tâches de traitement avec des scripts de traitement définis.
	La balise de formulaire est utilisée pour créer un formulaire HTML (champ de formulaire) pour la saisie de l'utilisateur afin de réaliser la collecte et la livraison des informations utilisateur. soumis au serveur.	Les champs du formulaire peuvent contenir divers contrôles interactifs : étiquettes de contrôle (champs de texte, cases à cocher, cases d'option, boutons de soumission, etc.), tels que < saisie>, < ; et d'autres balises.
<input type="password" name="" id="" value="">	男 <input type="radio" name="gender" id="" value=""> 女 <input type="radio" name="gender" id="" value="">
balise de saisie	La signification de input input	La balise <input /> est une seule balise
En plus de l'attribut type, il y a d'autres attributs
Quelques attributs de la balise d'entrée :< /code></td><td></td>< code>L'attribut coché est uniquement disponible pour les boutons radio et les cases à cocher
Attribute
type	Texte	Champ de saisie de texte sur une seule ligne
		bouton
	nom
	valeur
	taille
	coché
	Maxlength

🎜🎜🎜

密码框

<input type="password" name="" id="" value="">

单选框

name相同的单选框智能选择一个

        男 <input type="radio" name="gender" id="" value=""> 
        女 <input type="radio" name="gender" id="" value="">

复选框

多选框可以选取多个

        爱好： <br> 
        抽烟<input type="checkbox" name="hobby" id="" value=""> 
        喝酒<input type="checkbox" name="hobby" id="" value=""> 
        烫头<input type="checkbox" name="hobby" id="" value="">

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    <form action="url地址" method="提交方式" name="表单名称">
        <input type="button" name="" id="" value="我是一个普通按钮">
        <input type="submit" name="" id="" value="我是一个提交按钮">
        <input type="reset" name="" id="" value="我是一个重置按钮">
    </form>

下拉框标签

下拉框标签有点特殊，不是input的属性而是一个单独的标签

        <select name="省市区" id="">
            <option value="">山东</option>
            <option value="">北京</option>
            <option value="">江苏</option>
            <option value="">深圳</option>
            <option value="">上海</option>
        </select>

相关推荐：《html视频教程》

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!