form表單標籤及屬性的介紹

2022-09-16 07:18:13 字數 2626 閱讀 9846

一、 表單標籤

常用屬性

action 跳轉到什麼頁面

method  以什麼模式提交

geturl有長度限制

ie6.0 url 最大長度

2083

個字元 超過無法提交

ie7.0 最大長度

2083

個字元 超過最大長度仍然可以提交但是只能提交

2083

個字元opera 9.52

最大長度7648個字元 超過最大長度無法提交

所有提交內容會顯示到位址列位置

很不安全

a標籤的跳轉方式也是

get方式傳遞

post

大小不受限制

安全enctype

multipart/form-data(有檔案域的時候必須有這個的時候

)二、input標籤

屬性1.name 必須有 否則資料無法傳遞

2.type

text 文字框

submit 提交按鈕

password 密碼域

radio  單選框

如果你認為是統一個選項那麼他們的name值必須是一樣的 否則就變成單獨的單選框了

注意如果是單選框就必須有value屬性用來傳遞你要傳遞的值

checkbox 核取方塊

注意:如果是核取方塊那麼你的

name

值就需要加上乙個

用來傳遞至 這個東西你加上就好 當學

php的時候你就知道

是什麼意思了

必須要有value屬性用來傳遞你選中了哪個的值

button 普通按鈕

reset  重置按鈕 清空表單中的所有內容

hidden 隱藏域

隱藏域是給程式設計師來使用的用來傳遞內容和想要傳遞的資訊但是不想讓使用者看見的內容

都使用隱藏域來傳遞

他必須有name屬性和

value

屬性 用來你傳遞的是什麼資訊

image  提交按鈕

使用提交按鈕必須有src屬性用於新增路徑

file 檔案域

但是如果你使用檔案域了那麼你的form表單標籤的屬性就要多新增乙個內容

3.readonly 文字區唯讀

4.disabled  禁用

5.value 預設值 提示資訊 傳遞值的作用

6.checked 預設選中 適用的屬性有單選框和核取方塊

三、下拉列表標籤

1.常用屬性:

name 傳遞值 必須有

disabled 禁止

size 顯示幾個下拉

multiple 多選缺省會顯示所有  但是如果你設定了這個屬性 那麼你的名字屬性就要在他的後面加上

2.下拉項標籤

常用屬性:

value 提交的值 若沒有則提交內容

selected 定義選中項

disabled 選項禁止

四、多行文字域

常用屬性:

name 傳遞值 必須寫

cols 可見寬度

rows 可見行數

readonly 文字區域唯讀

disabled 禁止

總結:表單主要用於向伺服器傳輸資料;如常見的登入、註冊頁面。那麼我們除了要了解表單標籤以及表單標籤屬性外也需要理解怎麼傳輸資料的。傳輸的方式及區別get post

get方式

在上面的form**中輸入如下:

賬號:admin 

密碼:123456

點選提交後:url變為:

變數提交的樣式為:html元素的name屬性=提交的值。多個變數,以 & 符號隔開。

post方式

form表單裡所填的值,附加在html headers上。

同上面get方式一樣。

賬號:admin 

密碼:123456

點選提交後:url變為

可看到只是action指定的url,引數並沒有附加在url後面。

通過fiddler軟體,可以檢視到html header區域:有個名為webkitformboundary2t7xmzetmrqeahnh 的物件

檢視【raw】區域,可看見裡面包含了提交的變數

區別1資料的查詢:比如瀏覽論壇時,url一般包含了分類、頁碼數、每頁記錄數等資訊。 get 方式,能一目了然的看到所要查詢的資訊(條件)。 post 因為隱藏掉了這些資訊,不方便進行檢驗查詢條件。

2敏感資料的提交(安全性):對一項記錄,進行更改、新增操作時,比如註冊使用者、更改使用者資料等。get 方式附加在url上,會洩露掉敏感的訊息。 post方式,能隱藏掉敏感的資訊。

3大資料文字傳遞:get 雖然方便查詢,但由於是附加在url上,各瀏覽器對url也有個長度限制。ie :2048字元。chrome、ff 好像是 8182字元。post 好像沒此限制。

Form表單標籤的Enctype屬性

enctype 指定將資料回發到伺服器時瀏覽器使用的編碼型別。用於表單裡有上傳。編碼型別有以下三種 multipart form data 不對字元編碼,在使用包含檔案上傳控制項的表單時,必須使用該值 text plain 窗體資料以純文字形式進行編碼,其中不含任何控制項或格式字元。例子 encty...

form表單標籤的enctype屬性

form表單中的enctype屬性的三點作用如下 二 multipart form data 這個是專門用來傳輸特殊型別資料的,如我們上傳的非文字的內容,比如或者 等。這種編碼型別不對字元編碼,資料通過二進位制的形式傳送到伺服器端,這時如果用request是無法直接獲取到相應表單的值的,而應該通過s...

form表單中的屬性和標籤

form表單標籤 表單標籤 form 非常重要,必須掌握 form標籤用於獲取使用者跟瀏覽器互動 包含輸入,選擇,上傳檔案等操作 的資料,並將資料打包發給服務端 屬性 method get 提交方式為get方式 method post 提交方式為post方式 enctype multipart fo...