HTML5+CSS3网站设计基础教程 第3版 第7章 表格和表单.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 7.4 HTML5表单的新增控件类型、标签和属性 案例演示 1. datalist标签 7.4.2 新的表单标签 7.4 HTML5表单的新增控件类型、标签和属性 2. output标签 output标签用于定义不同类型控件的输出，输出结果会显示在output标签中。output标签通常配合input控件使用。 output标签的常用属性 属性 说明 for 定义输出域相关的一个或多个元素 form 定义输入字段所属的一个或多个表单 name 定义对象的唯一名称 7.4.2 新的表单标签 7.4 HTML5表单的新增控件类型、标签和属性 2. output标签 案例演示 7.4.2 新的表单标签 7.4 HTML5表单的新增控件类型、标签和属性 7.4.3 新的input控件属性 掌握新的input属性，能够设置功能丰富的表单控件。 学习目标 7.4 HTML5表单的新增控件类型、标签和属性 autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。 autofocus属性 1 案例演示 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 form属性可以把表单内的子元素写在页面中的任意位置。 form属性 2 案例演示 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 list属性用于指定输入框所绑定的datalist标签，制作提示输入效果，其值是某个datalist标签的id。 list属性 3 案例演示 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input控件。 multiple属性 4 案例演示 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 min、max和step属性用于为包含数字或日期的input控件规定限值适用于Date pickers、number和range等类型的input控件。 min、max和 step属性 5 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配 pattern属性 6 pattern属性常用的正则表达式-1 正则表达式 说明 ^[0-9]*$ 数字 ^\d{n}$ n位的数字 ^\d{n,}$ 至少n位的数字 ^\d{m,n}$ m-n位的数字 ^(0|[1-9][0-9]*)$ 零或非零开头的数字 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 pattern属性常用的正则表达式-2 正则表达式 说明 ^([1-9][0-9]*)+(.[0-9]{1,2})?$ 非零开头的最多带两位小数的数字 ^(\-|\+)?\d+(\.\d+)?$ 正数、负数 ^\d+$ 或 ^[1-9]\d*|0$ 非负整数 ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ 非正整数 ^[\u4e00-\u9fa5]{0,}$ 汉字 ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 英文和数字 ^[A-Za-z]+$ 由26个英文字母组成的字符串 ^[A-Za-z0-9]+$ 由数字和26个英文字母组成的字符串 7.4.3 新的input控件属性 7.4 HTML5表单的新增控件类型、标签和属性 pattern属性常用的正则表达式-3 正则表达式 说明 ^\w+$ 或 ^\w{3,20}$ 由数字、26个英文字母或者下划线组成的字符串 ^[\u4E00-\u9FA5A-Za-z0-9_]+$ 中文、英文、数字包括下划线 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ Email地址 ^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ URL地