模块六HTML5表单的应用 (1).pptx

主讲：周怡燕响应式WEB应用开发（HTML5+CSS3）网页设计

模块六HTML5表单HTML5新的表单元素01HTML5新的表单属性02项目实施04HTML5新增input类型03

项目基础

项目六卖家运营中心

HTML5新增input类型/01

HTML5新增input类型6color类型：选色器date类型：日期选择器，（年月日）datetime-local类型：选择一个日期和时间，（年月日时分）month类型选择一个月份week选择周和年time类型选择一个时间email类型输入格式为email模式，自动验证输?值是否为emailurl类型规定输入值为url格式

HTML5新增input类型7number类型规定输入值为数字max规定允许的最大值min规定允许的最小值step规定每一段数字间隔range类型包含一定范围内数字值的输入域max规定允许的最大值min规定语序的最小值step规定每一段数字间隔search类型用于搜索域

HTML5新的表单元素/02

HTML5新的表单元素9datalist元素datalist元素规定输入域的选项列表。datalist属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用input元素的列表属性与datalist元素绑定.例如：inputlist=browsersdatalistid=browsers optionvalue=InternetExplorer optionvalue=Firefox optionvalue=Chrome optionvalue=Opera optionvalue=Safari/datalist

HTML5新的表单元素10output元素用于不同类型的输出，比如计算或脚本输出：formoninput=x.value=parseInt(num.value) inputtype=rangeid=num/ outputname=xfor=num/output/form

HTML5新的表单元素11HTML5keygen元素(了解)keygen元素的作用是提供一种验证用户的可靠方法,用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（privatekey）存储于客户端，公钥（publickey）则被发送到服务器。公钥可用于之后验证用户的客户端证书（clientcertificate）。formaction=demo_keygen.aspmethod=get 用户名:inputtype=textname=usr_name 加密:keygenname=security inputtype=submit/form

HTML5新的表单属性/03

HTML5新的表单属性13form新属性：autocompleteautocomplete属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。提示:autocomplete属性有可能在form元素中是开启的，而在input元素中是关闭的使用autocomplete属性时input/一定要写name属性。注意:autocomplete适用于form标签，以及以下类型的input标签：text,search,url,telephone,email,password,datepickers,range以及color。

HTML5新的表单属性14form新属性：novalidatenovalidate属性规定在提交表单时不应该验证form或input域。

HTML5新的表单属性15input新属性：autofocusautofocus属性是一个boolean属性.autofocus属性规定在页面加载时，域自动地获得焦点。placeholder属性placeholder属性提供一种提示，描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。注意:placeholder属性适用于以下类型的input标签：text,search,url,telephone,email以及password。

HTML5新的表单属性16required属性required属性是一个boolean属性.required属性规定必须在提交之前填写输入域（不能为空）。注意:required属性适用于以下类型的input标签：text,search,ur