DIV CSS 佈局教程網

表單標簽共有4個：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

我們通過一張表單來把所有input標簽囊括：

一、input標簽表單

大部分表單都是用input標簽完成的。

語法：

<input type="表單類型"/>

說明：

表1中的表單都是使用input標簽，所不同的就是type屬性值不同。

二、<textarea>標簽表單

1、多行文本框

語法：

<textarea rows="行數" cols="列數">多行文本框內容</textarea>

表現形式如下：

2、3種文本框對比

單行文本框和密碼文本框使用<input>標簽，而多行文本框使用<textarea>標簽。

（1）單行文本框

語法：

<input type="text" value="默認文字" size="文本框長度" maxlength="最多輸入字符數"/>

（1）密碼文本框

語法：

<input type="password">

（1）多行文本框

語法：

<textarea rows="行數" cols="列數">多行文本框內容</textarea>

三、<select>和<option>

下拉列表由<select>標簽和<option>標簽配合使用。

語法：

 
<select multiple="mutiple" size="可見列表項的數目">
    <option value="選項值" selected="selected">選項顯示的內容</option>
    ……
    <option value="選項值">選項顯示的內容</option>
</select>

表現形式如下：

疑問

1、HTML表單那麼多，每一種表單都有自己好幾個屬性，該怎麼記憶呢？

對於初學者來說，記憶各種HTML表單元素是最關心但最為頭疼的一件事。我在此說一句，在學習HTML入門教程的時候，我們不需要花太多的力氣去記憶表單標簽及其屬性，只需要感性認知即可。在編程的時候我們可以利用Visual Studio中HTML控件拖拽形式來寫代碼。如果我們有哪些屬性忘記了，我們可以回到教程這裡查一查。經過後續課程的學習，或者自己編程累積了一定的經驗之後，你就自然而然記住了各種表單標簽及其屬性，這時候你直接能寫出代碼來了。

2、表單元素是否一定要放在<form>標簽內的問題？

表單元素不一定都要放在form標簽內。對於要與服務器進行交互（也可以說是跟網站後台進行交互）的表單元素就必須放在form標簽內才有效。然後，如果表單元素不需要跟服務器進行交互，那就沒必要放在form標簽內。

總結

表單這一章大家看著挺復雜，其實真正掌握也確實是挺復雜的。因為表單標簽更多的是與服務器端進行交互（也就是後端的內容）。不過呢，在HTML入門階段，我們只要把基本標簽記住並且能寫出來就行了。至於如何與服務器端進行數據傳輸，這些東西等我們學了後端技術就什麼都懂了。