明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML表單是什么？HTML表單內(nèi)容的詳細(xì)說明（附代碼）

發(fā)表時間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]HTML 表單是用于搜集不同類型的用戶輸入的，表單是一個包含表單元素的區(qū)域；表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素；表單使用表單標(biāo)簽（<form>）定義。一、介紹1.表單概念：表單最重要的表現(xiàn)是在客戶端接收用戶的信息，然后將數(shù)據(jù)遞交給后臺...
HTML 表單是用于搜集不同類型的用戶輸入的，表單是一個包含表單元素的區(qū)域；表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素；表單使用表單標(biāo)簽（<form>）定義。

一、介紹

1.表單概念：

表單最重要的表現(xiàn)是在客戶端接收用戶的信息，然后將數(shù)據(jù)遞交給后臺的程序來操控這些數(shù)據(jù)，從技術(shù)的概念上說，表單就是用來操作form對象，對象是一種基本的數(shù)據(jù)類型

2.創(chuàng)建表單:

表單通過<form>標(biāo)簽來創(chuàng)建，其中放置表單的對象，如表單域、按鈕和其他事物，<form>標(biāo)簽中可擴(kuò)展幾個屬性:

a.action屬性

通過<form>標(biāo)簽定義的表單里面必須有action屬性才可以將表單中的數(shù)據(jù)遞交上去

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

以上代碼表示這個表單的作用是用來提交some.php這個頁面的數(shù)據(jù)

b.method屬性

該屬性的作用是告訴瀏覽器數(shù)據(jù)是以何種方式提交上去的，該屬性下有兩個選擇:"get"和"post"，默認(rèn)情況下，數(shù)據(jù)被提交的方 式是get,表單域中輸入的內(nèi)容會添加在action指定的URL中，當(dāng)表單提交后用戶便獲得一個明確的URL,由于這種方式下數(shù)據(jù)會添 加到URL中，所以好處是可以保存在收藏夾中和他人分享，直接訪問主頁的URL可以達(dá)到和填寫注冊后一樣的效果，如有些時 候，用戶將自己已經(jīng)注冊過的一些網(wǎng)站主頁加入到自己的收藏夾，再次從收藏夾中打開時，會發(fā)現(xiàn)已經(jīng)是登錄的狀態(tài)。而post 這種方式，數(shù)據(jù)將以HTTP頭的形式發(fā)送，表單數(shù)據(jù)不再是URL中的一部分。二者區(qū)別是get在安全性上較差，所有表單域的值 直接呈現(xiàn)，而post除了可見的處理腳本程序以外，別的東西都可以隱藏，所以在實(shí)際運(yùn)用時通常選擇post這種處理方式

c.name屬性

作用是令提交上去的表單數(shù)據(jù)可以被處理這些數(shù)據(jù)的程序識別，大部分頁面中放入的表單很可能不止一個，此時就需要給不同 的表單起不同的名字，以便程序識別

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


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

上述部分代碼說明通過表單me獲取輸入的length數(shù)值，代碼中有不同的表單可以通過name來識別

d.enctype屬性

該屬性代表HTML表單數(shù)據(jù)的編碼方式，分別有application/x-www-form-urlencoded（標(biāo)準(zhǔn)編碼方式，提交的數(shù)據(jù)被編碼為名稱/ 值對）、multipart/form-data（表示數(shù)據(jù)編碼為一條信息，為表單定義了MIME編碼方式，創(chuàng)建了一個與傳統(tǒng)不同的POST緩沖 區(qū)，頁面上每個控件對應(yīng)消息的一個部分）和text/plain（表示數(shù)據(jù)以純文本的形式進(jìn)行編碼，這樣在信息中將不包含控件或格 式字符）共三種方式

e.target屬性

目標(biāo)顯示方式，表示在何處打開目標(biāo)URL，可以設(shè)置4種方式，_blank表示在新的頁面中打開鏈接，_self表示在相同的窗口打開 頁面，_parent表示在父級窗口打開頁面，_top表示將頁面載入到包含該鏈接的窗口，取代任何當(dāng)前在窗口中的頁面.

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

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

3.表單域：即用戶輸入數(shù)據(jù)的地方

表單域可以分為input、textarea、select 3個對象，其中大部分表單通過input屬性來實(shí)現(xiàn)，textarea和select創(chuàng)建一種控制類型

二、input對象下的多種表單表現(xiàn)形式

頁面中大部分表單的形式都是通過輸入標(biāo)記input來實(shí)現(xiàn)的 

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

