communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

Tutoriel HTML de base sur l'interaction avec les téléspectateurs, les balises de formulaire

零下一度
Libérer： 2017-05-12 13:57:01
original
1504 Les gens l'ont consulté

1. Utilisez les balises de formulaire pour interagir avec les utilisateurs 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
Copier après la connexion

Comment le site Web interagit-il avec les utilisateurs ? La réponse est d'utiliser le Formulaire HTML(formulaire). 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.

Grammaire : 

<form method="传送方式" action="服务器文件">
Copier après la connexion

Explication :

1.

 : les balises apparaissent par paires, en commençant par . .

2.action : L'endroit où les données saisies par le spectateur sont envoyées, comme une page PHP (save.php).

3.méthode : Méthode de transmission des données (get/post). post est une transmission cryptée ; get est une transmission dans la barre d'adresse, c'est-à-dire une transmission non cryptée. 

<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>
Copier après la connexion

Remarque :

1. Tous les contrôles du formulaire (zone de texte, champ de texte, bouton , bouton radio, cases à cocher , etc.) doivent être placés entre les balises

(sinon les informations saisies par l'utilisateur risquent de ne pas être soumises au serveur !).

2. La différence entre la méthode : post/get Cette partie est une question à prendre en compte par les programmeurs back-end.

Essayez-le : ajoutez du code à la balise

sur la ligne 8 dans l'Éditeur : 

method="post" action="save.php"
Copier après la connexion

Avez-vous saisi un code comme celui-ci :

Tutoriel HTML de base sur linteraction avec les téléspectateurs, les balises de formulaire

texte : zone de texte mot de passe : boîte de mot de passe raido : bouton radio case à cocher : case à cocher fichier : boîte de sélection de fichier soumettre : soumettre bouton

Lorsque vous cliquez sur le texte dans l'étiquette, vous pouvez associer le texte au contrôle. Utilisez l'attribut "for" pour lier l'étiquette à un autre élément. La valeur de l'attribut "for" doit être liée à. La valeur de l'attribut "id" des éléments est la même.

2. Zone de saisie de texte, zone de saisie du mot de passe 

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
Copier après la connexion

Lorsque les utilisateurs souhaitent saisir des lettres, des chiffres, etc. dans le formulaire, la zone de saisie de texte sera utilisée. La zone de texte peut également être convertie en zone de saisie de mot de passe.

Grammaire : 

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
Copier après la connexion

1. tapez :

Lorsque type="text", la zone de saisie est une zone de saisie de texte ;

Lorsque tapez Lorsque =="mot de passe", la zone de saisie est la zone de saisie du mot de passe.

2. nom : Nommez la zone de texte à utiliser par les programmes d'arrière-plan ASP et PHP.

3. valeur : définissez la valeur par défaut pour la zone de saisie de texte. (Généralement utilisé comme rappel)

Exemple : 

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
Copier après la connexion

Le résultat de

affiché dans le navigateur :

Tutoriel HTML de base sur linteraction avec les téléspectateurs, les balises de formulaire

Essayez : insérez les zones de saisie du nom et du mot de passe dans le formulaire

1 Saisissez le code à la ligne 10 dans l'éditeur : 

<input  type="text"  name="myName" />
Copier après la connexion

2. Code de saisie de ligne : 

<input  type="password"  name="pass" />
Copier après la connexion

Au moins un espace entre les attributs.

masqué définit un champ de saisie masqué
image définit une image comme bouton de soumission
numéro définit une flèche control Champ numérique
mot de passe définit le champ du mot de passe. Les caractères dans le champ seront masqués
la radio définit le bouton radio
la plage définit le champ numérique avec le contrôle du curseur
la réinitialisation définit le bouton de réinitialisation. Le bouton de réinitialisation réinitialisera tous les champs du formulaire à leurs valeurs initiales
recherche Définit le champ de texte utilisé pour la recherche
soumettre Définit le bouton de soumission. Le bouton Soumettre envoie les données au serveur
texte par défaut. Définissez un champ de saisie sur une seule ligne dans lequel les utilisateurs peuvent saisir du texte. La valeur par défaut est de 20 caractères
url définit le champ de texte utilisé pour l'URL

Certaines personnes disent que la valeur est rarement utilisée maintenant. Je suppose que les débutants ne savent pas que l'espace réservé est un nouvel attribut de H5, et c'est le cas. est de IE6 à IE9. L’espace réservé natif n’est pas pris en charge.

Si vous utilisez simplement un espace réservé sans résoudre le problème de compatibilité (vous devez ajouter une longue section de code de compatibilité pour utiliser un espace réservé), on peut seulement dire que vous ne faites que regarder autour de vous, sans travailler.

(Le texte rouge est le contenu de la zone de commentaire, dont certains sont temporairement incompréhensibles)

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
Copier après la connexion
<🎜. >Quand l'utilisateur en a besoin Lors de la saisie de gros blocs de texte dans un formulaire, vous devez utiliser des champs de saisie de texte.

Syntaxe : 

<textarea  rows="行数" cols="列数">文本</textarea>
Copier après la connexion
1. Les balises

Exemple :
Copier après la connexion
Afficher les résultats dans le navigateur :

Tutoriel HTML de base sur linteraction avec les téléspectateurs, les balises de formulaire

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行