Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)16-其他表單元素與表單驗證課件_第1頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)16-其他表單元素與表單驗證課件_第2頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)16-其他表單元素與表單驗證課件_第3頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)16-其他表單元素與表單驗證課件_第4頁
Web前端開發(fā)任務(wù)驅(qū)動式教程(HTML5+CSS3+JavaScript)任務(wù)16-其他表單元素與表單驗證課件_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務(wù)16其他表單元素與表單驗證第六單元HTML5表單的應(yīng)用任務(wù)16其他表單元素與第六單元HTML5表單的1學習目標掌握表單驗證方法其他表單元素學習目標掌握表單驗證方法其他表單元素2常用的正則表達式了解:學習目標常用的正則表達式了解:學習目標3任務(wù)目標實戰(zhàn)演練——制作商品訂購表單任務(wù)目標實戰(zhàn)演練——制作商品訂購表單4任務(wù)目標強化訓練——制作會員注冊表單任務(wù)目標強化訓練——制作會員注冊表單5知識準備1.其他表單元素textarea元素：用于定義多行文本輸入框。語法格式：<textareacols=""rows="">文本內(nèi)容</textarea>cols屬性：列數(shù)/寬度，也可用widthrows屬性：行數(shù)/高度，也可用height知識準備1.其他表單元素textarea元素：用于定義多行6知識準備屬性屬性值含義說明name用戶自定義控件的名稱readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）maxlength正整數(shù)控件允許輸入的最多字符數(shù)autofocusautofocus指定頁面加載后是否自動獲取焦點placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空cols正整數(shù)規(guī)定文本區(qū)域內(nèi)可見的列數(shù)（即：寬度）rows正整數(shù)規(guī)定文本區(qū)域內(nèi)可見的行數(shù)（即：高度）textarea元素的相關(guān)屬性知識準備屬性屬性值含義說明name用戶自定義控件的名稱rea7知識準備示例：textarea元素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder="請輸入內(nèi)容..."></textarea></form></body>知識準備示例：textarea元素的使用<body>8知識準備label元素：為<input>標簽定義標注（標記），當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到與該標簽相關(guān)的表單控件上。1.其他表單元素知識準備label元素：為<input>標簽定義標注（標記）9知識準備示例：label元素的使用<body><formaction="#"method="post"><h2>性別</h2><inputtype="radio"name="sex"id="male"checked><labelfor="male">男</label><inputtype="radio"name="sex"id="female"><labelfor="female">女</label></form></body>當用戶點擊“單選按鈕”和“文字”時，都能達到相同的選定效果。知識準備示例：label元素的使用<body>當用戶點擊“單10知識準備select元素：創(chuàng)建單選或多選菜單語法格式：<select><optionvalue="">選項1</option><optionvalue="">選項2</option><optionvalue=""selected>選項3</option><optionvalue="">選項4</option></select>size屬性：定義下拉菜單的可見選項數(shù)multiple屬性：定義下拉菜單是否允許多選1.其他表單元素知識準備select元素：創(chuàng)建單選或多選菜單1.其他表單元11知識準備示例：select元素的使用<body><formaction="#"method="post"><h2>所在專業(yè)</h2><select><optionselected>--請選擇--</option><option>物聯(lián)網(wǎng)應(yīng)用技術(shù)</option><option>安全防范技術(shù)</option><option>大數(shù)據(jù)技術(shù)應(yīng)用</option><option>工業(yè)設(shè)計</option></select><h2>所修課程</h2><selectmultiple

