表單_HTML

HTML表單_輸入元素

• 大多數狀況被用到的表單標籤是輸入標籤
• 輸入類型是由類型屬性（type）定義的。

表單中的單選按鈕能夠設置如下幾個屬性：value、name、checked

• value：提交數據到服務器的值（後臺程序PHP使用）
• name：爲控件命名，以備後臺程序 ASP、PHP 使用
• checked：當設置 checked時，該選項被默認選中
• selected:同上，可是好像是列表專用的

經常使用的表單元素類型以下：

文本域（Test Fields）

文本域經過 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。 文本域爲只有一行的文本框，效果以下：

<form>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</form>

account_ :
password:

• 能夠經過將input type的值改成password來說文本域改成密碼字段專用（即輸入不可見 **或···）

文本框

<textarea rows="4" cols="30">
我是一個文本框。rows爲行數，cols爲列數
</textarea>

我是一個文本框。rows爲行數，cols爲列數

按鈕

<form action="">
<input type="button" value="This is a button">這個按鈕下什麼都沒有
</form>

這個按鈕下什麼都沒有

單選按鈕和複選框（Radio Buttons ,ChackBoxes）

<input type="radio">

<input type="checkbox">

<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Male
Female

I have a bike
I have a car

• 同一個name屬性的單選框爲一組,同一組的按鈕才能起到單選的做用

select選擇列表

<form action="">
<select name="cars">
<option value="null">請選擇性別</option>
<optgroup label="正常">
<option value="1">男</option>
<option value="2">女</option>
<optgroup label="特殊">
<option value="3" selected>不詳</option>
</select>
</form>

請選擇性別 男 女 不詳

• <optgroup label="分組名稱"> 列表選項分組（標籤）（不可作爲選項之一，只作分組之用）
• 無需多餘解釋，代碼便可
• 可在option標籤中 添加selected元素即爲預選項，如沒有，則默認爲第一個option

提交按鈕(Submit Button)

<input type="submit">定義了提交按鈕.

顧名思義，提取表單中的數據到某處

• 當用戶單擊確認按鈕時，表單的內容會被傳送到另外一個文件。表單的動做屬性定義了目的文件的文件名。由動做屬性定義的這個文件一般會對接收到的輸入數據進行相關的處理。

重置按鈕

<input type="reset">定義重置按鈕

• 點擊以後會將重置按鈕所在的表單中填寫的內容從新設置爲默認值。

<input type="reset" name="button" id="button" value="重置">

表單

在表單周圍添加邊框

<form>
<fieldset>
<legend>邊框上的文字:</legend>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</fieldset>
</form>

邊框上的文字:

account_ :
password:

<label>標籤

表單內的 標籤沒有什麼特殊的效果 ，只是在用鼠標點擊標籤時會觸發旁邊的

控件（好比單選框）但須要label的for屬性等於input的id屬性

for屬性可把 label 綁定到另一個元素。請把for屬性的值設置爲相關元素的id屬性的值。

• label確定不止是這麼用的，可是目前···