Maison  >  Article  >  interface Web  >  Quel est le rôle des formulaires dans le front-end web ?

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

青灯夜游
青灯夜游original
2023-01-29 11:53:242830parcourir

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.

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

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 输入的意思
  • &lt;input&gt;标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
  • 除了type属性还有别的属性

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

    
        &lt;input&gt;     

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

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
        爱好: 
          抽烟&lt;input&gt;          喝酒&lt;input&gt;          烫头&lt;input&gt;
Insérer la description de l'image iciL'attribut coché est uniquement disponible pour les boutons radio et les cases à cocherValeur 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 ,

&lt;input&gt;
        男 &lt;input&gt; 
        女 &lt;input&gt;


balise de saisie

La signification de input input La balise &lt;input&gt; est une seule balise
En plus de l'attribut type, il y a d'autres attributs

Quelques attributs de la balise d'entrée :
Attribute

type
Texte Champ de saisie de texte sur une seule ligne

bouton


nom

valeur

taille

coché

Maxlength
🎜🎜🎜

密码框

&lt;input&gt;

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

单选框

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

        男 &lt;input&gt; 
        女 &lt;input&gt;

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

复选框

多选框可以选取多个

        爱好: 
          抽烟&lt;input&gt;          喝酒&lt;input&gt;          烫头&lt;input&gt;

按钮

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

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

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

    
        &lt;input&gt;         &lt;input&gt;         &lt;input&gt;     

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

下拉框标签

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

        <select>
            <option>山东</option>
            <option>北京</option>
            <option>江苏</option>
            <option>深圳</option>
            <option>上海</option>
        </select>

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

相关推荐:《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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn