WEB 表單基礎知識例項DEMO

2021-08-10 17:53:01 字數 3131 閱讀 5010

用處:在表單資料無效不能傳送給伺服器時,呼叫該方法。

type="email"

value="email"/>

type="pattern"

value="pattern"/>

type="submit"

value="form"/>

form>

body>

var form=document.forms[0];

form.addeventlistener('submit',function

(e),false)

script>

注:form.submit()方法也可以提交表單,但不會觸發submit事件,因此記得在呼叫此方法前先驗證表單資料。

解決重複提交辦法有兩個,在第一次提交後禁用提交按鈕,或者利用onsubmit事件處理程式取消後續的表單提交。

var form=document.forms[0];

form.addeventlistener('submit',function

(e),false)

注:每個表單都有elements屬性,該屬性時表單中所有表單元素的集合。可按照位置和name訪問他們.

不能通過onclick事件處理程式來實現這個功能,原因是不同瀏覽器之間存在「時差」,有的瀏覽器會在觸發表單的submit事件之前觸發click事件,有的瀏覽器則相反。對於先觸發click事件的瀏覽器,意味著會在提交發生之前急用按鈕,結果永遠都不會提交表單。

所有的表單字段支援三個事件:blur,change,focus

change事件:用於驗證使用者在字段中輸入的資料。

focus和blur:修改/恢復文字框顏色。

var input=form.elements[0];

input.addeventlistener('focus',function

(e),false)

input.addeventlistener('blur',function

(e)else

},false)

input.addeventlistener('change',function

(e)else

},false)

注:關於blur和change事件的關係,並沒有嚴格的規定。

注:不建議使用標準的dom方法修改文字框,使用target.value

type="email"

value="email"

name="email"

size="25"/>

type="pattern"

value="pattern"/>

rows="25"

col="5"

name="textbox">initial valuetextarea>

type="submit"

id="submit-btn"

value="form"/>

form>

body>

var form=document.forms[0];

var textbox=form.elements["textbox"];

textbox.addeventlistener('focus',function

(e),false)

script>

function

getselecttext

(textbox)

}

form.elements["textbox"].setselectionrange(0,2)
(1)必填字段

type=

"text"

value="email" name="email" size="25" required />

監測瀏覽器是否支援required

var isrequiredsupported="required"

indocument.createelement("input")

(2)其他輸入型別

type="email"/>

type="url"/>

(3)輸入模式

type="text" pattern="\d+" name="count">
注:以上都不能阻止使用者輸入無效的文字(書上這麼寫的,但是實測是可以阻止的)

(4)檢測有效性

checkvalidity()方法可以檢測表單中某個字段是否有效。

屬性validity也可以,包含一系列子屬性

selectbox.options[1].selected=true
注:單選情況下,將select設定為false對單選框沒有影響

selected屬性作用主要是確定使用者選擇了選擇框的哪一項,要去的選中的項,可以迴圈遍歷選項集合

function

getselectedoptions

() }

return result;

}

var option=new

option("option text","option value");

selectbox.add(option)

selectbox.remove()//每次只移除第乙個選項
共有的表單字段屬性:

disabled;form;name;readonly(唯讀),tabindex,type(可寫),value(唯讀)

共有的表單字段方法:focus()和blur()

hemlselectelment屬性和方法:

add()

remove()

selectedindex

options

value

htmloptionelement屬性和方法

index

selected

text

value

web基礎知識 表單

一 例項講解 1 新建乙個空的asp.net專案 2 新增乙個html註冊頁面,名字為register.html,在頁面中輸入使用者名稱 joetao,密碼 123456 doctype html public w3c dtd xhtml 1.0 transitional en html xmlns...

web基礎知識

一 html 1.基礎標籤 網頁標題 正文標題 段落 換行標籤 超級鏈結 2.行 表頭 單元格 3.表單 文字框密碼框 多選框單選框 提交按鈕 重置按鈕 隱藏文字 選擇框編寫框 4.列表 有序列表 無序列表 列表項 二 資料庫的基本知識 mysql 1.基本資料型別 整數 int 小數 double...

基礎知識 web

右鍵資料夾 git bush here 可以在當前路徑下開啟多個終端視窗 包管理devdependencies 這裡面的東西只是在開發環境會用到 但是線上環境用不到。比如說 stylus loader 就是在開發環境的時候用到的 為啥呢?為啥需要stylus loader呢?因為stylus loa...