优秀网站开发,游戏开发软件排行榜前十名,建筑施工模板,大学网站模板html1.输入型控件Input type用途说明email电子邮件地址文本框url网页URL文本框number数值的输入域属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step3#xff0c;则合法的数是 -3,0,3,6 等)value number …1.输入型控件Input type用途说明email电子邮件地址文本框url网页URL文本框number数值的输入域属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step3则合法的数是 -3,0,3,6 等)value number 规定默认值range特定值的范围的数值以滑动条显示属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step3则合法的数是 -3,0,3,6 等)value number 规定默认值Date pickers日期时间选择器仅Opera9支持包含date, month, week, time, datetime, datetime-localsearch用于搜索引擎比如在站点顶部显示的搜索框与普通文本框用法一样只不过这样更语文化color颜色选择器仅Opera支持将原本type为text的input控件声明为以上特殊类型是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面这里就不细说)而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素请用支持这些表单元素的浏览器查看IE对其支持最差。E-mail:date:range: number: color:2. 表单新特性和函数2.1 placeholder当用户还没有输入值时输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息这在目前网站中很常见一些JS框架都会提供类似功能简单的说下在旧版本中常用的解决方案为输入控件创建一个label然后通过CSS控制些label的位置使之覆盖在输入控件上面当label获得焦点时浏览器会把焦点指向输入控件。不过有了placeholder新的浏览器就内置了这一功能其特性值会以浅灰色样式显示在输入框中当输入框获得焦点并有值后该提示信息自动消失。如Runner:2.2 autocomplete其实在IE6中,autocomplete就已经实现不过现在这一特性终于标准化了浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用autocomplete应该用一保护用户敏感数据避免本地浏览器对它们进行不安全的存储。类型作用on该字段无需保护值可以被保存和恢复off该字段需要保护值不可以保存unspecified包含的默认设置如果没有被包含在表单中或没有指定值则行为表现为on如当用户提交过一次表单后再次访问name的输入框会提示你曾输入的值而email则不会提示。2.3 autofocus页面载入时我们通过autofocus指定某个表单元素获得焦点但每个页面只允许出现一个autofocus如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下使用使用autofocus会惹恼用户。2.5 list特性和datalist通过使用list开发人员能够为某个输入型控件构造一个选值列表其使用方法Webpage:请在Opera9或Firefox10浏览器中查看。2.6 requiredrequired 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法使用方法2.7 patternpattern 属性规定用于验证 input 域的模式(pattern)模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式如果value不符合其正则表达式那表单将通不过验证无法提交。使用方法2.8 novalidatenovalidate 属性规定在提交表单时不应该验证 form 或 input 域。如3. 表单验证表单验证是一套系统它为终端用户检测无效的数据并标记这些错误是一种用户体验的优化让web应用更快的抛出错误但它仍不能取代服务器端的验证重要数据还要要依赖于服务器端的验证因为前端验证是可以绕过的。目前任何表单元素都有八种可能的验证约束条件名称用途用法valueMissing确保控件中的值已填写将required属性设为truetypeMismatch确保控件值与预期类型相匹配patternMismatch根据pattern的正则表达式判断输入是否为合法格式toolong避免输入过多字符设置maxLengthrangeUnderflow限制数值控件的最小值设置minrangeOverflow限制数值控件的最大值设置maxstepMismatch确保输入值符合min,max,step的设置设置max min stepcustomError处理应用代码明确设置能计算产生错误例如验证两次输入的密码是否一致等会DEMO细说下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看源代码可是各个浏览器验证行为不一致我们可能需要统一其验证行为借助javascript我们可以统一浏览器的验证行为。还是以上上述HTML为基础我们为其加上相关javascript:最后说下输入两次密码匹配的验证写的很简单
