表單指令碼基礎知識

2022-07-07 17:48:28 字數 1808 閱讀 5736

屬性和方法

action:url位址,elements:表單控制項集合,length:表單空間數量,method:傳送http請求型別,通常是get或者post,name:表單名稱,target:用於傳送請求和接收響應的視窗名稱

1.1提交表單

在js操作時候,不會觸發submit事件,應該驗證表單資料

eventutil.addhandler(form,"submit",function(event))

1.2重置表單

跟提交一樣reset,不過在js操作時候,一樣會觸發reset事件

1.3表單字段

可以使用dom方法,也可以使用表單的elements屬性,var field=form.elements[1]

1.3.1表單字段共同擁有的屬性

disabled布林值是否禁用,name當前欄位名稱,readonly布林值是否唯讀,type當前字元按的型別,value當前欄位將被提交給伺服器的值

//

避免多次提交表單,這裡不用click避免出現瀏覽器的不相容問題

eventutil.addhandler(form2,"submit",function

(event))

1.3.2表單字段共同擁有的方法

focus()和blur(),當然html5提供autofocus屬性,一般用於表單字段,其他控制項可以通過tabindex屬性設定為-1,然後呼叫focus方法

1.3.3表單字段共同擁有的事件

focus事件,blur事件,以及change事件(當失去焦點且value值改變時觸發)

文字框分為單行文字框和多行文字框,text有size和maxlength等等,textarea通過col和row來進行的,

選擇文字:選擇方法和選擇事件;取得選擇文字:selectionstart和selectionend,表示所選文字的範圍,儲存是數值

2.1過濾輸入

2.1.1遮蔽字元

eventutil.addhandler(username,"keypress",function

(event)

})

2.1.2操作剪貼簿

3html5約束api

3.1必填字段

html5增加屬性required的,還有其他的輸入型別,

email  number url range datetime datetim-local date month week time,瀏覽器支援度需要考慮,還有step屬性增加減少,方法為stepup  stepdown

還有pattern屬性值為正則,用於匹配文字值 pattern=「\d+」

檢測有效性

checkvalid()方法檢測,返回布林值,validity屬性會有很多來具體的檢測

if(document.form[0].elements[0].checkvalidity())

else //

操作

禁用驗證通過設定novalidate

4富文字編輯

所見即所得,兩種方式,

在頁面中嵌入包含空html頁面的iframe。設定designmode屬性,

表單指令碼學習(選擇框指令碼)

選擇框是通過來實現的,為了方便與這個控制項互動,除了所有表單字段共有的屬性和方法外,htmlselectelement提供了我們多種屬性和方法 add 向空間中插入新元素 方法接收兩個引數 newoption,reloption 其位置在reloption之前 multiple 布林值,表示是否允許...

HTML表單(基礎知識)

主題legend 外邊框 頭部標籤fieldset 尾部標籤 表單結構 屬性 name,method,action 值 string字串,給這個表單命名 get post表單的傳輸方式 url路徑傳輸目標 文本欄 type text 密碼欄 type password 隱藏欄 type hidden...

HTML表單基礎知識

表單的作用 用來收集使用者的資訊的 1 表單框 name 表單名稱 method post get action form 說明 get是用來從伺服器上獲得資料,而post是用來向伺服器上傳遞資料。出於安全性考慮,建議最好使用 post 提交資料 2 表單控制項 type type name val...