a.其中name表示輸入數(shù)據(jù)的名字，其作用是為了讓程序明白所提交的數(shù)據(jù)

<input type="text" name="length">   這個輸入的數(shù)據(jù)命名為length
  var length=document.me.length.value;

如果缺少了這樣一個name屬性，雖然在瀏覽器中的顯示沒有什么變化，但是后臺程序后JavaScript程序就不能獲得提交的數(shù)據(jù)

b.type屬性表示所定義的是哪種類型的表單形式，該屬性有九個可選值:

text 單行的文本框
password 將文本替換為"*"的文本框
checkbox 只能做二選一的是或否選擇
radio 從多個選項(xiàng)中確定的一個文本框
submit 確定命令文本框
hidden 設(shè)定不可被瀏覽用戶修改的數(shù)據(jù)
image 用圖片表示的確定符號
file 設(shè)置文件上傳
button 用來配合客戶端腳本

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

d.maxlength:表示可輸入的最長的字符數(shù)量

e.value:表示預(yù)先設(shè)置好的信息

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個字符，如果超出了這個長度數(shù)據(jù)將不能輸入，這兩個text樣式的數(shù)據(jù)定義了不同的名字這很關(guān)鍵，否則一旦需要被程序調(diào)用數(shù)據(jù)將無法辨認(rèn)。

5.password輸入密碼的樣式表單（可以將文本使用保密形式展示出來的一個功能，根據(jù)不同的瀏覽器會使用點(diǎn)狀形態(tài)或星號符表示）

<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復(fù)選框的表單樣式（瀏覽器會在選擇欄前面提供一個小方框如果選擇小框中會添加小勾符號表示選中）

<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">使用真實(shí)姓名
        <h3>實(shí)名制可以方便您更好地和朋友交流</h3>
           <input type="checkbox" name="address" checked="checked">顯示我的地址
        <h3>如果去除勾選，其他用戶將無法查到你的地址</h3>
           <input type="checkbox" name="mail"  checked="checked">可以給我發(fā)郵件
        <h3>如果勾選，我們將會為您發(fā)送來自廣告商的信息</h3> 
    </form>
</body>
</html>

上面代碼中添加了checked="checked"表示復(fù)選框默認(rèn)值設(shè)置為checked,那么√符號會被默認(rèn)添加

7.radio單選按鈕的樣式表單（多選一表單）

radio樣式類似于選擇題，在一組選項(xiàng)中選出唯一的一項(xiàng)，發(fā)送這列數(shù)據(jù)，其中給這組選項(xiàng)定義相同的名字，但是通過value屬性 來加以區(qū)別，因此，這里必須給input對象設(shè)定value值，而且不同對象的value值不能相同，否則數(shù)據(jù)無法辨認(rèn)

<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提交數(shù)據(jù)的樣式表單
該屬性創(chuàng)建一個按鈕，該按鈕的作用就是提交數(shù)據(jù)。當(dāng)點(diǎn)擊"提交"按鈕時，數(shù)據(jù)會發(fā)送到指定的地方。其中通過value值可以修 改按鈕上顯示的內(nèi)容。此外還有一個reset屬性，這是一個復(fù)位按鈕，當(dāng)被點(diǎn)擊時表單的內(nèi)容會被重新設(shè)置，回到頁面初始位置

<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="復(fù)位">
    </form>
</body>
</html>

9.hidden隱藏域的樣式表單
hidden屬性可以創(chuàng)建一個隱藏域，數(shù)據(jù)會被隱藏起來，用戶無法對其進(jìn)行操作（這些數(shù)據(jù)通常是用戶不關(guān)心的但是必須被提交 的數(shù)據(jù)）
10.image樣式的表單（可以看做圖像替換按鈕的技術(shù)，當(dāng)圖像被點(diǎn)擊時，數(shù)據(jù)一并被提交至服務(wù)器）
<input type="image" src="" alt="確定">
使用src屬性指定這張圖像的路徑，使用alt屬性來添加文本注釋，此時提交按鈕被替換成一個小小的圖像，當(dāng)點(diǎn)擊圖像時，其作 用就相當(dāng)于submit按鈕，但是當(dāng)表單數(shù)據(jù)被提交的同時，用戶所單擊的圖像的位置坐標(biāo)（image.x=23 image.y=59）也會被發(fā)送
表單中還有一種觸發(fā)事件的button表單，它只是一個按鈕，單個button按鈕并不會提交任何數(shù)據(jù)，它的作用是用來調(diào)用前端頁 面，即客戶端的腳本程序
<input type="button" value="運(yùn)行" onclick="calculate();">
11.file上傳文件的樣式表單
該表單允許用戶上傳自己的文件，例如用戶上傳自己的圖像給服務(wù)器，用來改變用戶在不同網(wǎng)站上的形象圖片。需要注意的 是，當(dāng)使用file樣式的表單時，必須在<form>標(biāo)簽中說明編碼方式，這樣服務(wù)器才可以接收到正確信息

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

