社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > html表單知識大全

html表單知識大全

迷茫
發布： 2017-03-25 15:23:30
原創
2547 人瀏覽過

8.1 表單標記

..... .

☟ 表單屬性：

#◆ action：用於指定表單的服務端程式,規定當提交表單時，向何處發送表單資料。 action取值為:第一，一個URL（絕對URL/相對URL），一般指向伺服器端一個程序，程式接受到表單提交過來的資料（即表單元素值）作對應處理。例如：

當使用者提交這個表單時，伺服器將執行名為"reg.ashx"的一般處理程序。第二，使用mailto協定的URL位址，這樣會將表單內容以電子郵件的形式傳送出去。這種情況比較少見的，因為它要求訪客的電腦上安裝和正確設定好了郵件發送程式。第三，空值，如果action為空或不寫，表示提交給目前頁面。

◆ method：此屬性定義瀏覽器將表單中的資料提交給伺服器處理程序的方式。最常用的是get和post，預設時使用 get方法。

get 與 post 有什麼差別呢？

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

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

demo:

用get方式點選提交後：URL變成：php中文網/ashx/login.ashx?login_username=admin&login_pswd=123456

#用post方式點選提交後：URL變成：php中文網/ashx/login.ashx  ☜可看到只是action指定的URL，參數並沒有附加在URL後面。

③ 大數據文字傳遞：get 雖然方便查詢，但由於是附加在URL上，各瀏覽器對URL也有個長度限制。 IE ：2048字元。 Chrome、FF 好像是 8182字元。 post 好像沒此限制。 

◆ onsubmit：用於指定處理表單的腳本函數

◆ enctype：設定MIME類型，預設值為 application/x-www-form-urlencoded。需要上傳檔案到伺服器時，應將該屬性設為multipart/form-data

#8.2 輸入標記

多數表單元素都可使用input定義,為了標識每一個數據，我們需要為表單元素新增name屬性，所以name為必設屬性，name="域名稱"

##(1)文字方塊text

輸入資訊以明文顯示

用户名: <input type="text" name="user" />
登入後複製

以下是單行文字方塊的主要屬性:

name(名稱，在腳本中可作為識別取得資料) ,maxlength(設定在文字方塊中最多可輸入的字元數)，size(文字方塊長度，大約以位元組為單位)

value：指定文字方塊的預設值，是在瀏覽器第一次顯示表單或使用者點選重設按鈕之後在文字方塊中顯示的值。

readonly：只讀屬性，當設定readonly屬性後，文字方塊可以獲得焦點，但使用者不能改變文字方塊中的value。

disabled：停用，當文字方塊被停用時，不能獲得焦點，當然，使用者也無法改變文字方塊的值。並且在提交表單時，瀏覽器不會將該文字方塊的值傳送給伺服器。

(2)密碼框 password

# 以"*"或"●"符號回顯所輸入的字符，從而起到保密的作用

密码: <input type="password" name="pwd" />
登入後複製

(3)隱藏域hidden

隱藏網域不會被瀏覽者看到，它主要用於在不同頁面傳遞域中所設定的值

<input type="hidden" name="hid" value="域值">
登入後複製

(4)檔案域file

檔案域可以將本機

檔案上傳到伺服器端,檔案上傳沒有預設值,利用此功能時，在form 標籤中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。否則無法上傳檔案內容

<input type="file" name="photo">
登入後複製

(5)單選按鈕radio

在一組選項中進行單一項目選擇，以圓框表示

使用方式：要實現單選功能，name值必須相等。使用name相同的一組單選按鈕，不同radio設定不同的value值，這樣透過取指定name的值就可以知道誰被選中了，不用單獨的判斷。單選按鈕的元素值由value屬性明確設置，表單提交時，選取項目的value和name被打包發送，不明確設定value。 

性别: 男:<input type="radio" name="gender" value="female" checked="checked"> <!-- checked表示此项被默认选中,单复选都适用 -->
女:<input type="radio" name="gender" value="male"/>  <!-- 像这些用户不能填写的表单元素，我们需要设置一些值给用户进行选择。 -->
登入後複製

(6)複選按鈕 checkbox

在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
登入後複製

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
登入後複製

普通按钮 button

用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
登入後複製

重置按钮 reset

用于清楚表单中所输入的内容，将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
登入後複製

图像按钮 image

按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
登入後複製

(8)选择列表标记