深入理解HTML5之表單元素屬性

2021-10-07 08:48:07 字數 2422 閱讀 1688

表單是頁面上非常重要的一項內容,使用者可以輸入的大部分內容都是在表單的元素中完成的,客戶端與服務端的互動在大多數情況下也是通過表單中點按鈕來完成的。

1.form

"/add" method=

"get" id=

"textform"

>

"text" name=

"" id=

"">

<

/form>

"textform"

>

<

/textarea>

form 屬性規定輸入域所屬的乙個或多個表單,form 屬性必須引用所屬表單的 id:

2.formaction

"demo_form.asp" method=

"get"

>

first name:

"text" name=

"fname"

/>

>

last name:

"text" name=

"lname"

/>

>

"submit" value=

"submit"

/>

>

"submit" formaction=

"demo_admin.asp" value=

"submit as admin"

/>

<

/form>

formaction可以為所有的提交按鈕新增不同的formaction屬性,使的在單擊不同的按鈕可以將表單提交到不同頁面。formaction 屬性覆蓋 form 元素的 action 屬性。

3.formmethod

"demo-form.php" method=

"get"

>

first name:

"text" name=

"fname"

>

last name:

"text" name=

"lname"

>

"submit" value=

"提交"

>

"submit" formmethod=

"post" formaction=

"demo-post.php" value=

"使用 post 提交"

>

<

/form>

formmethod屬性對每個表單元素分別指定不同的提交方。formmethod 屬性覆蓋 form 元素的 method 屬性。

4.formtarget

"demo-form.php"

>

first name:

"text" name=

"fname"

>

last name:

"text" name=

"lname"

>

"submit" value=

"正常提交"

>

"submit" formtarget=

"_blank" value=

"提交到乙個新的頁面上"

>

<

/form>

formtarget屬性用來指定提交後在何處開啟所需要載入的頁面值描述

_blank

在新視窗/選項卡中顯示響應。

_self

在同一框架中顯示響應(預設)。

_parent

$1_top

在父框架中顯示響應。

手機在整個視窗中顯示響應。

framename

在指定的 iframe 中顯示響應。

5.autofocus

"demo_form.html"

first name:

"text" name=

"fname" autofocus>

last name:

"text" name=

"lname"

>

"submit"

>

<

/form>

autofocus 屬性規定當頁面載入時 input 元素應該自動獲得焦點。

autofocus 屬性是乙個布林屬性。

乙個頁面只能有乙個控制項具有outofocus屬性

6.pattern

     

請輸入指定格式的內容:

"text" pattern=

"[0-9][a-z]" name=

"part"

>

"submit" value=

"">

<

/form>

pattern 屬性規定用於驗證輸入欄位的模式

HTML5表單元素

新的表單元素 1.datalist元素 規定輸入域的選項列表,datalist屬性規定form或input域應該擁有的自動完成的功能。當使用者在自動完成域中開始輸出時,瀏覽器應該在域中顯示填寫的選項。2.keygen提供一種驗證使用者的可靠方法。用於表單的金鑰對生成器字段。當提交表單時,會生成兩個鍵...

HTML 5 表單元素

html5 的新的表單元素 html5 擁有若干涉及表單的元素和屬性。本章介紹以下新的表單元素 datalist 元素 datalist 元素規定輸入域的選項列表。列表是通過 datalist 內的 option 元素建立的。如需把 datalist 繫結到輸入域,請用輸入域的 list 屬性引用 ...

HTML5表單元素

表單驗證觸發oninvalid事件 通過setcustomvalidity方法設定修改內容 action method get type text name uname pattern d required class uname type submit name form var input do...