form表單相關(guān)的小知識_第1頁
form表單相關(guān)的小知識_第2頁
form表單相關(guān)的小知識_第3頁
form表單相關(guān)的小知識_第4頁
form表單相關(guān)的小知識_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、form對象一個(gè)<form>標(biāo)記，就是一個(gè)<form>對象。1、form對象的屬性l name：表單的名稱，主要用來讓JS來控制表單。l action：表單的數(shù)據(jù)處理程序(PHP文件)。l method：表單的提交方式，取值：GET、POSTl enctype：表單數(shù)據(jù)的編碼方式。2、form對象的方法l submit()：提交表單，與<input type = “submit” />功能一樣。l reset()：重置表單，與重置按鈕功能一樣。3、form對象的事件l onsubmit：當(dāng)單擊提交按鈕時(shí)發(fā)生，并數(shù)據(jù)發(fā)往服務(wù)器之前發(fā)生。主要用來“在表單提交之前

2、進(jìn)行表單驗(yàn)證”。l onreset：當(dāng)單擊重置按鈕時(shí)發(fā)生(了解)。獲取表單元素的l 通過網(wǎng)頁元素的id來獲取對象。document.getElementById(id)l 通過HTML標(biāo)簽名來獲取對象。parentNode.getElementsByTagName(tagName)l 通過name屬性來獲取表單元素對象。表單中所有元素的起點(diǎn)都必須是document對象。u 語法：document.formObj.elementObju 訪問方式是三層結(jié)構(gòu)。其中，formObj代表表單對象，elementObj代表表單元素對象。u 舉例：document.form1.username.value

3、.length推薦精選事件返回值事件的返回值，會影響對象的默認(rèn)動作。如：<a>標(biāo)記的默認(rèn)動作是打開一個(gè)網(wǎng)址。如果事件返回false，則阻止默認(rèn)動作的執(zhí)行；如果事件返回true或空，則默認(rèn)動作繼續(xù)執(zhí)行。受返回值影響的事件有兩個(gè)：onclick、onsubmit。提交和驗(yàn)證方法總結(jié)1、使用submit按鈕，結(jié)合onsubmit事件來實(shí)現(xiàn)(最常用)2、submit按鈕，結(jié)合onclick事件，實(shí)現(xiàn)表單的驗(yàn)證和提交推薦精選3、button按鈕(普通按鈕)，結(jié)合submit()方法，實(shí)現(xiàn)表單驗(yàn)證提交<script type="text/javascript">

4、function checkForm()if(document.form1.username.value.length = 0)/如果用戶名為空window.alert("用戶名不能為空！");else if(document.form1.username.value.length<5 | document.form1.username.value.length>20)/如果用戶名長度小于5或大于20window.alert("用戶名只能介于5-20個(gè)字符！");else if(checkOtherChar(document.form1.us

5、ername.value)/如果用戶名含有特殊符號window.alert("用戶名中含有特殊符號！");else/如果驗(yàn)證通過，提交表單window.alert("驗(yàn)證通過！");/表單提交方法document.form1.submit();function checkOtherChar(str)推薦精選/定義一個(gè)特殊符號的數(shù)組var arr = "*","&","<",">","$","","/&quo

6、t;/循環(huán)比較：數(shù)組中的每一個(gè)字符，與用戶名每一個(gè)字符進(jìn)行比對for(var i=0;i<arr.length;i+)for(var j=0;j<str.length;j+)if(arri=str.charAt(j)return true;/如果沒找到return false;</script></head><body><form name="form1" method="post" action="login.php">用戶名：<input type="te

7、xt" name="username" />密碼：<input type="password" name="userpwd" /><input type="button" value="提交按鈕" onclick="checkForm()" /></form>input對象一個(gè)<input>標(biāo)記，就是一個(gè)input對象。1、input對象的屬性(以type=text為例)l name：表單元素的名稱。l valu

8、e：表單元素的值，用戶輸入的內(nèi)容，可以通過該屬性來獲取。l size：表單的長度。l maxlength：表單元素的最大長度(最多可輸?shù)淖址麛?shù))。l disabled：禁用屬性。l readonly：只讀屬性。2、input對象的方法l focus()：獲得焦點(diǎn)的方法(定位光標(biāo))。l blur()：失去焦點(diǎn)的方法(移走光標(biāo))。l select()：選中文本的方法。3、input對象的事件推薦精選l onfocus：當(dāng)獲得焦點(diǎn)時(shí)l onblur：當(dāng)失去焦點(diǎn)時(shí)綜合實(shí)例：表單驗(yàn)證select對象一個(gè)<select>標(biāo)記，對應(yīng)一個(gè)select對象。select對象屬性l options：設(shè)

9、置或返回下拉列表中<option>標(biāo)記構(gòu)成的數(shù)組。l selectedIndex：設(shè)置或選中指定<option>的索引號。l length：指定下拉列表中<option>標(biāo)記的個(gè)數(shù)。l name：元素名稱。option對象一個(gè)<option>標(biāo)記，對應(yīng)一個(gè)option對象。option對象屬性l text：指<option>和</option>之間的文本。l value：是指<option>標(biāo)記的屬性。推薦精選綜合實(shí)例：二級聯(lián)動菜單（1）二級菜單初始化當(dāng)網(wǎng)頁加載完成，將arr_province中的數(shù)據(jù)寫入到na