size="4"><optionselected>傳感器技術(shù)</option><option>web前端開發(fā)</option><optionselected>C語言程序設(shè)計</option><option>物聯(lián)網(wǎng)導論</option><option>數(shù)據(jù)庫原理</option></select></form></body>知識準備示例：select元素的使用<body><h2>所修12知識準備datalist元素：定義輸入框的選項列表，通過id屬性與input元素關(guān)聯(lián)，用來配合定義input元素的可選值。列表通過datalist元素嵌套option標簽來創(chuàng)建。1.其他表單元素知識準備datalist元素：定義輸入框的選項列表，通過id13知識準備示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用網(wǎng)址</h2><inputname="myurl"type="url"list="urlList"><datalistid="urlList"><optionvalue="">百度</option><optionvalue="">騰訊</option><optionvalue="">淘寶</option></datalist></form></body>知識準備示例：datalist元素的使用<body>14知識準備2.表單驗證方法（1）使用HTML5中新增的type類型，如：email、url、number、tel、date等類型，這些類型都有HTML5內(nèi)置的正則校驗。（2）使用required屬性，校驗表單元素的內(nèi)容是否輸入為空。（3）使用pattern屬性，驗證輸入的內(nèi)容是否滿足條件，pattern屬性值是一個正則表達式。（4）使用JavaScript代碼，實現(xiàn)更復(fù)雜的驗證功能。知識準備2.表單驗證方法（1）使用HTML5中新增的typ15知識準備3.正則表達式正則表達式：描述一種字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）組成的文字模式。功能：正則表達式作為一個模板，將某個字符模式與所搜索的字符串進行匹配。（1）普通字符

