表单新特性

1 placeholder 文本站位

当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,
这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。
有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。

2 autocomplete 保存输入值
 autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。
on:该字段无需保护,值可以被保存和恢复
off:该字段需要保护,值不可以保存
unspecified:包含 的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on

3 autofocus  自动获取焦点
  页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。
一个页面只能有一个控件具有该属性
从实用角度来说,不要随便滥用该属性。
只有当一个页面是以使用某个控件为主要目的时,才对该控件使用autofocus属性。
autofocus 属性适用于所有  标签的类型。
  4 list特性和datalist  选值列表
  通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法
  5 required  不能为空
  required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法
  6 pattern  验证正则
  pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交

时间: 2024-08-06 16:04:55

表单新特性的相关文章

HTML5_01之表单新特性

1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt+L:格式化当前文档2.HTML5九大新特性: ①表单新特性.②视频音频.③Canvas绘图.④SVG绘图.⑤地理定位.⑥拖放API.⑦WebWorker.⑧WebStorage.⑨WebSocket3.表单Input类型: ①已有type类型:  text(文本框).password(密码框).r

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

HTML5基础知识汇总_(2)自己定义属性及表单新特性

自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然是尾随最新的H5一起出来的-.. 兼容性在PC端仅仅能呢说一般般(眼下.比較老式浏览器居多),,手机端支持还是比較OK的; 虽说是自己定义属性,可是还是有一定的规格的,,比方前缀必须是data-[自己定义属性]; 比方 <div data-id="id"></div>

HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势. 一.HTML5表单新增属性 (1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息.如果浏览器不支持的话,此属性 会忽略掉,显示浏览器默认的状态.当输入框中有值或者获得焦点的时候,不显示placeholder的值 eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name

html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载 <!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="

html5表单新特性

type=range 值区域范围 默认值(0-100) type=data  选择日期 type=color value='初始值' 颜色选择器控件 type=search 搜索框效果 type=image 创建一个图像控件该空间单击后将导致表单立即提交 type=email 提交表单时 会自动提交其值 type=url  用于包含地址的输入域,提交表单时会自动验证 type=tel 输入的内容为电话号码类型

HTML5有哪些表单新特性

21. 检测属性支持除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如: 22. Mark元素 把元素看做是高亮的作用,当我选择一段文字的时候,javascript对于HTML的markup效果应该是这样的: Search Results They were interrupted, just after Quato said, ”Open your Mind”. 23. 什么时候用 HTML5已经引入了这么多元素,那么div我们还要用吗?div你可以在没

HTML5表单新特征简介与举例

一.前言一撇 其实关于HTML5的表单特征早在去年你必须知道的28个HTML5特征.窍门和技术一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看.得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个空. 所以,这里打个补丁,把这部分内容完善下.本文的大致内容有: # input type=number / # input type=range / # i