三、textarea對象的表單
該對象就像是input對象中的text表單，只不過是擴(kuò)展過的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屬性標(biāo)簽必須要封閉，且生成頁面時在文本框中會預(yù)先設(shè)置好文本“請文明用語”，但是用戶不得不先刪去預(yù)先的文本再 編輯自己的內(nèi)容。當(dāng)文本框中輸入的內(nèi)容超出預(yù)先設(shè)置的行數(shù)時會自動出現(xiàn)滾動條，如果沒有超出文本框的范圍則滾動條是灰 色的
四、select對象表單
使用select將創(chuàng)建一個列表樣式的表單，顯示為出現(xiàn)一個下拉列表框，令用戶可以方便的選擇其中一個目錄，通常在一些要求填 寫地區(qū)、生日等信息中，設(shè)計(jì)者可以給使用者準(zhǔn)備好選項(xiàng)，需要使用<option>標(biāo)簽來定義可供選擇的每一項(xiàng)

<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>黃浦區(qū)</option>
          <option>虹口區(qū)</option>
          <option>靜安區(qū)</option>
          <option>寶山區(qū)</option>
      </select>
   </form>
</body>
</html>

用戶可以通過下拉列表框選擇一個“地址”，而這個數(shù)據(jù)會被表單發(fā)送到服務(wù)器，此外還可以通過value屬性為每一個option指定不 同的值，這樣的話value設(shè)置的值將取代option的文本內(nèi)容。注意如果設(shè)計(jì)者希望預(yù)先設(shè)置初始值，那么在所希望的option中添加 selected="selected"就可以了，如<option selected="selected">浦東新區(qū)</option>,否則默認(rèn)初始值應(yīng)該是第一個出現(xiàn)的<option> 的文本內(nèi)容。
如果下拉列表內(nèi)內(nèi)容太多，可以使用<optgroup>標(biāo)簽配合label屬性來給選項(xiàng)分類

<select name="上海">
      <optgroup label="Team1">
          <option>黃浦區(qū)</option>
          <option selected="selected">虹口區(qū)</option>
          <option>靜安區(qū)</option>
          <option>寶山區(qū)</option>
      </optgroup>
      <optgroup label="Team2">
          <option>長寧區(qū)</option>
          <option>楊浦區(qū)</option>
          <option>徐匯區(qū)</option>
          <option>普陀區(qū)</option>
      </optgroup>        
</select>

此外如果不希望select對象以下拉列表框的形式展現(xiàn)出來，有一種方式可以將目錄項(xiàng)以滾動條的樣式表現(xiàn)出來，只需要在select 標(biāo)簽中加入size屬性，如"size=6"表示是一個能容納6行文字的文本框，當(dāng)目錄項(xiàng)超出設(shè)置的行數(shù)時將出現(xiàn)滾動條

<select name="上海" size="5">
        <option>黃浦區(qū)</option>
        <option selected="selected">虹口區(qū)</option>
        <option>靜安區(qū)</option>
        <option>寶山區(qū)</option>
        <option>長寧區(qū)</option>
        <option>楊浦區(qū)</option>
        <option>徐匯區(qū)</option>
        <option>普陀區(qū)</option>        
</select>

五、表單域集合
如果表單的項(xiàng)目過多或?yàn)榱诵揎棻韱尾糠郑梢酝ㄟ^使用表單域?qū)⒈韱畏纸M，表單域的代碼由<fieldset>標(biāo)簽和<legend>標(biāo)簽組 合而成，默認(rèn)情況下，<fieldset>標(biāo)簽勾畫出表單域的框形，<legend>標(biāo)簽的對象像標(biāo)題一樣出現(xiàn)在框的左上角

<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>

相關(guān)推薦：

HTML 表單

HTML FORM 表單_html/css_WEB-ITnose

以上就是HTML表單是什么？HTML表單內(nèi)容的詳細(xì)介紹（附代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。