表單 1. 表單的組成 一個完整的表單通常由表單域、表單控制項(也稱表單元素)和提示信息3各部分組成 2. 表單域 表單域是一個包含表單元素的區域 在HTML中, 標簽用去定義表單域,以實現用戶信息的收集和傳遞 ~~~html 各種表單元素空間 </form ~~~ | 屬性 | 屬性值 | 作用 | ...
表單
- 表單的組成
- 一個完整的表單通常由表單域、表單控制項(也稱表單元素)和提示信息3各部分組成
- 表單域
- 表單域是一個包含表單元素的區域
- 在HTML中,<form> 標簽用去定義表單域,以實現用戶信息的收集和傳遞
<form action="url地址" method="提交方式" name=”表單功能變數名稱稱“>
各種表單元素空間
</form>
屬性 | 屬性值 | 作用 |
---|---|---|
action | url地址 | 用於指定接受並處理表單數據的伺服器程式的url地址 |
method | get\post | 用於設置表單數據的提交方式,其取值為get\post |
name | 名稱 | 用於指定表單的名稱,以區分同一個頁面中的多個表單域 |
表單元素
在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制項
input輸入表單元素
- input時輸入的意思,在表單元素中<input> 標簽用於收集用戶信息
- 在<input> 標簽中,包含一個type屬性,根據不同的type屬性值,輸入欄位擁有很多種形式(可以是文本欄位、覆選框、掩碼後的文本控制項,單選按鈕、按鈕等)
<input type="屬性值" />
<input /> 標簽為單標簽
type屬性設置不同的屬性 值用來指定不同的控制項類型
屬性值 描述 button 定義按鈕(多數情況下用於通過js啟動腳本) checkbox 覆選框 file 輸入欄位和”瀏覽“按鈕,供上傳文件 hidden 定義隱藏的輸入欄位 image 定義圖像形式的提交按鈕 password 定義密碼欄位,該欄位中的字元被掩碼 radio 定義單選按鈕 reset 定義重置按鈕,重置按鈕會清除表單中的所有數據 submit 定義提交按鈕,提交按鈕會把表單數據發送到伺服器 text 定義單行輸入欄位,用戶可在其中輸入文本,預設寬度為20個位元組 name 定義input元素的名稱 value 定義input的值 checked input元素首次載入是應被選中 maxlength 輸入欄位中的字元的最大長度 placeholder input文本框,初始裡邊有文字提示,當點擊時,文字消失 - name、value是每個表單元素都有的屬性值,主要給後臺人員用
- name表單元素的名字,要求單選按鈕和覆選框要有相同的name值
checked屬性主要針對單選按鈕和覆選框,主要作用一打開頁面,主要可以預設選中某個表單元素
<label> 標簽為input元素定義註標
- <label> 標簽用於綁定一個表單元素,當點擊<lable> 標簽內的文本時,瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加用戶體驗
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
【註意】<label> 標簽的for屬性應當與相關元素的id屬性相同
select下拉表單元素
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> </select>
- <select> 中至少包含一對<option>
- <option> 中定義select=”select“時,當前項即為預設選項
textarea文本域元素
<textarea rows="3" cols="20"> 文本內容 </textarea>