DAY 5 form相關元素和屬性學習筆記

2021-09-13 13:57:38 字數 2567 閱讀 2173

來建立乙個表單向伺服器提交資料。主要屬性:

1.action屬性

form標籤的action屬性的指規定了處理上傳資料的頁面,也可以理解為「上傳資料並且跳轉到該頁面」,該頁面需要對上傳的資料進行查詢或者儲存,所以經常由php/jsp/aspx來擔當。如:

如果action的值為空或者#,則資料交由本頁面處理。

2.method

method即方法,規定了瀏覽器上傳資料的方式。method只有兩個值可以選擇,分別是get和post,預設值是get。以下分別介紹這兩種方法的特性。

(1)method="get"時:

1>採用 get 方法傳送資料時,瀏覽器會與表單處理伺服器建立連線,然後直接在乙個傳輸步驟中傳送所有的表單資料:瀏覽器會將資料直接附在表單的 action 的 url 之後,這兩者之間用問號進行分隔。這種方式並不安全,因為上傳的資料可以直接在url中反映出來。

2>get方法提交資料後的url鏈結是可以新增書籤的,每次開啟該書籤都相當於向伺服器提交了相同的資料。

3>url的長度是有限的(約3000字元),所以get方式經常用來提交較小的資料。

4>結合以上特性,一般使用get方式來提交非敏感內容,比如說搜尋查詢。不僅速度較快,還可以將頁面儲存到書籤之中。

(2)method="post"時

1>採用 post 方法,瀏覽器將會按照下面兩步來傳送資料。首先,瀏覽器將與 action 屬性中指定的表單處理伺服器建立聯絡;一旦建立連線之後,瀏覽器就會按分段傳輸的方法將資料傳送給伺服器。通過這種方式來上傳資料安全性較高。

2>post方法上傳的資料沒有長度限制,可以傳輸大量的資料,所以在上傳檔案只能使用post。

3>大多數情況都應該使用post方式進行資料的傳輸。

3.name屬性

form 標籤元素自身並沒有資料傳輸,它的 name 屬性只是提供了一種在指令碼中引用表單的方法。與此同時,form標籤元素內的資料都是通過name來傳遞的,只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的。表單控制項的name屬性指定請求引數名,value屬性指定請求引數值。如果某個表單空間設定了disabled,則它不再產生請求引數。

4.enctype屬性

enctype 屬性規定在傳送到伺服器之前應該如何對表單資料進行編碼,有3個值:

3>text/plain,將內容設定為純文字的形式。

5.target屬性

form標籤的target屬性和a標籤的功能相似,規定了在何處開啟表單上傳後的處理頁面。

1>_blank

瀏覽器總在乙個新開啟、未命名的視窗中載入目標文件。

2>_self

這個目標的值對所有沒有指定目標的 標籤是預設目標,它使得目標文件載入並顯示在相同的框架或者視窗中作為源文件。這個目標是多餘且不必要的,除非和文件標題 標籤中的 target 屬性一起使用。

3>_parent

這個目標使得文件載入父視窗或者包含來超連結引用的框架的框架集。如果這個引用是在視窗或者在頂級框架中,那麼它與目標 _self 等效。

4>_top

這個目標使得文件載入包含這個超連結的視窗,用 _top 目標將會清除所有被包含的框架並將文件載入整個瀏覽器視窗。

6.autocomplete屬性(html5新增屬性)

autocomplete 屬性規定表單是否應該啟用自動完成功能。當使用者在字段開始鍵入時,瀏覽器基於之前鍵入過的值,顯示出在該字段中填寫過的選項,從而簡化使用者的輸入。autocomplete只有兩個值,on 和 off,分別對應啟用和關閉這個功能。預設值為on。

7.form屬性(html5新增屬性)

將不屬於form元素內部的資料繫結在此form元素上進行上傳請求。 form="addform"

8.formaction(html5新增屬性)

實現動態地讓表單提交資料到不同url。

9.form***屬性(html5新增屬性)

1>formenctype 讓按鈕動態地改變表單的enctype屬性

2>formmethod 讓按鈕動態地設定表單以post或get方法提交

3>formtarget    讓按鈕動態地改變表單的target屬性

10.autofocus屬性

用於自動聚焦。

11.fieldset和legend元素

用於對表單內表單元素進行分組。

12.input元素

主要用於接收使用者輸入,十分豐富。

效果:

13.list屬性

實現文字框與下拉列表的結合,十分實用

效果:

form標籤及其相關元素及屬性特別多,且十分常用,重要。須經常聯絡,以免忘記。

前端 HTML5表單相關元素和屬性簡介

html使用表單向伺服器提交請求 表單 表單控制項的主要作用就是收集使用者輸入,當使用者提交表單時,使用者輸入內容將被作為請求引數提交到遠端伺服器。因此在web程式設計中,表單主要用於收集使用者輸入的資料。元素用於生成輸入表單,該元素不會生成視覺化部分。注 在html5規範以前,表單控制項都需要放在...

HTML筆記三,表單相關元素和屬性

表單元素 form 用於生成輸入表單,該元素不視覺化 input label 定義標籤 button 定義乙個按鈕 select 建立列表框和下拉列表,必須和結合使用 textarea 設定多行文字框 html5新增表單中的屬性與元素 1 為表單控制項新增了form屬性,form 乙個form表單的...

HTML基本機構的有關元素和元素屬性 2

html元素可以有自己的相關屬性,每乙個屬性還可以由我們網頁編製者賦一定的值。元素屬性出現在元素的 內,並且和元素名之間有乙個空格分隔 屬性值用 引起來。編者具有絕對的權利,這乙個簡單網頁的編寫,你就是上帝 歡迎光臨我的主頁 標籤定義段落。p 元素會自動在其前後建立一些空白。瀏覽器會自動新增這些空間...