Qu'est-ce qu'un formulaire HTML ? Introduction détaillée au contenu des formulaires HTML (avec code)

1. Introduction

1. Concept de formulaire :

La performance la plus importante du formulaire est de recevoir les informations de l'utilisateur sur le client, puis de soumettre les données au programme d'arrière-plan pour manipuler les données à partir d'un concept technique. , le formulaire Il est utilisé pour faire fonctionner des objets de formulaire. L'objet est un type de données de base

2. Créer un formulaire. :

Les formulaires sont créés via la balise , dans laquelle des objets de formulaire tels que des champs de formulaire, des boutons et d'autres éléments peuvent être étendus.  :

un attribut.action

Le formulaire défini via la balise être soumis

<form action="some.php">
     </form>

Le code ci-dessus indique que la fonction de ce formulaire est de soumettre les données de la page some.php

Attribut b.method

La fonction de cet attribut est d'indiquer au navigateur comment les données sont soumises. Il y a deux options sous cet attribut : "get" et "post". Par défaut, les données sont soumises. La méthode est get. Le contenu saisi dans le champ du formulaire sera ajouté à l'URL spécifiée par l'action, l'utilisateur obtiendra une URL claire puisque les données seront. ajouté à l'URL dans cette méthode, l'avantage est qu'il peut être enregistré lors du partage avec d'autres dans les favoris, accéder directement à l'URL de la page d'accueil peut obtenir le même effet que remplir le formulaire d'inscription. Par exemple, parfois, les utilisateurs ajoutent. les pages d'accueil de certains sites Web qu'ils ont déjà enregistrés dans leurs favoris, puis cliquez à nouveau sur l'URL des favoris. Lorsque vous l'ouvrez, vous constaterez que vous êtes déjà connecté. En méthode post, les données seront envoyées sous forme d'en-tête HTTP et les données du formulaire ne font plus partie de l'URL. La différence entre les deux est que get est moins sécurisé en termes de sécurité et que les valeurs de tous les champs du formulaire sont affichées directement, tandis que post peut tout masquer sauf le script de traitement visible, donc dans les applications réelles, post est généralement le traitement méthode

attribut c.name

est utilisé pour permettre aux données du formulaire soumis d'être reconnues par le programme qui traite les données. Il peut y avoir plus d'un formulaire placé dans la plupart des pages. À ce stade, vous devez donner des noms différents aux différents formulaires afin que le programme puisse les identifier, il existe différents formulaires dans le code qui peuvent être identifiés par. name

<form name="me">
</form>


...
<script language="JavaScript">
      var length=document.me.length.value;
</script>

attribut d.enctype

Cet attribut représente HTML Les méthodes d'encodage des données de formulaire incluent application/x- www-form-urlencoded (méthode de codage standard, les données soumises sont codées sous forme de paire nom/valeur), multipart/form-data (indique que les données sont codées comme une information, définie pour le formulaire en plus de la méthode de codage MIME , un tampon POST est créé, différent du tampon traditionnel (chaque contrôle de la page correspond à une partie du message) et text/plain (indiquant que les données sont codées en texte brut, afin que les informations ne contiennent pas de contrôles). ou formater les caractères) de trois manières

attribut e.target

mode d'affichage cible, indiquant où ouvrir l'URL cible, peut être défini de 4 manières, _blank signifie ouvrir le lien dans une nouvelle page, _self signifie ouvrir la page dans la même fenêtre, _parent signifie ouvrir la page dans la fenêtre parent, _top signifie charger la page dans la fenêtre contenant le lien, en remplaçant any La page actuellement dans la fenêtre.

Ce code indique que l'action du formulaire est de l'envoyer à l'email depp59@gmail.com, en utilisant la méthode de post-transmission et le formulaire moi en utilisant du texte. /plain encodage. Faites-le ouvrir dans une nouvelle page

<form action="mailo:depp59@gmail.com"
      method="post"
      name="me"
      enctype="text/plain"
      target="_blank">
...
</form>

