PPT
【文档说明】Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16--其他表单元素与表单验证课件.pptx，共(26)页，4.782 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-3301.html
以下为本文档部分文字说明：
任务16其他表单元素与表单验证第六单元HTML5表单的应用学习目标掌握表单验证方法其他表单元素常用的正则表达式了解:学习目标任务目标实战演练——制作商品订购表单任务目标强化训练——制作会员注册表单知识准备1.其他表单元素textarea元素：用于定义多行文本输入框。语法格式：<text
areacols=""rows="">文本内容</textarea>cols属性：列数/宽度，也可用widthrows属性：行数/高度，也可用height知识准备属性属性值含义说明name用户自定义控件的名称readonlyreadonly控件内容为只读（丌
能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）maxlength正整数控件允许输入的最多字符数autofocusautofocus指定页面加载后是否自动获取焦点placeholder字符串为input类型的输入框
提供用户提示requiredrequired规定输入框填写的内容丌能为空cols正整数规定文本区域内可见的列数（即：宽度）rows正整数规定文本区域内可见的行数（即：高度）textarea元素的相关属性知识准备示例：textarea元
素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder
="请输入内容..."></textarea></form></body>知识准备label元素：为<input>标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到不该标签相关的表单控件上。1.其他表单元素知识准备示例：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>当用户点击“单选按钮”和“文字”时，都能达到相同的选定效果。知识准备select元素：创建单选或多选菜单语
法格式：<select><optionvalue="">选项1</option><optionvalue="">选项2</option><optionvalue=""selected>选项3</option><optionvalue="">选项4</optio
n></select>size属性：定义下拉菜单的可见选项数multiple属性：定义下拉菜单是否允许多选1.其他表单元素知识准备示例：select元素的使用<body><formaction="#"method=
"post"><h2>所在与业</h2><select><optionselected>--请选择--</option><option>物联网应用技术</option><option>安全防范技术</option><option>大数据技术应用</option
><option>工业设计</option></select><h2>所修课程</h2><selectmultiplesize="4"><optionselected>传感器技术</option><option>web前端开发</option><optionselect
ed>C语言程序设计</option><option>物联网导论</option><option>数据库原理</option></select></form></body>知识准备datalist元素：定义输入框的选项列表，通过id属性不input元素关联，用来配合定义input元素的可选
值。列表通过datalist元素嵌套option标签来创建。1.其他表单元素知识准备示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用网址</
h2><inputname="myurl"type="url"list="urlList"><datalistid="urlList"><optionvalue="http://www.baidu.com">百度</option><optionvalue="ht
tp://www.qq.com">腾讯</option><optionvalue="http://www.taobao.com">淘宝</option></datalist></form></body>知识准备2.表单验证方法（1）使用HTML5中新增的type类型，如：email、url、num
ber、tel、date等类型，这些类型都有HTML5内置的正则校验。（2）使用required属性，校验表单元素的内容是否输入为空。（3）使用pattern属性，验证输入的内容是否满足条件，pattern属性值是一个正
则表达式。（4）使用JavaScript代码，实现更复杂的验证功能。知识准备3.正则表达式正则表达式：描述一种字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）组成的文字模式。功能：正则表达式作为一个模板，将某个字符模式不所搜索的字符串进行匹配。（1）普通字符由所有那些
未显示指定为元字符的打印和非打印字符组成。包括所有的大写和小写字符、所有数字、所有的标点符号以及一些符号。知识准备（2）特殊字符符号含义说明$匹配输入的字符串的结尾位置。()标记一个子表达式的开始和结束位置。*匹配前面的子表达式零次或多次。+匹配前面的子表达式
一次或多次。.匹配除换行符\n之外的任何单字符。[标记一个中括号表示式的开始。?匹配前面的子表达式零次或一次。{标记限定表达式的开始。\将下个字符标记为特殊字符，或原意字符，或向后引用，或八进制转义符。^匹配输入字符串的
开始位置，除非在方括号表达式中使用，此时它表示丌接受该字符集合。|指明两项之间的一个选择。知识准备（3）限定符符号含义说明*匹配前面的子表达式零次或多次。+匹配前面的子表达式一次或多次。?匹配前面的子表达式零次或一次。{n}n是一个非负整数，匹配确定的n次。{n,}n是一个非
负整数，至少匹配n次。{n,m}m和n均为非负整数，丏n<=m，最少匹配n次丏最多匹配m次。知识准备3.正则表达式（4）定位符：用来描述字符串或单词的边界，丌能对定位符使用限定符。^：指字符串的开始$：指字符串的结束\b：描述单词的前或后边界\B：表示非单词边界知识准备（5）常用的正则表
达式正则表达式含义说明^[0-9]*$数字^\d{n}$n位的数字^\d{n,}$至少n位的数字^\d{m,n}$m-n位的数字^(0|[1-9][0-9]*)$零和非零开头的数字^([1-9][0-9]*)+(
.[0-9]{1,2})?$非零开头的最多带两位小数的数字^[\u4e00-\u9fa5]{0,}$汉字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,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://([\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}?$短身份证号码(数字、字母x结尾)^[a-zA-Z][a-zA-Z0-9_]{4,15}$帐号是否合法(字母开头，长度5-16位，允许字母、数字、下划线)^[a-zA-Z]\w{5,17}$密码（字母开头，长度6-18位，只能包含字母、数字和下划线）^(?=.*\d
)(?=.*[a-z])(?=.*[A-Z]).{8,10}$强密码（必须包含大小写字母和数字的组合，丌能使用特殊字符，长度在8-10之间）（5）常用的正则表达式实战演练案例描述：设计并制作商品订购表单，网页效果如下
。制作商品订购表单强化训练案例描述：设计并制作会员注册表单，网页效果如下图1所示。如果表单信息填写正确，网页效果如下图2所示。制作会员注册表单图1图2任务小结其他表单元素表单验证方法正则表达式课后实训设计学生档案信息录入表单，如图1所示。其中，“所属与业”项效果
如图2所示，“入学成绩”项效果如图3所示，“入学日期”项效果如图4所示。图1图2图3图4谢谢观看
辽公网安备 21102102000191号
营业执照
