recherche

Maison  >  Article  >  interface Web  >  Divers exemples d'analyse des formulaires HTML

Divers exemples d'analyse des formulaires HTML

不言
不言original
2018-06-05 11:18:512391parcourir

Cet article utilise principalement divers exemples pour vous aider à comprendre comment utiliser les formulaires HTML et explique comment les formulaires interagissent avec les utilisateurs. Les amis intéressés peuvent se référer à

9 Un exemple simple analyse l'utilisation du formulaire HTML. formulaire pour votre référence. Le contenu spécifique est le suivant

1 balise de formulaire

Comment le site Web interagit-il avec les utilisateurs ? La réponse est d'utiliser des formulaires HTML. Le formulaire peut transmettre les données saisies par le spectateur au serveur, afin que le programme côté serveur puisse traiter les données transmises par le formulaire.
Syntaxe :

2ca4fba4b3017066c3af906e6f6b5ef4

•ff9c23ada1bcecdd1a0fb5d5a0f18437 : ff9c23ada1bcecdd1a0fb5d5a0f18437 Les balises apparaissent par paires, commençant par ff9c23ada1bcecdd1a0fb5d5a0f18437 et se terminant par f5a47148e367a6035fd7a2faa965022e.
•action : L'endroit où les données saisies par le spectateur sont envoyées, comme une page PHP (save.php).
•method : La méthode de transmission des données (get/post).

Tous les contrôles de formulaire (zones de texte, champs de texte, boutons, cases radio, cases à cocher, etc.) doivent être placés entre les balises ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e Je ne peux pas soumettre au serveur !).
La différence entre method:post/get est une question à prendre en compte par les programmeurs back-end. Les amis intéressés peuvent consulter le wiki de cette section, qui contient une introduction détaillée.

Code XML/HTMLCopier le contenu dans le presse-papiers

<form method="post" action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>

2 zones de saisie/texte/mot de passe et mot de passe

Les zones de saisie de texte sont utilisées lorsque les utilisateurs souhaitent saisir des lettres, des chiffres, etc. dans le formulaire. La zone de texte peut également être convertie en zone de saisie de mot de passe.
Syntaxe :


Code XML/HTMLCopier le contenu dans le presse-papiers

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

Quand type="text", la zone de saisie est une zone de saisie de texte ;
Lorsque type="password", la zone de saisie est une zone de saisie de mot de passe.
nom : nommez la zone de texte à utiliser par les programmes d'arrière-plan ASP et PHP.
valeur : définissez la valeur par défaut pour la zone de saisie de texte. (Généralement utilisé comme rappel)

Code de test :

Code XML/HTMLCopier le contenu dans le presse-papier

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>文本输入框、密码输入框</title>
    </head>
    <body>
        <form  method="post" action="save.php">
            账户:<input  type="text"  name="myName" /><br><br>
            密码:<input  type="password"  name="pass" />
        </form>
    </body>
</html>

Effet navigateur :

Champ de texte à 3 zones de texte, prend en charge la saisie de texte sur plusieurs lignes

Lorsque l'utilisateur doit saisir un gros morceau de texte dans le formulaire , il est obligatoire d'utiliser des champs de saisie de texte.
Syntaxe :

81b28e35cca1249f0ec9a75b1e6250feValeur par défaut du texte40587128eee8df8f03d0b607fe983014

1 . Les balises 4750256ae76b6b9d804861d8f69e79d3 apparaissent par paires, commençant par 4750256ae76b6b9d804861d8f69e79d3.
2. cols : Le nombre de colonnes du champ de saisie multiligne.
3. lignes : le nombre de lignes dans le champ de saisie multiligne.
4. Des valeurs par défaut peuvent être saisies entre les balises.

Code XML/HTMLCopier le contenu dans le presse-papiers

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>文本域</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>个人简介：</label><br>
            <textarea cols="40" rows="10">在这里输入内容...</textarea><br>
            <input type="submit" value="确定"  name="submit" />
            <input type="reset" value="重置"  name="reset" />
        </form>
    </body>
</html>

Effet navigateur :

4 boutons radio/cases à cocher et cases à cocher