Le champ du formulaire peut être divisé en 3 objets : input, textarea et select. La plupart des formulaires sont implémentés via l'attribut input Textarea et select créent un type de contrôle <🎜. >

La plupart des formulaires de la page sont implémentés via la balise d'entrée input

<input name=""
       type=""
       value=""
       size=""
       maxlength="">

Si un tel attribut de nom est manquant. , bien qu'il n'y ait aucun changement dans l'affichage dans le navigateur, mais le programme JavaScript ne peut pas obtenir les données soumises après le programme en arrière-plan

b.type属性表示所定义的是哪种类型的表单形式，该属性有九个可选值:

text 单行的文本框
password 将文本替换为"*"的文本框
checkbox 只能做二选一的是或否选择
radio 从多个选项中确定的一个文本框
submit 确定命令文本框
hidden 设定不可被浏览用户修改的数据
image 用图片表示的确定符号
file 设置文件上传
button 用来配合客户端脚本

c.size:表示文本框字段的长度

d.maxlength:表示可输入的最长的字符数量

e.value:表示预先设置好的信息

4.text文本框的样式表单

<html>
<head>
    <title>text样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=20 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20>
    </form>
</body>
</html>

代码中size定义了文本框的长度，而maxlength定义了这个文本框最多只能输入12个字符，如果超出了这个长度数据将不能输入，这两个text样式的数据定义了不同的名字这很关键，否则一旦需要被程序调用数据将无法辨认。

5.password输入密码的样式表单（可以将文本使用保密形式展示出来的一个功能，根据不同的浏览器会使用点状形态或星号符表示）

<html>
<head>
    <title>password样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=40 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20><br>
         输入密码:<input type="password" name="password" size=20 maxlenght=12>
    </form>
</body>
</html>

6.checkbox复选框的表单样式（浏览器会在选择栏前面提供一个小方框如果选择小框中会添加小勾符号表示选中）

<html>
<head>
    <title>checkbox样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
   
<body>
    <form action="some.php" name="myform">
        <h3>注册信息:</h3>
           <input type="checkbox" name="truename" checked="checked">使用真实姓名
        <h3>实名制可以方便您更好地和朋友交流</h3>
           <input type="checkbox" name="address" checked="checked">显示我的地址
        <h3>如果去除勾选，其他用户将无法查到你的地址</h3>
           <input type="checkbox" name="mail"  checked="checked">可以给我发邮件
        <h3>如果勾选，我们将会为您发送来自广告商的信息</h3> 
    </form>
</body>
</html>

上面代码中添加了checked="checked"表示复选框默认值设置为checked,那么√符号会被默认添加

7.radio单选按钮的样式表单（多选一表单）

radio样式类似于选择题，在一组选项中选出唯一的一项，发送这列数据，其中给这组选项定义相同的名字，但是通过value属性 来加以区别，因此，这里必须给input对象设定value值，而且不同对象的value值不能相同，否则数据无法辨认

<html>
<head>
    <title>radio样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head> 
<body>
    <form action="some.php" name="myform">
       <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
       <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
       <h3>请正确选择您的性别哦</h3>
    </form>
</body>
</html>

8.submit提交数据的样式表单
该属性创建一个按钮，该按钮的作用就是提交数据。当点击"提交"按钮时，数据会发送到指定的地方。其中通过value值可以修 改按钮上显示的内容。此外还有一个reset属性，这是一个复位按钮，当被点击时表单的内容会被重新设置，回到页面初始位置

<html>
<head>
    <title>submit样式表单</title>
    <style type="text/css">
        input{
            font:100% 微软雅黑;
        }
    
    </style>
</head>   
<body>
    <form action="some.php" name="myform">
        <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
        <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
        <h3>请正确选择您的性别哦</h3>
    
           <input type="submit" name="submit" value="确定">
           <input type="reset" name="submit" value="复位">
    </form>
</body>
</html>

9.hidden隐藏域的样式表单
hidden属性可以创建一个隐藏域，数据会被隐藏起来，用户无法对其进行操作（这些数据通常是用户不关心的但是必须被提交 的数据）
10.image样式的表单（可以看做图像替换按钮的技术，当图像被点击时，数据一并被提交至服务器）

