1、任务16 其他表单元素与表单验证第六单元 HTML5表单的应用学习目标掌握表单验证方法其他表单元素常用的正则表达式了解:学习目标任务目标实战演练制作商品订购表单任务目标强化训练制作会员注册表单知识准备1.其他表单元素n textarea元素：用于定义多行文本输入框。n 语法格式：文本内容 cols属性：列数/宽度，也可用width rows属性：行数/高度，也可用height知识准备属性属性值含义说明name用户自定义控件的名称readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）maxlength正整数控件允许输
2、入的最多字符数autofocusautofocus指定页面加载后是否自动获取焦点placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空cols正整数规定文本区域内可见的列数（即：宽度）rows正整数规定文本区域内可见的行数（即：高度）textarea元素的相关属性知识准备示例：textarea元素的使用多行文本框知识准备n label元素：为标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到与该标签相关的表单控件上。1.其他表单元素知识准备示例：label元素的使用性别男女当用户点击“单选按钮”和“文字”时，
3、都能达到相同的选定效果。知识准备n select元素：创建单选或多选菜单n 语法格式：选项1 选项2 选项3 选项4 size属性：定义下拉菜单的可见选项数 multiple属性：定义下拉菜单是否允许多选1.其他表单元素知识准备示例：select元素的使用所在专业 -请选择-物联网应用技术 安全防范技术 大数据技术应用 工业设计所修课程 传感器技术 web前端开发 C语言程序设计 物联网导论 数据库原理知识准备n datalist元素：定义输入框的选项列表，通过id属性与input元素关联，用来配合定义input元素的可选值。列表通过datalist元素嵌套option标签来创建。1.其他表单
4、元素知识准备示例：datalist元素的使用常用网址 百度 腾讯 淘宝知识准备2.表单验证方法（1）使用HTML5中新增的type类型，如：email、url、number、tel、date等类型，这些类型都有HTML5内置的正则校验。（2）使用required属性，校验表单元素的内容是否输入为空。（3）使用pattern属性，验证输入的内容是否满足条件，pattern属性值是一个正则表达式。（4）使用JavaScript代码，实现更复杂的验证功能。知识准备3.正则表达式n 正则表达式：描述一种字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）组成的文字模式。n 功能：正则表达式作为一个模
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+:
8、/s*或 http:/(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位，允许字母、数字
9、、下划线)a-zA-Zw5,17$密码（字母开头，长度6-18位，只能包含字母、数字和下划线）(?=.*d)(?=.*a-z)(?=.*A-Z).8,10$强密码（必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间）（5）常用的正则表达式实战演练案例描述：设计并制作商品订购表单，网页效果如下。制作商品订购表单强化训练 案例描述：设计并制作会员注册表单，网页效果如下图1所示。如果表单信息填写正确，网页效果如下图2所示。制作会员注册表单图1图2任务小结01其他表单元素02表单验证方法03正则表达式课后实训 设计学生档案信息录入表单，如图1所示。其中，“所属专业”项效果如图2所示，“入学成绩”项效果如图3所示，“入学日期”项效果如图4所示。图1图2图3图4谢谢观看
