版權聲明:本文為博主原創文章,未經博主允許不得轉載。
一、 表單標簽
<form></form>
常用屬性
Action 跳轉到什么頁面
Method 以什么模式提交
Get
Url有長度限制
IE6.0 url 最大長度 2083個字符 超過無法提交
IE7.0 最大長度 2083個字符 超過最大長度仍然可以提交但是只能提交2083個字符
Opera 9.52
最大長度7648個字符 超過最大長度無法提交
所有提交內容會顯示到地址欄位置 很不安全
a標簽的跳轉方式也是get方式傳遞
Post
大小不受限制 安全
Enctype
Multipart/form-data(有文件域的時候必須有這個的時候)
Application/x-www-form-urlencoded
二、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.<select></select>
常用屬性:
Name 傳遞值 必須有
Disabled 禁止
Size 顯示幾個下拉
Multiple 多選默認會顯示所有 但是如果你設置了這個屬性 那么你的名字屬性就要在他的后面加上[]
2.下拉項標簽
<option></option>
常用屬性:
Value 提交的值 若沒有則提交內容
Selected 定義選中項
Disabled 選項禁止
四、多行文本域
<textarea></textarea>
常用屬性:
Name 傳遞值 必須寫
Cols 可見寬度
Rows 可見行數
Readonly 文本區域只讀
Disabled 禁止
總結:
<form enctype="multipart/form-data" action="" method="post">
<table>
<tr>
<td><label for="txtname">賬號:</label></td>
<td><input type="text" id="txtname" name="login_username" /></td>
</tr>
<tr>
<td><label for="txtpswd">密碼:</label></td>
<td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr>
<tr>
<td colspan=2>
<input type="reset" />
<input type="submit" />
</td>
</tr>
</table>
</form>
表單主要用於向服務器傳輸數據;如常見的登錄、注冊頁面。那么我們除了要了解表單標簽以及表單標簽屬性外也需要理解怎么傳輸數據的。傳輸的方式及區別 get post
get方式
form表單里所填的值,附加在action指定的URL后面,做為URL鏈接而傳遞。
在上面的form代碼中輸入如下:
賬號:admin
密碼:123456
點擊提交后:URL變為:
http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456
變量提交的樣式為:html元素的name屬性=提交的值。多個變量,以 & 符號隔開。
post方式
form表單里所填的值,附加在HTML Headers上。
同上面get方式一樣。
賬號:admin
密碼:123456
點擊提交后:URL變為
http://localhost:4778/ashx/login.ashx
可看到只是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 好像沒此限制。