使用src属性指定这张图像的路径，使用alt属性来添加文本注释，此时提交按钮被替换成一个小小的图像，当点击图像时，其作 用就相当于submit按钮，但是当表单数据被提交的同时，用户所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送
表单中还有一种触发事件的button表单，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调用前端页 面，即客户端的脚本程序

11.file上传文件的样式表单
该表单允许用户上传自己的文件，例如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。需要注意的 是，当使用file样式的表单时，必须在标签中说明编码方式，这样服务器才可以接收到正确信息

<body>
    <h3>上传我的文件</h3>
    <form action="some.php" enctype="multipart/form-data" name="myform">
        <input type="file" name="uploadfile"> 
    </form>
</body>

三、textarea对象的表单
该对象就像是input对象中的text表单，只不过是扩展过的text样式表单，可以通过行(rows)属性和列(cols)属性来编辑文本域的大 小，常见于留言板、论坛中回帖时的文本框等

<html>
<head>
    <title>textarea对象的表单</title>
    <style type="text/css">
        textarea{
            font:100% 微软雅黑;
            color:navy;
        }
    
    </style>
</head> 
<body>
  <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <textarea name="some" rows=10 cols=50 value="say">请文明用语:
      </textarea>
  </form>
</body>
</html>

textarea属性标签必须要封闭，且生成页面时在文本框中会预先设置好文本“请文明用语”，但是用户不得不先删去预先的文本再 编辑自己的内容。当文本框中输入的内容超出预先设置的行数时会自动出现滚动条，如果没有超出文本框的范围则滚动条是灰 色的
四、select对象表单
使用select将创建一个列表样式的表单，显示为出现一个下拉列表框，令用户可以方便的选择其中一个目录，通常在一些要求填 写地区、生日等信息中，设计者可以给使用者准备好选项，需要使用标签来定义可供选择的每一项

<html>
<head>
    <title>select对象的表单</title>
    <style type="text/css">
        select{
           font:100% 微软雅黑;
           color:Green;
        }
    </style>
</head> 
<body>
   <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <h3>地址</h3>
      <select name="上海">
          <option>黄浦区</option>
          <option>虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </select>
   </form>
</body>
</html>

用户可以通过下拉列表框选择一个“地址”，而这个数据会被表单发送到服务器，此外还可以通过value属性为每一个option指定不 同的值，这样的话value设置的值将取代option的文本内容。注意如果设计者希望预先设置初始值，那么在所希望的option中添加 selected="selected"就可以了，如浦东新区,否则默认初始值应该是第一个出现的 的文本内容。
如果下拉列表内内容太多，可以使用标签配合label属性来给选项分类

<select name="上海">
      <optgroup label="Team1">
          <option>黄浦区</option>
          <option selected="selected">虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </optgroup>
      <optgroup label="Team2">
          <option>长宁区</option>
          <option>杨浦区</option>
          <option>徐汇区</option>
          <option>普陀区</option>
      </optgroup>        
</select>

此外如果不希望select对象以下拉列表框的形式展现出来，有一种方式可以将目录项以滚动条的样式表现出来，只需要在select 标签中加入size属性，如"size=6"表示是一个能容纳6行文字的文本框，当目录项超出设置的行数时将出现滚动条

<select name="上海" size="5">
        <option>黄浦区</option>
        <option selected="selected">虹口区</option>
        <option>静安区</option>
        <option>宝山区</option>
        <option>长宁区</option>
        <option>杨浦区</option>
        <option>徐汇区</option>
        <option>普陀区</option>        
</select>

五、表单域集合
如果表单的项目过多或为了修饰表单部分，可以通过使用表单域将表单分组，表单域的代码由

<html>
<head>
    <title>表单域</title>
</head> 
<body>
  <form action="some.php" method="post" name="myform">
     <fieldset>
          <legend>注册信息:</legend>
          输入用户名:<input type="text" name="name" size=20 maxlength=12>
          <!--这里可以放入许多样式的表单-->
     </fieldset>
  </form>
</body>
</html>