由所有那些未顯示指定為元字符的打印和非打印字符組成。包括所有的大寫和小寫字符、所有數(shù)字、所有的標點符號以及一些符號。知識準備3.正則表達式正則表達式：描述一種字符串匹配的模式16知識準備（2）特殊字符符號含義說明$匹配輸入的字符串的結(jié)尾位置。()標記一個子表達式的開始和結(jié)束位置。*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。.匹配除換行符\n之外的任何單字符。[標記一個中括號表示式的開始。?匹配前面的子表達式零次或一次。{標記限定表達式的開始。\將下個字符標記為特殊字符，或原意字符，或向后引用，或八進制轉(zhuǎn)義符。^匹配輸入字符串的開始位置，除非在方括號表達式中使用，此時它表示不接受該字符集合。|指明兩項之間的一個選擇。知識準備（2）特殊字符符號含義說明$匹配輸入的字符串的結(jié)尾位17知識準備（3）限定符符號含義說明*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。?匹配前面的子表達式零次或一次。{n}n是一個非負整數(shù)，匹配確定的n次。{n,}n是一個非負整數(shù)，至少匹配n次。{n,m}m和n均為非負整數(shù)，且n<=m，最少匹配n次且最多匹配m次。知識準備（3）限定符符號含義說明*匹配前面的子表達式零次或多18知識準備3.正則表達式（4）定位符：用來描述字符串或單詞的邊界，不能對定位符使用限定符。^：指字符串的開始$：指字符串的結(jié)束\b：描述單詞的前或后邊界\B：表示非單詞邊界知識準備3.正則表達式（4）定位符：用來描述字符串或單詞的邊19知識準備（5）常用的正則表達式正則表達式含義說明^[0-9]*$數(shù)字^\d{n}$n位的數(shù)字^\d{n,}$至少n位的數(shù)字^\d{m,n}$m-n位的數(shù)字^(0|[1-9][0-9]*)$零和非零開頭的數(shù)字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零開頭的最多帶兩位小數(shù)的數(shù)字^[\u4e00-\u9fa5]{0,}$漢字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文和數(shù)字^.{3,20}$長度為3-20的所有字符^[A-Za-z]+$由26個英文字母組成的字符串^[A-Z]+$由26個大寫英文字母組成的字符串^[a-z]+$由26個小寫英文字母組成的字符串^[A-Za-z0-9]+$由數(shù)字、26個英文字母組成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數(shù)字包括下劃線知識準備（5）常用的正則表達式正則表達式含義說明^[0-9]20知識準備正則表達式含義說明^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$URL地址^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$手機號碼^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$電話號碼("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX")^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$短身份證號碼(數(shù)字、字母x結(jié)尾)^[a-zA-Z][a-zA-Z0-9_]{4,15}$帳號是否合法(字母開頭，長度5-16位，允許字母、數(shù)字、下劃線)^[a-zA-Z]\w{5,17}$密碼（字母開頭，長度6-18位，只能包含字母、數(shù)字和下劃線）^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$強密碼（必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長度在8-10之間）（5）常用的正則表達式知識準備正則表達式含義說明^\w+([-+.]\w+)*@\21實戰(zhàn)演練案例描述：設(shè)計并制作商品訂購表單，網(wǎng)頁效果如下。制作商品訂購表單實戰(zhàn)演練案例描述：設(shè)計并制作商品訂購表單，網(wǎng)頁效果如下。制作22強化訓練案例描述：設(shè)計并制作會員注冊表單，網(wǎng)頁效果如下圖1所示。如果表單信息填寫正確，網(wǎng)頁效果如下圖2所示。制作會員注冊表單圖1圖2強化訓練案例描述：設(shè)計并制作會員注冊表單，網(wǎng)23任務(wù)小結(jié)01其他表單元素02表單驗證方法03正則表達式任務(wù)小結(jié)01其他表單元素02表單驗證方法03正則表達式24課后實訓設(shè)計學生檔案信息錄入表單，如圖1所示。其中，“所屬專業(yè)”項效果如圖2所示，“入學成績”項效果如圖3所示，“入學日期”項效果如圖4所示。圖1圖2圖3圖4課后實訓設(shè)計學生檔案信息錄入表單，如圖1所示25謝謝觀看謝謝觀看26任務(wù)16其他表單元素與表單驗證第六單元HTML5表單的應(yīng)用任務(wù)16其他表單元素與第六單元HTML5表單的27學習目標掌握表單驗證方法其他表單元素學習目標掌握表單驗證方法其他表單元素28常用的正則表達式了解:學習目標常用的正則表達式了解:學習目標29任務(wù)目標實戰(zhàn)演練——制作商品訂購表單任務(wù)目標實戰(zhàn)演練——制作商品訂購表單30任務(wù)目標強化訓練——制作會員注冊表單任務(wù)目標強化訓練——制作會員注冊表單31知識準備1.其他表單元素textarea元素：用于定義多行文本輸入框。語法格式：<textareacols=""rows="">文本內(nèi)容</textarea>cols屬性：列數(shù)/寬度，也可用widthrows屬性：行數(shù)/高度，也可用height知識準備1.其他表單元素textarea元素：用于定義多行32知識準備屬性屬性值含義說明name用戶自定義控件的名稱readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）maxlength正整數(shù)控件允許輸入的最多字符數(shù)autofocusautofocus指定頁面加載后是否自動獲取焦點placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空cols正整數(shù)規(guī)定文本區(qū)域內(nèi)可見的列數(shù)（即：寬度）rows正整數(shù)規(guī)定文本區(qū)域內(nèi)可見的行數(shù)（即：高度）textarea元素的相關(guān)屬性知識準備屬性屬性值含義說明name用戶自定義控件的名稱rea33知識準備示例：textarea元素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder="請輸入內(nèi)容..."></textarea></form></body>知識準備示例：textarea元素的使用<body>34知識準備label元素：為<input>標簽定義標注（標記），當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到與該標簽相關(guān)的表單控件上。1.其他表單元素知識準備label元素：為<input>標簽定義標注（標記）35知識準備示例：label元素的使用<body><formaction="#"method="post"><h2>性別</h2><inputtype="radio"name="sex"id="male"checked><labelfor="male">男</label><inputtype="radio"name="sex"id="female"><labelfor="female">女</label></form></body>當用戶點擊“單選按鈕”和“文字”時，都能達到相同的選定效果。知識準備示例：label元素的使用<body>當用戶點擊“單36知識準備select元素：創(chuàng)建單選或多選菜單語法格式：<select><optionvalue="">選項1</option><optionvalue="">選項2</option><optionvalue=""selected>選項3</option><optionvalue="">選項4</option></select>size屬性：定義下拉菜單的可見選項數(shù)multiple屬性：定義下拉菜單是否允許多選1.其他表單元素知識準備select元素：創(chuàng)建單選或多選菜單1.其他表單元37知識準備示例：select元素的使用<body><formaction="#"method="post"><h2>所在專業(yè)</h2><select><optionselected>--請選擇--</option><option>物聯(lián)網(wǎng)應(yīng)用技術(shù)</option><option>安全防范技術(shù)</option><option>大數(shù)據(jù)技術(shù)應(yīng)用</option><option>工業(yè)設(shè)計</option></select><h2>所修課程</h2><selectmultiple

size="4"><optionselected>傳感器技術(shù)</option><option>web前端開發(fā)</option><optionselected>C語言程序設(shè)計</option><option>物聯(lián)網(wǎng)導論</option><option>數(shù)據(jù)庫原理</option></select></form></body>知識準備示例：select元素的使用<body><h2>所修38知識準備datalist元素：定義輸入框的選項列表，通過id屬性與input元素關(guān)聯(lián)，用來配合定義input元素的可選值。列表通過datalist元素嵌套option標簽來創(chuàng)建。1.其他表單元素知識準備datalist元素：定義輸入框的選項列表，通過id39知識準備示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用網(wǎng)址</h2><inputname="myurl"type="url"list="urlList"><datalistid="urlList"><optionvalue="">百度</option><optionvalue="">騰訊</option><optionvalue="">淘寶</option></datalist></form></body>知識準備示例：datalist元素的使用<body>40知識準備2.表單驗證方法（1）使用HTML5中新增的type類型，如：email、url、number、tel、date等類型，這些類型都有HTML5內(nèi)置的正則校驗。（2）使用required屬性，校驗表單元素的內(nèi)容是否輸入為空。（3）使用pattern屬性，驗證輸入的內(nèi)容是否滿足條件，pattern屬性值是一個正則表達式。（4）使用JavaScript代碼，實現(xiàn)更復(fù)雜的驗證功能。知識準備2.表單驗證方法（1）使用HTML5中新增的typ41知識準備3.正則表達式正則表達式：描述一種字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）組成的文字模式。功能：正則表達式作為一個模板，將某個字符模式與所搜索的字符串進行匹配。（1）普通字符

由所有那些未顯示指定為元字符的打印和非打印字符組成。包括所有的大寫和小寫字符、所有數(shù)字、所有的標點符號以及一些符號。知識準備3.正則表達式正則表達式：描述一種字符串匹配的模式42知識準備（2）特殊字符符號含義說明$匹配輸入的字符串的結(jié)尾位置。()標記一個子表達式的開始和結(jié)束位置。*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。.匹配除換行符\n之外的任何單字符。[標記一個中括號表示式的開始。?匹配前面的子表達式零次或一次。{標記限定表達式的開始。\將下個字符標記為特殊字符，或原意字符，或向后引用，或八進制轉(zhuǎn)義符。^匹配輸入字符串的開始位置，除非在方括號表達式中使用，此時它表示不接受該字符集合。|指明兩項之間的一個選擇。知識準備（2）特殊字符符號含義說明$匹配輸入的字符串的結(jié)尾位43知識準備（3）限定符符號含義說明*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。?匹配前面的子表達式零次或一次。{n}n是一個非負整數(shù)，匹配確定的n次。{n,}n是一個非負整數(shù)，至少匹配n次。{n,m}m和n均為非負整數(shù)，且n<=m，最少匹配n次且最多匹配m次。知識準備（3）限定符符號含義說明*匹配前面的子表達式零次或多44知識準備3.正則表達式（4）定位符：用來描述字符串或單詞的邊界，不能對定位符使用限定符。^：指字符串的開始$：指字符串的結(jié)束\b：描述單詞的前或后邊界\B：表示非單詞邊界知識準備3.正則表達式（4）定位符：用來描述字符串或單詞的邊45知識準備（5）常用的正則表達式正則表達式含義說明^[0-9]*$數(shù)字^\d{n}$n位的數(shù)字^\d{n,}$至少n位的數(shù)字^\d{m,n}$m-n位的數(shù)字^(0|[1-9][0-9]*)$零和非零開頭的數(shù)字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零開頭的最多帶兩位小數(shù)的數(shù)字^[\u4e00-\u9fa5]{0,}$漢字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文和數(shù)字^.{3,20}$長度為3-20的所有字符^[A-Za-z]+$由26個英文字母組成的字符串^[A-Z]+$由26個大寫英文字母組成的字符串^[a-z]+$由26個小寫英文字母組成的字符串^[A-Za-z0-9]+$由數(shù)字、26個英文字母組成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數(shù)字包括下劃線知識準備（5）常用的正則表達式正則表達式含義說明^[0-9]46知識準備正則表達式含義說明^\w+([

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論