WEB 表單基礎知識例項DEMO

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


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...

WEB 表單基礎知識例項DEMO

web基礎知識 表單

web基礎知識

基礎知識 web

相關推薦

web基礎知識表單