HTML表單是什麼？ HTML表單內容的詳細介紹（附程式碼）-html教學-PHP中文網

HTML 表單是用於蒐集不同類型的使用者輸入的，表單是一個包含表單元素的區域；表單元素是允許使用者在表單中（例如：文字網域、下拉式清單、單選方塊、核取方塊等等）輸入資訊的元素；表單使用表單標籤（

）定義。

一、介紹

1.表單概念：

表單最重要的表現是在客戶端接收用戶的信息，然後將數據遞交給後台的程式來操控這些數據，從技術的概念上說，表單就是用來操作form對象，對象就是一種基本的資料型別

2.建立表單:

表單透過標籤來創建，其中放置表單的對象，如表單域、按鈕和其他事物，標籤中可擴展幾個屬性:

a.action屬性

透過標籤定義的表單裡面必須有action屬性才可以將表單中的資料遞交上去

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

登入後複製

以上程式碼表示這個表單的功能是用來提交some.php這個頁面的資料

b.method屬性

此屬性的功能是告訴瀏覽器資料是以何種方式提交上去的，該屬性下有兩個選擇:"get"和"post"，預設情況下，資料被提交的方式是get,表單域中輸入的內容會添加在action指定的URL中，當表單提交後用戶便獲得一個明確的URL,由於這種方式下數據會添加到URL中，所以好處是可以保存在收藏夾中和他人分享，直接訪問主頁的URL可以達到和填寫註冊後一樣的效果，如有些時候，用戶將自己已經註冊過的一些網站主頁加入到自己的收藏夾，再次從收藏夾中打開時，會發現已經是登入的狀態。而post 這種方式，資料將以HTTP頭的形式傳送，表單資料不再是URL中的一部分。二者差異是get在安全性上較差，所有表單域的值直接呈現，而post除了可見的處理腳本程式以外，別的東西都可以隱藏，所以在實際運用時通常選擇post這種處理方式

c.name屬性

#作用是令提交上去的表單資料可以被處理這些資料的程式識別，頁面大部分放入的表單很可能不只一個，此時就需要給不同的表單起不同的名字，以便程式辨識

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


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

登入後複製

上述部分程式碼說明透過表單me取得輸入的length數值，程式碼中有不同的表單可以透過name來識別

d.enctype屬性

該屬性代表HTML表單數據的編碼方式，分別有application/x-www-form-urlencoded（標準編碼方式，提交的資料被編碼為名稱/ 值對）、multipart/form-data（表示資料編碼為一個訊息，為表單定義了MIME編碼方式，創建了一個與傳統不同的POST緩衝區，頁面上每個控制項對應訊息的一個部分）和text/plain（表示資料以純文字的形式進行編碼，這樣在資訊中將不包含控製或格式字元）共三種方式

e.target屬性

目標顯示方式，表示在何處開啟目標URL，可以設定4種方式，_blank表示在新的頁面中打開鏈接，_self表示在相同的窗口打開頁面，_parent表示在父級窗口打開頁面，_top表示將頁面載入到包含該鏈接的窗口，取代任何當前在視窗中的頁面.

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

登入後複製

這段程式碼表明該表單的動作是發送到郵箱depp59@gmail.com，使用post的傳輸方式，使用text/plain編碼方式的me表單，使之在新頁面中開啟

#3.表單網域：即使用者輸入資料的地方

#表單域可以分為input、textarea、select 3個對象，其中大部分錶單透過input屬性來實現，textarea和select建立一種控制類型

二、input物件下的多種表單表現形式

頁面中大部分錶單的形式都是透過輸入標記input來實現的

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

登入後複製

#a .其中name表示輸入資料的名字，其作用是為了讓程式明白所提交的資料

<input type="text" name="length">   这个输入的数据命名为length
  var length=document.me.length.value;

登入後複製

如果缺少了這樣一個name屬性，雖然在瀏覽器中的顯示沒有什麼變化，但後台程式後JavaScript程式就無法取得提交的資料

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>

登入後複製