本博文介紹HTML中的表單標簽,包含form表單域、input輸入表單、label標簽、select下拉表單和textarea文本域。 ...
本博文介紹HTML中的表單標簽。
表單 = 表單域 + 表單控制項 + 提示信息,下麵說說表單域和表單控制項。
1 表單域標簽:<form></form>
基本格式:
<form action="url" method="提交方式" name="表單功能變數名稱稱">
各種表單元素控制項
</form>
參數說明:
參數 | 說明 |
action | 用於指定接收並處理表單數據的伺服器程式的URL |
method | 用於設置表單數據的提交方式,其取值為get或者post |
name | 指定表單的名稱 |
2 表單控制項(表單元素)
- input輸入表單元素
基本格式:<input type="表單類型" name="表單名稱" value="表單的值">
input的常用屬性:
屬性名 | 說明 |
type | 決定輸入類型,可選值及說明在下表 |
name | 定義input元素的名稱 |
id | 標簽的唯一標識 |
value | 規定input元素的值 |
checked | 規定此input元素首次載入時被選中,用法:checked="checked" |
maxlength | 規定表單中輸入字元串的最大長度 |
屬性type的可選值:
可選值 | 說明 |
button | 可點擊按鈕(結合js搭配使用) |
file | 定義輸入欄位和“瀏覽”按鈕,供文件上傳 |
checkbox | 覆選框(表單屬性name需要相同) |
password | 密碼欄位,欄位中字元被掩碼 |
hidden | 隱藏的輸入欄位 |
radio | 單選按鈕(表單屬性name需要相同) |
reset | 重置按鈕,清除表單數據 |
text | 單行輸入欄位,預設寬度為20字元 |
submit | 提交按鈕,可將表單數據發送到伺服器 |
- label標簽
用處:綁定一個表單元素,當點擊label標簽內文本時,瀏覽器自動將游標轉到(或選擇)對應的表單元素。註意label的for屬性值要和input的id屬性值一致。
基本格式:<label for="input的id值">標簽內文本</label>
舉例:
<label for="字元串">男</label>
<input type="radio" name = "sex" id="字元串">
此時用戶點擊“男”,則會選中單選按鈕。
- select下拉表單元素
基本格式:
<select>
<option>選項1</option>
<option>選項2</option>
</select>
註意:<option>中添加selected = "selected",則表示預設選中。
- textarea文本域元素
基本格式:
<textarea rows="行數" cols="列數">
文本內容
</textarea>
參數說明:
參數 | 說明 |
rows | 文本域的行數 |
cols | 文本域的列數 |