表單是網(wǎng)頁(yè)中最常見(jiàn)的元素，也是用戶和我們交互的重要手段，在網(wǎng)站中的登錄、注冊(cè)、信息更新這些功能都是依賴表單實(shí)現(xiàn)的。在HTML中對(duì)于表單提供了一系列的標(biāo)簽，即輸入框、下拉框、按鈕、文本域，如下是一個(gè)最常見(jiàn)的表單結(jié)構(gòu)內(nèi)容：

1 <form method="" action="" enctype="multipart/form-data(提交表單中有文件設(shè)置)"> 2 <!-- 輸入框-文本框 --> 3 <input type="text" name="文本框名稱"/> 4 <!-- 輸入框-密碼框 --> 5 <input type="password" name="密碼框名稱"/> 6 <!-- 輸入框-單選按鈕（通常是一對(duì)） --> 7 <input type="radio" name="單選按鈕名稱" value="單選按鈕值"/>描述文本（頁(yè)面顯示內(nèi)容） 8 <!-- 輸入框-復(fù)選框（通常是 name屬性相同的一組） --> 9 <input type="checkbox" name="復(fù)選框名稱" value="復(fù)選框值"/>描述文本（頁(yè)面顯示內(nèi)容） 10 <!-- 輸入框-文件域（注意此時(shí)必須設(shè)置表單的 enctype 屬性） --> 11 <input type="file" name="文本框名稱"/> 12 <!-- 下拉列表 --> 13 <select name="下列框名稱"> 14 <option value="下拉列表選項(xiàng)值（通常是一組）">下拉列表選項(xiàng)（頁(yè)面顯示內(nèi)容） </option> 15 </select> 16 <!-- 按鈕-普通 --> 17 <input type="button" name="按鈕名稱" value="按鈕頁(yè)面顯示文字"> 18 <!-- 按鈕-提交 --> 19 <input type="submit" name="按鈕名稱" value="按鈕頁(yè)面顯示文字"> 20 <!-- 按鈕-重置 --> 21 <input type="reset" name="按鈕名" value="按鈕頁(yè)面顯示文字"> 22 </form> View Code

表單結(jié)構(gòu)

1 <form action="" method="POST" enctype="multipart/form-data"> 2 用戶名：<input type="text" name="username"/> 3 4 <input type="submit" name="提交按鈕"/> 5 </form>

如上是一個(gè)最簡(jiǎn)單的表單結(jié)果，在表單結(jié)構(gòu)中需要我們掌握的內(nèi)容除了表單相關(guān)的標(biāo)簽外，就是表單的屬性。action?屬性，指向服務(wù)器處理表單的程序地址，而method屬性指定瀏覽器處理表單的方式，常用的方法包括GET、POST，如下是我們總結(jié)的一些關(guān)于這兩種方式的區(qū)別：

GET，這種方法在表單提交的時(shí)候比較快，但是表單中的數(shù)據(jù)會(huì)顯示在瀏覽器的地址欄中，所以這種方式不太安全。

POST，這種方法在提交表單的時(shí)候會(huì)對(duì)表單內(nèi)容進(jìn)行封裝，不會(huì)顯示在地址欄中，所以這種方式比較安全，不過(guò)在速度上不如GET方式。

輸入框

<p>用戶名：<input type="text" name="username"/> </p> <p>密 碼：<input type="password" name="password"/> </p> <p>性 別：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女 </p> <p>愛(ài) 好：<input type="checkbox" name="hobbies"/>讀書(shū)<input type="checkbox" name="hobbies"/>打游戲<input type="checkbox" name="hobbies"/>旅游<input type="checkbox" name="hobbies"/>爬山 </p> <p>上傳文件： <input type="file" name="uploadfile"/> </p> <p>隱藏域： <input type="hidden" name="userid" value="0000011101010"/> </p>

如上就是表單的中輸入框內(nèi)容，輸入框依賴的是<input>標(biāo)簽，不同的輸入框?qū)崿F(xiàn)是通過(guò)它的type屬性實(shí)現(xiàn)的，關(guān)于type屬性的值包括可用的選項(xiàng)包括 text（普通文本輸入）、password（密碼框） 、checkbox（復(fù)選框）、radio（單選按鈕）、submit（提交按鈕）、reset（重置按鈕）、file(文件域)、hidden（隱藏域），默認(rèn)為 text。

按鈕

<p><button type="button">普通按鈕</button><button type="submit">提交按鈕</button><button type="reset">重置按鈕</button> </p> <p><input type="button" value="普通按鈕"/><input type="submit" value="提交按鈕"/><input type="reset" value="重置按鈕"/> </p>

如上就是表單中實(shí)現(xiàn)按鈕的方式，可以通過(guò)<button>標(biāo)簽，也可以通過(guò)<input>標(biāo)簽，不論使用哪種方式，我們都會(huì)發(fā)現(xiàn)這些按鈕都可以分為三類，即普通按鈕、提交按鈕、重置按鈕，指定按鈕形式都是依賴type屬性指定的。在這里需要注意的是<button>按鈕指定描述文本是在標(biāo)簽中的描述文本，而<input>標(biāo)簽指定按鈕的描述文本是通過(guò)value屬性。

下拉框

<p>省：<select name="province"><option selected>--- 請(qǐng)選擇 ---</option><option value="0001">河北省</option><option value="0002">山西省</option><option value="0003">陜西省</option></select> </p>

下拉框可以方便用戶輸入，具體的內(nèi)容如上所示。

文本域

<textarea name="content" cols="80" rows="10">測(cè)試 </textarea>

文本域可以讓我們輸入大段的文字，需要注意的是文本域和輸入框不同的地方是，文本域的默認(rèn)值是標(biāo)簽中的文本，輸入框是通過(guò)value屬性指定的。

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的4. HTML表单标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。