Was ist ein HTML-Formular? Detaillierte Einführung in HTML-Formularinhalte (mit Code)

1. Einleitung

1. Formularkonzept:

Die wichtigste Leistung des Formulars besteht darin, die Informationen des Benutzers über den Client zu empfangen und die Daten dann an das Hintergrundprogramm zu übermitteln, um die Daten aus einem technischen Konzept zu bearbeiten , das Formular Es wird zum Betreiben von Formularobjekten verwendet. Das Objekt ist ein grundlegender Datentyp

2. Erstellen Sie ein Formular :

Formulare werden über das -Tag erstellt, in dem Formularobjekte wie Formularfelder, Schaltflächen und andere Dinge platziert werden können -Tag:

a.action-Attribut

Das durch das -Tag definierte Formular muss ein Aktionsattribut haben, bevor die Daten im Formular übertragen werden können eingereicht werden

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

Der obige Code gibt an, dass der Zweck dieses Formulars darin besteht, die Daten der some.php-Seite zu übermitteln

b.method-Attribut

Die Funktion dieses Attributs besteht darin, dem Browser mitzuteilen, wie die Daten übermittelt werden. Unter diesem Attribut gibt es zwei Optionen: „get“ und „post By“. Standardmäßig wird der in das Formularfeld eingegebene Inhalt der durch die Aktion angegebenen URL hinzugefügt Auf diese Weise zur URL hinzugefügt, besteht der Vorteil darin, dass sie in der Sammlung gespeichert werden kann. Durch den direkten Zugriff auf die URL der Homepage kann beispielsweise manchmal derselbe Effekt erzielt werden. Benutzer fügen die Homepages einiger Websites, die sie registriert haben, zu ihren Favoriten hinzu, und wenn sie sie erneut über ihre Favoriten öffnen, werden Sie feststellen, dass Sie bereits angemeldet sind. Bei der Post-Methode werden die Daten in Form eines HTTP-Headers gesendet und die Formulardaten sind nicht mehr Teil der URL. Der Unterschied zwischen den beiden besteht darin, dass get weniger sicher ist und die Werte aller Formularfelder direkt angezeigt werden, während post alles außer dem sichtbaren Verarbeitungsskript verbergen kann, sodass in tatsächlichen Anwendungen normalerweise post verarbeitet wird method

c.name attribute

wird verwendet, um die Erkennung der übermittelten Formulardaten durch das Programm zu ermöglichen Verarbeitet die Daten. Auf den meisten Seiten sind möglicherweise mehrere Formulare platziert. Zu diesem Zeitpunkt müssen Sie den verschiedenen Formularen unterschiedliche Namen geben, damit das Programm sie anhand ihres Namens identifizieren kann >

d.enctype-Attribut

Dieses Attribut stellt HTML-Formulardaten dar. Zu den Kodierungsmethoden gehören application/x-www-form- urlencoded (Standardcodierungsmethode, übermittelte Daten werden als Name/Wert-Paar codiert), multipart/form-data (zeigt an, dass die Daten als Informationselement codiert sind und MIME für das Formular definiert ist. Die Codierungsmethode erstellt einen POST-Puffer, der unterscheidet sich vom herkömmlichen Steuerelement auf der Seite) und Text/Plain (zeigt an, dass die Daten in Form von Klartext codiert sind, sodass keine Steuerelemente oder Formate in den Informationen enthalten sind. Zeichen) auf drei Arten

e.target-Attribut

Zielanzeigemodus, der angibt, wo die Ziel-URL geöffnet werden soll Es gibt vier Möglichkeiten: _blank bedeutet, den Link in einer neuen Seite zu öffnen, _self bedeutet, die Seite im selben Fenster zu öffnen, _parent bedeutet, die Seite im übergeordneten Fenster zu öffnen, _top bedeutet, dass die Seite in das Fenster geladen wird, das den Link enthält, und alle aktuell vorhandenen ersetzt Die Seite im Fenster.

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


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

Das Formularfeld kann in drei Objekte unterteilt werden: Eingabe, Textbereich und Auswahl. Die meisten Formulare werden über das Eingabeattribut implementiert und erstellen einen Steuerelementtyp

Die meisten Formulare auf der Seite werden über das Eingabe-Tag input

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

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

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>