掌握表單(Form)有以下幾個要點:
重要form屬性
form常用控件
form提交方式
action {URL}:規定表單提交時向何處發送數據。
enctype :規定在發送表單數據之前如何對表單數據進行編碼。(值如下)
application/x-www-form-urlencoded :在發送前編碼所有字符(默認為此方式)。
multipart/form-data :不對字符編碼。 注:使用包含文件上傳控件的表單時,必須使用該值。
method:指定表單以何種方法發送。
get :from表單里所填的值,附加在action指定的URL后面,做為URL鏈接而傳遞。(可以在地址欄看見表單的提交信息)
post :from表單里所填的值,附加在HTML Headers上。(不可以在地址欄看見表單的提交信息)
建議:每一個表單元素的文字描述都使用兩標簽之間的內容即為對綁定的表單控件的文字描述)
注意:每個表單元素應當分配 name 屬性 和 id 屬性。( name 屬性和 id 屬性應該盡可能地使用相同的或相關的值。)
name 屬性:用來將數據提交到服務器;
id 屬性:用來在客戶端做相應的操作;如:
文本輸入框:
1)、input type="text" 單行文本框
2)、textarea 多行文本框
說明: maxlength 規定文本區域的最大字符數;如果在
密碼輸入框:
定義密碼字段。(字符會被遮蓋)
單選框:
設置單選按鈕 以及獲取選中的單選按鈕的值
//獲取選中的單選值
注意:
1)、在客戶端,Javascript 對表單及表單元素的操作,更常用其name 屬性而不是id屬性。因為,對于某些特定的表單元素(如:單選按鈕等),使用其name 屬性更易于獲得元素值,也更方便向服務器傳送數據!
2)、保證同一組單選按鈕的name 屬性值相同。
復選框:
復選框的“全選”、“全不選”、“反選”功能 以及 所選復選框值的獲得功能
注意:保證同一組復選框按鈕的name 屬性值相同。
下拉框:
下拉框的重要屬性:
multiple 屬性:用于設置下拉表框的類型(多選還是單選)
type 屬性:JS根據type 屬性的值獲得下拉列表框select 控件的類型。
type 屬性的值為:select-multiple(多選) 或 select-one(單選)
下拉列表框默認只能選中一項,若要設置為可以多選,則設置
size屬性:定義可見選項的數目。size="3",即下拉框內可以顯示三個可選選項。
提示:
在不同操作系統中,選擇多個選項的差異:
由于上述差異的存在,同時由于需要告知用戶可以使用多項選擇,對用戶更友好的方式是使用復選框。
表單的提交方式由method屬性的取值決定,所以form提交方式有以下兩種:
get 方式:
表單數據將會追加action指定的URL后面,做為URL鏈接而傳遞(以查詢字符串的形式提交到服務端)。
變量提交的樣式為:html元素的name屬性=提交的值。多個變量,在URL鏈接后面以 & 符號隔開。
post方式:
表單數據將附加在請求體(HTML Headers)上被發送出去,并不附加在URL鏈接后面。
建議:表單通常還是以post方式提交比較好,這樣可以不破壞URL,況且URL還有長度限制。
get 與 post 的區別:
1)、get是從服務器上獲取數據;post是向服務器傳送數據
2)、數據的查詢:比如瀏覽論壇或博客時,URL一般包含了分類、頁碼數、每頁記錄數等信息。 get 方式,能一目了然的看到所要查詢的信息; post 因為隱藏掉了這些信息,不方便進行查詢。
3)、數據安全性:對一項記錄,進行更改、添加操作時,get 方式附加在URL上,會泄露數據;post 方式,能隱藏數據,保證數據的安全性。
4)、數據傳輸量:get 雖然方便查詢,但由于是附加在URL上,使得其傳送的數據量較小,不能大于2KB;post傳送的數據量較大,一般被默認為不受限制。
推薦 :更多代碼詳解,請轉到代碼倉庫:https://github.com/Tina-xy/HTML
推薦 : Fish Li 博主的 ---- 細說Form(表單)
http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com