网页设计-网页设计HTML5表单新增属性及新增input元素类型.pptxVIP

第9讲 HTML5表单新增属性及新增input元素类型9.1 HTML5表单概述9.2 表单新增属性9.3 表单新增input元素类型9.4 提交按钮新增取消检验属性9.1 HTML5表单概述HTML5表单在HTML4表单地基础上,新增了许多属性以及input元素类型,这些新增属性及元素类型实现了以前需要由JavaScript才能实现地一些功能,如非空校验,数值类型校验,聚焦,显示提示信息等功能,极大地增强了HTML5表单地功能。9.2 表单新增属性HTML5表单主要新增了以下一些属性:form属性formaction属性autofocus属性pattern属性placeholder属性required属性1. form属性作用 form属性可以定义表单元素与某个表单之间地隶属关系, 使用了form属性后,表单地元素可以放在 form/form标签对之外地任何地方。基本语法form id=form1 …/forminput type=text form=form1/语法解释 在表单外地元素,通过设置元素地form属性值等于表 单地id值,即可建立了表单元素与表单地隶属关系。form属性示例2. formaction属性作用 formaction属性可以实现在一个表单中包含多个提交 按钮,每个提交按钮都可以通过formaction属性将请 求提交给不同地服务端程序处理。基本语法 input type=submit formaction=服务端处理程序/语法解释 所有提交按钮都可以使用formaction属性。属于提交按钮地元素包括:input type=submit,input type=image与button type=submit。formaction属性示例3. autofocus属性作用 autofocus属性可以使textarea与input表单元素 自动获得焦点。基本语法input type=text autofocus/textarea rows=... cols=... autofocus.../textarea语法解释 一个页面中最多只能有一个表单元素设置autofocus属性,否则该功能将失效,建议对第一个input元素设置autofocus属性。autofocus属性示例4. pattern属性作用 pattern属性是input元素地验证属性,该属性地值是 一个正则表达式,通过这个表达式可以验证输入内容地 有效性。基本语法input type=text pattern=正则表达式 title=错误提示信息/语法解释 根据具体校验要求,设置对应地正则表达式。Title属性 不是必需要地,但为了提高用户体验,建议设置这个属性。pattern属性示例5. placeholder属性作用 placeholder属性主要用于在文本框或文本域中提供 输入提示信息,以增加用户界面地友好性。基本语法input type=text placeholder=提示信息textarea rows=… cols=… placeholder=提示信息语法解释 placeholder地属性值即提示信息将自动显示在对应 地元素中。在IE11中,当元素获得焦点时,提示信息消失; 当元素失去焦点时,提示信息又会自动显示。pattern属性示例6. required属性作用 requried属性用于验证某个表单元素地内容是否为空。基本语法input type=… name=… requiredselect name=… … requiredtextarea name=… … requiredrequired属性示例9.3 表单新增input元素类型HTML5表单input元素主要新增了以下一些类型:类 型描 述tel电话输入框文本emailE-mail输入文本框urlURL地址输入文本框number数值输入文本框,可设置输入值地范围range以滑动条地形式表示特定范围内地数值search搜索关键字输入地文本框color颜色选择器,基于取色板进行选择date日期选择器time时间选择器datetime包含时区地日期与时间选择器datetime-local不包含时区地日期与时间选择器week星期选择器month月份选择器1. tel类型作用 tel类型让input元素生成一个只能输入电话号码地文 本框。但目前,这种类型地文本框并没有提供额外地要 求,即用户在该文本框中输入任意地字符串,浏览器都 不会执行校验操作。基本语法input type=tel2. email类型作用 email类型让input元素生成一个email输入框。运 行时浏览器会按照email地格式自动检查该文本框地值, 如果用户在该文本框内输入地内容不符合