10、me=province下拉列表中。name=city下拉列表數(shù)據(jù)，要根據(jù)name=province列表的默認(rèn)選擇(selectedIndex)而改變。（2）根據(jù)name=province的選擇，來改變name=city中的內(nèi)容當(dāng)改變時(shí)，獲取選擇中的省份的索引值。城市列表，會根據(jù)傳遞過來的索引值，請取對應(yīng)的二維數(shù)組中的數(shù)據(jù)，并寫入city列表中。<script type="text/javascript">var arr_province = "請選擇省/城市","北京市","上海市","天津市

11、","重慶市","深圳市","廣東省"var arr_city = "請選擇城市/地區(qū)","東城區(qū)","西城區(qū)","朝陽區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺區(qū)","海淀區(qū)",'寶山區(qū)','長寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)

12、9;,'南匯區(qū)','徐匯區(qū)','盧灣區(qū)','和平區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '河?xùn)|區(qū)', '紅橋區(qū)', '塘古區(qū)', '開發(fā)區(qū)','俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)','福田區(qū)',

13、 '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊','廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'/網(wǎng)頁加載完成，初始化二級菜單window.onload = init; /傳地址，不帶括號function init()/獲取name=province和name=city的對象var province = documen

14、vince;var city = document.form1.city;推薦精選/指定省份下拉中<option>標(biāo)記的個(gè)數(shù)province.length = arr_province.length;/循環(huán)將arr_province中的數(shù)據(jù)寫入到<option>標(biāo)記中for(var i=0;i<arr_province.length;i+)province.optionsi.text = arr_provincei;province.optionsi.value = arr_provincei;/修改省份列表中默認(rèn)選擇項(xiàng)var index =

15、 0;province.selectedIndex = index;/指定城市下拉中<option>標(biāo)記的個(gè)數(shù)city.length = arr_cityindex.length;/循環(huán)將arr_city中對應(yīng)的數(shù)據(jù)寫入到<option>標(biāo)記中for(var j=0;j<arr_cityindex.length;j+)city.optionsj.text = arr_cityindexj;city.optionsj.value = arr_cityindexj;function changeSelect(index)/獲取name=city的對象var city

16、= document.form1.city;/指定城市下拉中<option>標(biāo)記的個(gè)數(shù)city.length = arr_cityindex.length;/循環(huán)將arr_city中對應(yīng)的數(shù)據(jù)寫入到<option>標(biāo)記中for(var j=0;j<arr_cityindex.length;j+)city.optionsj.text = arr_cityindexj;city.optionsj.value = arr_cityindexj;</script></head><body><form name="form

17、1" method="post" action="login.php">省份：<select name="province" onchange="changeSelect(this.selectedIndex)"></select>城市：<select name="city"></select></form>推薦精選HTML5簡介HTML5是新一代的HTML。HTML5目前主要應(yīng)用在手機(jī)端，在PC端最新瀏覽器已經(jīng)開始支持

18、了，但還不全面。HTML5是由W3C和WHATWG合作的結(jié)果。W3C是萬維網(wǎng)聯(lián)盟，主要制作各種互聯(lián)網(wǎng)標(biāo)準(zhǔn)的國際組織。如：XHTML、CSS、JavaScript、XML、AJAX等。主要想發(fā)展XHTML2.0。WHATWG應(yīng)用程序工作組，是由Firefox、Chrome、蘋果、safari、IE等瀏覽器公司成立了一個(gè)機(jī)構(gòu)。主要面向應(yīng)用程序的完善和開發(fā)、表單的擴(kuò)展和完善。如：在HTML5中使用<video>標(biāo)記，直接可以播放視頻。<input type = “email” name = “email” /> 郵箱驗(yàn)證<input type = “color” nam

19、e = “color” /><input type = “date” name = “date” />HTML5支持度測試 瀏覽器市場份額統(tǒng)計(jì) 文檔類型定義XHTML1.0中的文檔類型定義有三種：過渡型、嚴(yán)格型、框架型。HTML5中的文檔類型定義：<!DOCTYPE html>就連IE6最不兼容的瀏覽器，也支持這個(gè)類型定義。網(wǎng)頁字符集設(shè)置<meta charset= “utf-8”>頁面結(jié)構(gòu)標(biāo)記l <header></header>網(wǎng)頁頭部l <nav></nav>導(dǎo)航欄、菜單欄l <footer&

20、gt;</footer>頁腳推薦精選文章相關(guān)標(biāo)記l <article>：代表一篇文章。l <aside>：側(cè)邊欄l <section>：區(qū)塊。主要用于排版網(wǎng)頁，功能與<div>一樣。l <details>：一個(gè)標(biāo)題的簡介。l <summary>標(biāo)題的內(nèi)容，與<details>配合使用。其它標(biāo)記l <mark>：重點(diǎn)標(biāo)注。l <progress>：進(jìn)度條u max：最大值u value：當(dāng)前值<progress id="pro" style="

21、;width:500px;" max="100" value="0"></progress><script type="text/javascript">/獲取id=pro對象var pro = document.getElementById("pro");var i = 0;window.setInterval("start2()",40);function start2()pro.value = i;i+;if(pro.value=pro.max)i = 0;</script>音頻標(biāo)記<audio>屬性l 語法格式：<audio>對不起，你瀏覽器不支持audio元素。</audio>l 常用屬性u Controls：是否顯示控制面板u Autoplay：是否自動開始u Src：播放文件路徑。支持的文件格式有：mp3、ogg、wav

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論