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

下載本文檔

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

文檔簡(jiǎn)介

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

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

3、.length推薦精選事件返回值事件的返回值，會(huì)影響對(duì)象的默認(rèn)動(dòng)作。如：<a>標(biāo)記的默認(rèn)動(dòng)作是打開(kāi)一個(gè)網(wǎng)址。如果事件返回false，則阻止默認(rèn)動(dòng)作的執(zhí)行；如果事件返回true或空，則默認(rèn)動(dòng)作繼續(xù)執(zhí)行。受返回值影響的事件有兩個(gè)：onclick、onsubmit。提交和驗(yàn)證方法總結(jié)1、使用submit按鈕，結(jié)合onsubmit事件來(lái)實(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)/如果用戶名長(zhǎng)度小于5或大于20window.alert("用戶名只能介于5-20個(gè)字符！");else if(checkOtherChar(document.form1.us

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

6、t;/循環(huán)比較：數(shù)組中的每一個(gè)字符，與用戶名每一個(gè)字符進(jìn)行比對(duì)for(var i=0;i<arr.length;i+)for(var j=0;j<str.length;j+)if(arri=str.charAt(j)return true;/如果沒(méi)找到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對(duì)象一個(gè)<input>標(biāo)記，就是一個(gè)input對(duì)象。1、input對(duì)象的屬性(以type=text為例)l name：表單元素的名稱。l valu

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

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

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

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

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

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

16、= document.form1.city;/指定城市下拉中<option>標(biāo)記的個(gè)數(shù)city.length = arr_cityindex.length;/循環(huán)將arr_city中對(duì)應(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簡(jiǎn)介HTML5是新一代的HTML。HTML5目前主要應(yīng)用在手機(jī)端，在PC端最新瀏覽器已經(jīng)開(kāi)始支持

18、了，但還不全面。HTML5是由W3C和WHATWG合作的結(jié)果。W3C是萬(wàn)維網(wǎng)聯(lián)盟，主要制作各種互聯(lián)網(wǎng)標(biāo)準(zhǔn)的國(guó)際組織。如：XHTML、CSS、JavaScript、XML、AJAX等。主要想發(fā)展XHTML2.0。WHATWG應(yīng)用程序工作組，是由Firefox、Chrome、蘋果、safari、IE等瀏覽器公司成立了一個(gè)機(jī)構(gòu)。主要面向應(yīng)用程序的完善和開(kāi)發(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支持度測(cè)試 瀏覽器市場(chǎng)份額統(tǒng)計(jì) 文檔類型定義XHTML1.0中的文檔類型定義有三種：過(guò)渡型、嚴(yán)格型、框架型。HTML5中的文檔類型定義：<!DOCTYPE html>就連IE6最不兼容的瀏覽器，也支持這個(gè)類型定義。網(wǎng)頁(yè)字符集設(shè)置<meta charset= “utf-8”>頁(yè)面結(jié)構(gòu)標(biāo)記l <header></header>網(wǎng)頁(yè)頭部l <nav></nav>導(dǎo)航欄、菜單欄l <footer&

20、gt;</footer>頁(yè)腳推薦精選文章相關(guān)標(biāo)記l <article>：代表一篇文章。l <aside>：側(cè)邊欄l <section>：區(qū)塊。主要用于排版網(wǎng)頁(yè)，功能與<div>一樣。l <details>：一個(gè)標(biāo)題的簡(jiǎn)介。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對(duì)象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 語(yǔ)法格式：<audio>對(duì)不起，你瀏覽器不支持audio元素。</audio>l 常用屬性u(píng) Controls：是否顯示控制面板u Autoplay：是否自動(dòng)開(kāi)始u Src：播放文件路徑。支持的文件格式有：mp3、ogg、wav

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論