Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16-其他表单元素与表单验证课件_第1页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16-其他表单元素与表单验证课件_第2页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16-其他表单元素与表单验证课件_第3页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16-其他表单元素与表单验证课件_第4页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务16-其他表单元素与表单验证课件_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务16其他表单元素与表单验证第六单元HTML5表单的应用任务16其他表单元素与第六单元HTML5表单的1学习目标掌握表单验证方法其他表单元素学习目标掌握表单验证方法其他表单元素2常用的正则表达式了解:学习目标常用的正则表达式了解:学习目标3任务目标实战演练——制作商品订购表单任务目标实战演练——制作商品订购表单4任务目标强化训练——制作会员注册表单任务目标强化训练——制作会员注册表单5知识准备1.其他表单元素textarea元素：用于定义多行文本输入框。语法格式：<textareacols=""rows="">文本内容</textarea>cols属性：列数/宽度，也可用widthrows属性：行数/高度，也可用height知识准备1.其他表单元素textarea元素：用于定义多行6知识准备属性属性值含义说明name用户自定义控件的名称readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）maxlength正整数控件允许输入的最多字符数autofocusautofocus指定页面加载后是否自动获取焦点placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空cols正整数规定文本区域内可见的列数（即：宽度）rows正整数规定文本区域内可见的行数（即：高度）textarea元素的相关属性知识准备属性属性值含义说明name用户自定义控件的名称rea7知识准备示例：textarea元素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder="请输入内容..."></textarea></form></body>知识准备示例：textarea元素的使用<body>8知识准备label元素：为<input>标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到与该标签相关的表单控件上。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元素：创建单选或多选菜单语法格式：<select><optionvalue="">选项1</option><optionvalue="">选项2</option><optionvalue=""selected>选项3</option><optionvalue="">选项4</option></select>size属性：定义下拉菜单的可见选项数multiple属性：定义下拉菜单是否允许多选1.其他表单元素知识准备select元素：创建单选或多选菜单1.其他表单元11知识准备示例：select元素的使用<body><formaction="#"method="post"><h2>所在专业</h2><select><optionselected>--请选择--</option><option>物联网应用技术</option><option>安全防范技术</option><option>大数据技术应用</option><option>工业设计</option></select><h2>所修课程</h2><selectmultiple

size="4"><optionselected>传感器技术</option><option>web前端开发</option><optionselected>C语言程序设计</option><option>物联网导论</option><option>数据库原理</option></select></form></body>知识准备示例：select元素的使用<body><h2>所修12知识准备datalist元素：定义输入框的选项列表，通过id属性与input元素关联，用来配合定义input元素的可选值。列表通过datalist元素嵌套option标签来创建。1.其他表单元素知识准备datalist元素：定义输入框的选项列表，通过id13知识准备示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用网址</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内置的正则校验。（2）使用required属性，校验表单元素的内容是否输入为空。（3）使用pattern属性，验证输入的内容是否满足条件，pattern属性值是一个正则表达式。（4）使用JavaScript代码，实现更复杂的验证功能。知识准备2.表单验证方法（1）使用HTML5中新增的typ15知识准备3.正则表达式正则表达式：描述一种字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）组成的文字模式。功能：正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。（1）普通字符

