1、任務16 其他表單元素與表單驗證第六單元 HTML5表單的應用學習目標掌握表單驗證方法其他表單元素常用的正則表達式了解:學習目標任務目標實戰演練制作商品訂購表單任務目標強化訓練制作會員注冊表單知識準備1. 其他表單元素textarea元素：用于定義多行文本輸入框。語法格式：文本內容cols屬性：列數/寬度，也可用widthrows屬性：行數/高度，也可用height知識準備屬性屬性值含義說明name用戶自定義控件的名稱readonlyreadonly控件內容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）maxlength正整數控件允許輸入的最多字

2、符數autofocusautofocus指定頁面加載后是否自動獲取焦點placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規定輸入框填寫的內容不能為空cols正整數規定文本區域內可見的列數（即：寬度）rows正整數規定文本區域內可見的行數（即：高度）textarea元素的相關屬性知識準備示例：textarea元素的使用多行文本框知識準備label元素：為標簽定義標注（標記），當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到與該標簽相關的表單控件上。1. 其他表單元素知識準備示例：label元素的使用性別男女當用戶點擊“單選按鈕”和“文字”時，都能達到相同

3、的選定效果。知識準備select元素：創建單選或多選菜單語法格式： 選項1 選項2 選項3 選項4size屬性：定義下拉菜單的可見選項數multiple屬性：定義下拉菜單是否允許多選1. 其他表單元素知識準備示例：select元素的使用所在專業 -請選擇- 物聯網應用技術 安全防范技術 大數據技術應用 工業設計所修課程 傳感器技術 web前端開發 C語言程序設計 物聯網導論 數據庫原理知識準備datalist元素：定義輸入框的選項列表，通過id屬性與input元素關聯，用來配合定義input元素的可選值。列表通過datalist元素嵌套option標簽來創建。1. 其他表單元素知識準備示例：d

4、atalist元素的使用常用網址 百度 騰訊 淘寶知識準備2. 表單驗證方法（1）使用HTML5中新增的type類型，如：email、url、number、tel、date等類型，這些類型都有HTML5內置的正則校驗。（2）使用required屬性，校驗表單元素的內容是否輸入為空。（3）使用pattern屬性，驗證輸入的內容是否滿足條件，pattern屬性值是一個正則表達式。（4）使用JavaScript代碼，實現更復雜的驗證功能。知識準備3. 正則表達式正則表達式：描述一種字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）組成的文字模式。功能：正則表達式作為一個模板，將某個字符模式與所搜

5、索的字符串進行匹配。（1）普通字符 由所有那些未顯示指定為元字符的打印和非打印字符組成。包括所有的大寫和小寫字符、所有數字、所有的標點符號以及一些符號。知識準備（2）特殊字符符號含義說明$匹配輸入的字符串的結尾位置。( )標記一個子表達式的開始和結束位置。*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。.匹配除換行符n之外的任何單字符。標記一個中括號表示式的開始。?匹配前面的子表達式零次或一次。標記限定表達式的開始。將下個字符標記為特殊字符，或原意字符，或向后引用，或八進制轉義符。匹配輸入字符串的開始位置，除非在方括號表達式中使用，此時它表示不接受該字符集合。|指明兩項之間的一

6、個選擇。知識準備（3）限定符符號含義說明*匹配前面的子表達式零次或多次。+匹配前面的子表達式一次或多次。?匹配前面的子表達式零次或一次。nn是一個非負整數，匹配確定的n次。n,n是一個非負整數，至少匹配n次。n,mm和n均為非負整數，且n=m，最少匹配n次且最多匹配m次。知識準備3.正則表達式（4）定位符：用來描述字符串或單詞的邊界，不能對定位符使用限定符。：指字符串的開始$：指字符串的結束b：描述單詞的前或后邊界B：表示非單詞邊界知識準備（5）常用的正則表達式正則表達式含義說明0-9*$數字dn$n位的數字dn,$至少n位的數字dm,n$m-n位的數字(0|1-90-9*)$零和非零開頭的數

7、字(1-90-9*)+(.0-91,2)?$非零開頭的最多帶兩位小數的數字u4e00-u9fa50,$漢字A-Za-z0-9+$ 或 A-Za-z0-94,40$英文和數字.3,20$長度為3-20的所有字符A-Za-z+$由26個英文字母組成的字符串A-Z+$由26個大寫英文字母組成的字符串a-z+$由26個小寫英文字母組成的字符串A-Za-z0-9+$由數字、26個英文字母組成的字符串u4E00-u9FA5A-Za-z0-9_+$中文、英文、數字包括下劃線知識準備正則表達式含義說明w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$Email地址a-zA-z+:/s* 或 http

8、:/(w-+.)+w-+(/w-./?%&=*)?$URL地址(130-9|145|7|150|1|2|3|5|6|7|8|9|180|1|2|3|5|6|7|8|9)d8$手機號碼(d3,4-)|d3.4-)?d7,8$電話號碼(XXX-XXXXXXX、XXXX-XXXXXXXX、XXX-XXXXXXX、XXX-XXXXXXXX、XXXXXXX和XXXXXXXX)(0-9)7,18(x|X)?$ 或 d8,18|0-9x8,18|0-9X8,18?$短身份證號碼(數字、字母x結尾)a-zA-Za-zA-Z0-9_4,15$帳號是否合法(字母開頭，長度5-16位，允許字母、數字、下劃線)a-zA-Zw5,17$密碼（字母開頭，長度6-18位，只能包含字母、數字和下劃線）(?=.*d)(?=.*a-z)(?=.*A-Z).8,10$強密碼（必須包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間）（5）常用的正則表達式實戰演練案例描述：設計并制作商品訂購表單，網頁效果如下。制作商品訂購表單強化訓練 案例描述：設計并制作會員注冊表單，網頁效果如下圖1所示。如果表單信息填寫正