Lors de l'utilisation de formulaires pour concevoir des questionnaires, afin de réduire les opérations des utilisateurs, c'est une bonne idée d'utiliser des cases de sélection. Il y en a deux. types de cases de sélection en HTML, à savoir le bouton radio et la case à cocher. La différence entre les deux est que l'utilisateur ne peut sélectionner qu'une seule option dans le bouton radio, tandis que l'utilisateur peut sélectionner plusieurs ou même toutes les options dans la case à cocher.
Syntaxe : 

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1. Lorsque type="radio", le contrôle est un bouton radio
2. Lorsque type="checkbox" , le contrôle est une case à cocher
3.value : la valeur de soumission des données au serveur (utilisée par le programme d'arrière-plan PHP)
4.name : nommez le contrôle à utiliser par le programme d'arrière-plan ASP et PHP
5.checked : Lors de la définition de vérifié="checked", cette option est sélectionnée par défaut
6. Remarque : Les valeurs de nom des boutons radio du même groupe doivent être cohérentes. Par exemple, l'exemple ci-dessus a le. même nom "radioLove", pour que le même groupe Le bouton radio puisse jouer le rôle de sélection radio.

Code XML/HTMLCopier le contenu dans le presse-papiers

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>单选框、复选框</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            你喜欢旅游吗？请选择：<br>
            <input type="radio" name="radiolove" value="like" checked="checked">喜欢   
            <input type="radio" name="radiolove" value="dislike" >不喜欢   
            <input type="radio" name="radiolove" value="unknown" >无所谓   
            <br><br>

            你喜欢哪些运动？<br>
            <input type="checkbox" name="checkbox" value="Run" checked="checked"> Run   
            <input type="checkbox" name="checkbox" value="Basketball"> Basketball   
            <input type="checkbox" name="checkbox" value="FootBall"> FootBall   
            <input type="checkbox" name="checkbox" value="Fat" checked="checked"> Fat   
        </form>
    </body>
</html>


L'effet du navigateur est :


Ce code de démonstration implémente un bouton radio contenant 3 options et une case à cocher contenant 4 options

;

同一个选框的name值必须一致，否则不能实现单选和复选功能。在同一个选框中value值必须不同，否则传递到后台数据有误。

5 select/option使用下拉列表框单选

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

语法：

<option value=”name” selected=”selected”>Run</option>

Value为向服务器提交的值；

设置selected=”selected”属性，则该选项就被默认选中。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>下拉列表框</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>爱好:</label>
            <select>
                <option value="看书">看书</option>
                <option value="旅游" selected="selected">旅游</option>
                <option value="运动">运动</option>
                <option value="购物">购物</option>
            </select>
            <input type="submit" name="submit" value="submit">
            <input type="reset" name="reset" value="reset">
            <br><br>
            <label>留言给我们:</label><br>
            <textarea cols="40" rows="5">在这里输入留言...</textarea>
            <br>
            <input type="submit" value="点击确认提交留言" name="advise">
        </form>
    </body>
</html>

浏览器效果：

6 select/multiple/option使用下拉框多选

下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。 

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>使用下拉列表框进行多选</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>爱好:</label><br>
            <select multiple="multipl">
                <option value="看书">看书</option>
                <option value="旅游">旅游</option>
                <option value="运动">运动</option>
                <option value="购物">购物</option>
            </select>

            <br><br>
            <label>留言给我们:</label><br>
            <textarea cols="40" rows="5">在这里输入留言...</textarea><br>
            <input type="submit" value="点击确认提交留言" name="advise">
        </form>
    </body>
</html>

浏览器效果：

7 input/submit使用提交按钮提交数据

语法：892fc1b3743fe80ae197d7a1a60c2276

type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>提交按钮</title>
    </head>
    <body>
        <form  method="post" action="save.php">
            <label for="myName">姓名：</label>
            <input type="text" value=" " name="myName " />
            <input type="submit" value="提交" name="submitBtn" />
        </form>
    </body>
</html>

浏览器效果：

8 input/reset使用重置按钮重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
语法：

4091b5f1b74b6c5332cb5e27ee906caf1

type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>重置按钮</title>
    </head>
    <body>
        <form action="save.php" method="post" >
            <label>爱好:</label>
            <select>
                <option value="看书">看书</option>
                <option value="旅游" selected="selected">旅游</option>
                <option value="运动">运动</option>
                <option value="购物">购物</option>
            </select>
            <input type="submit" value="确定"  />
            <input type="reset" value="重置"  />
        </form>
    </body>
</html>

浏览器效果：

9 表单中label标签

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

f2601599f81b7104ea47b5c86080e721

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>form中的lable标签</title>
    </head>

    <body>
        <form>
            <label for="male">男</label>
                <input type="radio" name="gender" id="male" /><br />
            <label for="female">女</label>
                <input type="radio" name="gender" id="female" /> <br />
            <label for="email">输入你的邮箱地址</label>
                <input type="email" id="email" placeholder="Enter email"><br>

            你对什么运动感兴趣：<br>
            <label for="run">慢跑</label>
                <input type="checkbox" name="sports" id="run"><br>
            <label for="climb">登山</label>
                <input type="checkbox" name="sports" id="climb"><br>
            <label for="basketball">篮球</label>
                <input type="checkbox" name="sports" id="basketball"><br>
        </form>
    </body>
</html>

浏览器效果：

以上就是本文的全部内容，希望对大家的学习有所帮助。

相关推荐：

html禁止清除input文本输入缓存的两种方法

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
Article précédent：Deux façons de désactiver la suppression du cache de saisie de texte en HTMLArticle suivant：Deux façons de désactiver la suppression du cache de saisie de texte en HTML

Articles Liés

Voir plus