由所有那些未显示指定为元字符的打印和非打印字符组成。包括所有的大写和小写字符、所有数字、所有的标点符号以及一些符号。知识准备3.正则表达式正则表达式：描述一种字符串匹配的模式16知识准备（2）特殊字符符号含义说明$匹配输入的字符串的结尾位置。()标记一个子表达式的开始和结束位置。*匹配前面的子表达式零次或多次。+匹配前面的子表达式一次或多次。.匹配除换行符\n之外的任何单字符。[标记一个中括号表示式的开始。?匹配前面的子表达式零次或一次。{标记限定表达式的开始。\将下个字符标记为特殊字符，或原意字符，或向后引用，或八进制转义符。^匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。|指明两项之间的一个选择。知识准备（2）特殊字符符号含义说明$匹配输入的字符串的结尾位17知识准备（3）限定符符号含义说明*匹配前面的子表达式零次或多次。+匹配前面的子表达式一次或多次。?匹配前面的子表达式零次或一次。{n}n是一个非负整数，匹配确定的n次。{n,}n是一个非负整数，至少匹配n次。{n,m}m和n均为非负整数，且n<=m，最少匹配n次且最多匹配m次。知识准备（3）限定符符号含义说明*匹配前面的子表达式零次或多18知识准备3.正则表达式（4）定位符：用来描述字符串或单词的边界，不能对定位符使用限定符。^：指字符串的开始$：指字符串的结束\b：描述单词的前或后边界\B：表示非单词边界知识准备3.正则表达式（4）定位符：用来描述字符串或单词的边19知识准备（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_]+$中文、英文、数字包括下划线知识准备（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}?$短身份证号码(数字、字母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）常用的正则表达式知识准备正则表达式含义说明^\w+([-+.]\w+)*@\21实战演练案例描述：设计并制作商品订购表单，网页效果如下。制作商品订购表单实战演练案例描述：设计并制作商品订购表单，网页效果如下。制作22强化训练案例描述：设计并制作会员注册表单，网页效果如下图1所示。如果表单信息填写正确，网页效果如下图2所示。制作会员注册表单图1图2强化训练案例描述：设计并制作会员注册表单，网23任务小结01其他表单元素02表单验证方法03正则表达式任务小结01其他表单元素02表单验证方法03正则表达式24课后实训设计学生档案信息录入表单，如图1所示。其中，“所属专业”项效果如图2所示，“入学成绩”项效果如图3所示，“入学日期”项效果如图4所示。图1图2图3图4课后实训设计学生档案信息录入表单，如图1所示25谢谢观看谢谢观看26任务16其他表单元素与表单验证第六单元HTML5表单的应用任务16其他表单元素与第六单元HTML5表单的27学习目标掌握表单验证方法其他表单元素学习目标掌握表单验证方法其他表单元素28常用的正则表达式了解:学习目标常用的正则表达式了解:学习目标29任务目标实战演练——制作商品订购表单任务目标实战演练——制作商品订购表单30任务目标强化训练——制作会员注册表单任务目标强化训练——制作会员注册表单31知识准备1.其他表单元素textarea元素：用于定义多行文本输入框。语法格式：<textareacols=""rows="">文本内容</textarea>cols属性：列数/宽度，也可用widthrows属性：行数/高度，也可用height知识准备1.其他表单元素textarea元素：用于定义多行32知识准备属性属性值含义说明name用户自定义控件的名称readonlyreadonly控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）maxlength正整数控件允许输入的最多字符数autofocusautofocus指定页面加载后是否自动获取焦点placeholder字符串为input类型的输入框提供用户提示requiredrequired规定输入框填写的内容不能为空cols正整数规定文本区域内可见的列数（即：宽度）rows正整数规定文本区域内可见的行数（即：高度）textarea元素的相关属性知识准备属性属性值含义说明name用户自定义控件的名称rea33知识准备示例：textarea元素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder="请输入内容..."></textarea></form></body>知识准备示例：textarea元素的使用<body>34知识准备label元素：为<input>标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到与该标签相关的表单控件上。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元素：创建单选或多选菜单语法格式：<select><optionvalue="">选项1</option><optionvalue="">选项2</option><optionvalue=""selected>选项3</option><optionvalue="">选项4</option></select>size属性：定义下拉菜单的可见选项数multiple属性：定义下拉菜单是否允许多选1.其他表单元素知识准备select元素：创建单选或多选菜单1.其他表单元37知识准备示例：select元素的使用<body><formaction="#"method="post"><h2>所在专业</h2><select><optionselected>--请选择--</option><option>物联网应用技术</option><option>安全防范技术</option><option>大数据技术应用</option><option>工业设计</option></select><h2>所修课程</h2><selectmultiple

size="4"><optionselected>传感器技术</option><option>web前端开发</option><optionselected>C语言程序设计</option><option>物联网导论</option><option>数据库原理</option></select></form></body>知识准备示例：select元素的使用<body><h2>所修38知识准备datalist元素：定义输入框的选项列表，通过id属性与input元素关联，用来配合定义input元素的可选值。列表通过datalist元素嵌套option标签来创建。1.其他表单元素知识准备datalist元素：定义输入框的选项列表，通过id39知识准备示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用网址</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内置的正则校验。（2）使用required属性，校验表单元素的内容是否输入为空。（3）使用pattern属性，验证输入的内容是否满足条件，pattern属性值是一个正则表达式。（4）使用JavaScript代码，实现更复杂的验证功能。知识准备2.表单验证方法（1）使用HTML5中新增的typ41知识准备3.正则表达式正则表达式：描述一种字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）组成的文字模式。功能：正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。（1）普通字符

由所有那些未显示指定为元字符的打印和非打印字符组成。包括所有的大写和小写字符、所有数字、所有的标点符号以及一些符号。知识准备3.正则表达式正则表达式：描述一种字符串匹配的模式42知识准备（2）特殊字符符号含义说明$匹配输入的字符串的结尾位置。()标记一个子表达式的开始和结束位置。*匹配前面的子表达式零次或多次。+匹配前面的子表达式一次或多次。.匹配除换行符\n之外的任何单字符。[标记一个中括号表示式的开始。?匹配前面的子表达式零次或一次。{标记限定表达式的开始。\将下个字符标记为特殊字符，或原意字符，或向后引用，或八进制转义符。^匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。|指明两项之间的一个选择。知识准备（2）特殊字符符号含义说明$匹配输入的字符串的结尾位43知识准备（3）限定符符号含义说明*匹配前面的子表达式零次或多次。+匹配前面的子表达式一次或多次。?匹配前面的子表达式零次或一次。{n}n是一个非负整数，匹配确定的n次。{n,}n是一个非负整数，至少匹配n次。{n,m}m和n均为非负整数，且n<=m，最少匹配n次且最多匹配m次。知识准备（3）限定符符号含义说明*匹配前面的子表达式零次或多44知识准备3.正则表达式（4）定位符：用来描述字符串或单词的边界，不能对定位符使用限定符。^：指字符串的开始$：指字符串的结束\b：描述单词的前或后边界\B：表示非单词边界知识准备3.正则表达式（4）定位符：用来描述字符串或单词的边45知识准备（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_]+$中文、英文、数字包括下划线知识准备（5）常用的正则表达式正则表达式含义说明^[0-9]46知识准备正则表达式含义说明^\w+([

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论