web（四）html表單類標籤

表單類標籤

　　操做者用於輸入信息，並將信息提交給服務器的標籤集合。

　　表單標籤介紹

　　　　　　form標籤：表單元素（其他標籤）標籤的容器標籤

　　　　　　input標籤：用於用戶信息輸入的標籤。

　　　　　　button標籤：按鈕標籤。

　　　　　　select/option標籤：下拉框標籤。

　　　　　　textarea標籤：文本域標籤。

　　　　　　lable標籤：修飾輸入元素的文字標籤。

 

　　表單元素標籤公有的屬性（html4標準）

　　　　　　id：表單標籤的惟一索引，通常在js中根據惟一索引獲取表單元素。

　　　　　　name：表單標籤的名稱，在提交數據時，以name屬性做爲實際值的索引。

　　　　　　disabled:禁用當前表單元素。

　　　　　　readonly：規定表當前表單元素爲只讀元素。

　　　　　　value：設定或獲取當前表單元素的輸入值。

　　　　　　accessKey：訪問當前元素的快捷鍵，非表單類屬性，但一般用在表單元素中。

 

　　form標籤：輸入標籤項的容器，封裝子輸入標籤，主要做用以下

　　　　　　設定當前表單提交的目標服務器地址。

　　　　　　設定提交的http請求類型。

　　　　　　設定提交數據的編碼格式。

　　　　　　經過js能夠在提交前驗證數據的合法性。

　　　　　　

　　　　　　method的設定

　　　　　　　　取值範圍

　　　　　　　　　　get:聲明本次請求的目的是從服務器獲取數據。

　　　　　　　　　　post：聲明本次請求的目的是向服務器傳送數據。

　　　　　　　　get與post的區別

　　　　　　　　　　目的不一樣

　　　　　　　　　　提交方式不一樣（一個在響應頭，一個在響應體）

　　　　　　　　　　提交數據長度不一樣，get：不超過255個字符，post理論上不受限制。

　　　　　　　　　　安全性get在地址欄顯示信息，不安全。

　　　　　　　　　　緩存機制不一樣，get請求的地址會保存到瀏覽器的訪問歷史記錄中，post不會。

 

　　　　　　enctype的設定的取值範圍

　　　　　　　　　　

 

　　input標籤：用來聲明一組用於用戶輸入信息的標籤，使用type屬性能夠設定輸入的類型。

　　input標籤的分類

　　　　輸入類

　　　　　　　　text：文本框，type的默認值，

　　　　　　　　password：密碼框，密碼框的文字以黑點方式顯示。

　　　　　　　　hidden：隱藏框，元素不顯示，能夠經過此標籤提交用戶不可見信息如id等。

　　　　　　私有屬性（具有表單標籤的公有屬性）

　　　　　　　　maxlength：限定輸入字符的長度。

<input type="text" value="userName" name="text" maxlength="10" />
<input type="password" value="password" name = "password" maxlength="10" />

 

　　　　選擇類

　　　　　　　　checkbox：多選框。

　　　　　　　　radio：單選框，表單中name屬性相同的radio，只能有一個被選中。

　　　　　　私有屬性（具有表單標籤的公有屬性）

　　　　　　　　checked：設定是否被選中，在html中只要聲明此屬性就被選中

<input type="radio" name = "sex"  value = "1"/></br>
<input type="checkbox" name="fav" checked="false" value="1"/>

 

　　　　文件類

　　　　　　　　file：文件選擇框。

　　　　　　私有屬性（具有表單標籤的公有屬性）

　　　　　　　　multiple：設定是否能夠多選，在html中只要聲明此屬性就能夠多選。

　　　　　　　　accept：設定選擇文件的mime類型，多個類型用逗號分隔開。

<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>

 

　　　　按鈕類

 　　　　　　　　button：按鈕標籤。

　　　　　　　　image：圖片按鈕標籤。

　　　　　　　　submit：提交按鈕標籤，默認行爲是提交當前form表單。

　　　　　　　　reset：重置按鈕標籤，默認行爲是當前表單恢復到網頁初始化狀態。

<input type="submit" value = "提交" />
<input type="reset" value = "重置" />

　　　　　　　　button標籤：按鈕標籤，非閉合標籤，能夠在該標籤內部插入其餘html元素，所以能夠定義出功能強大的按鈕。

　　　　　　私有屬性（具有表單標籤的公有屬性）

　　　　　　　　type：按鈕的類型。

　　　　　　　　reset：重置類型按鈕

　　　　　　　　submit：提交類型按鈕

　　　　　　　　button：不一樣按鈕，無默認行爲。

<button type="submit"><div>你們好</div></button>

　　

 　　下拉框標籤：使用select、option兩個標籤聲明下拉框。　　

<select name="pro" >
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

　　　　　　select標籤私有屬性

　　　　　　　　multiple：規定可選擇多個選項。

　　　　　　　　size：規定可見下拉框選項的數量。

　　　　　　option標籤私有屬性

　　　　　　　　selected:當前下拉明細項是否被選中。

　　

　　textarea標籤：設定多行的文本輸入控件。

　　　　私有屬性（具有表單標籤的公有屬性）

　　　　　　cols:規定文本區內的可見寬度。

　　　　　　rows:規定文本區內的可見行數。

　　　　　　maxlength:文本輸入的最大字符數量。

<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>

　　label元素：輸入標籤的文字描述標籤，能夠代替輸入標籤響應用戶的操做。

　　　　　　私有屬性說明

　　　　　　　　 for:輸入標籤的id屬性值。

<label for="sex1">女</label>
<input id = "sex1" type="radio" name = "sex"  value = "1"/>