HTML5 中的新属性。

 
属性 描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align
  • left
  • right
  • top
  • middle
  • bottom
不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete
  • on
  • off
规定是否使用输入字段的自动完成功能。
autofocus autofocus

规定输入字段在页面加载时是否获得焦点。

(不适用于 type="hidden")

checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
formaction URL

覆盖表单的 action 属性。

(适用于 type="submit" 和 type="image")

formenctype 见注释

覆盖表单的 enctype 属性。

(适用于 type="submit" 和 type="image")

formmethod
  • get
  • post

覆盖表单的 method 属性。

(适用于 type="submit" 和 type="image")

formnovalidate formnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性,则提交表单时不进行验证。

formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。

(适用于 type="submit" 和 type="image")

height
  • pixels
  • %
定义 input 字段的高度。(适用于 type="image")
list datalist-id 引用包含输入字段的预定义选项的 datalist 。
max
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用,来创建合法值的范围。

maxlength number 规定输入字段中的字符的最大长度。
min
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用,来创建合法值的范围。

multiple multiple 如果使用该属性,则允许一个以上的值。
name field_name 定义 input 元素的名称。
pattern regexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
src URL 定义以提交按钮形式显示的图像的 URL。
step number 规定输入字的的合法数字间隔。
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
规定 input 元素的类型。
value value 规定 input 元素的值。
width
  • pixels
  • %
定义 input 字段的宽度。(适用于 type="image")

新增的type类型:

HTML5中,除了一般的text,button等一些基本的input类型之外,还增加了新的Input类型,拥有多个新的表单输入类型,可以达到更好的控制和验证。

  • 网址:<input type="url" name="url"/><br/>
  • 邮箱:<input type="email" name="email"/><br/>
  • 年月日的日期空间:<input type="date" name="date"/><br/>
  • 时分:<input type="time" name="time"/><br/>
  • 年月日时分:<input type="datetime-local"/><br/>
  • 年月: <input type="month" name="month"/><br/>
  • 周: <input type="week" name="week"/><br/>
  • 数字: <input type="number" name="number"/><br/>
  • 颜色: <input type="color" name="color"/><br/>
  • 区域: <input type="range" name="range"/><br/>
    
  • 搜索:<input type="search" name="search"/><br/>
 
  • pattern 为正则验证属性
  • title 为提醒:
  • min:为最小数字
  • max:为最大数字
  • step:为输入数字合法间隔,默认为1
 
datalist标签:
散焦时:
聚焦时:
 
 

<input> 标签的更多相关文章

  1. embed标签loop=true背景音乐无法循环

    在html网页中加入背景音乐并设置为循环播放.一开始用<embed>标签,设置loop="true", 但是结果发现在IE浏览器可以,但是在chrome浏览器却无法实现 ...

  2. 【转】object标签和embed标签

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  3. embed标签的使用(在网页中播放各种音频视频的插件的使用)

    播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...

  4. as3.0 [Embed]标签嵌入外部资源

    1.[Embed]嵌入资源 ActionScript代码的顺序非常重要.你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Class; package { import flash ...

  5. 解决embed标签显示在div上层【转藏】

    解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...

  6. OBJECT和EMBED标签(转载)

    一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...

  7. 转: object 和embed 标签播放flash

    一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和 EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBE ...

  8. OBJECT和EMBED标签

    一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBED ...

  9. HTML 5 <embed> 标签

    定义和用法 <embed> 标签定义嵌入的内容,比如插件. 实例 <embed src="helloworld.swf" />

  10. chrome不支持embed标签解决方案

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

随机推荐

  1. 【转】【iOS知识学习】_视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途

    原文网址:http://blog.csdn.net/weasleyqi/article/details/8090373 iOS视图控制对象生命周期-init.viewDidLoad.viewWillA ...

  2. From delegates to lambdas z

    I thought of naming this post “Evolution of lambdas in C#”, then I decided that wouldn’t be closest ...

  3. oracle 物化视图及创建索引

    物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普通视图是虚拟表,应用的局限性大,任何对视图的查询,Oracle都实际上转换为视图SQL语句的查询.这样对整体 ...

  4. Selenium 实现联想下拉框

    直接在文本框输入字符,并不能实现联想下拉框, 第一种方式:强制执行js driver.FindElement(By.Id("top_search_input")).SendKeys ...

  5. 用java api读取HDFS文件

    import java.io.IOException; import java.io.InputStream; import java.security.PrivilegedExceptionActi ...

  6. Java语言使用HttpClient模拟浏览器登录

    使用HttpClient来模拟浏览器登录网站,然后可以进行操作,比如发布信息等 第一步:获取实际的post网址,(不考虑复杂情况下) 1.需要使用到firefox的httpfox插件,httpfox中 ...

  7. codeforce 621B Wet Shark and Bishops

    对角线 x1+y1=x2+y2 或者x1-y1=x2-y2 #include<iostream> #include<string> #include<algorithm& ...

  8. ARM Linux字符设备驱动程序

    1.主设备号和次设备号(二者一起为设备号): 一个字符设备或块设备都有一个主设备号和一个次设备号.主设备号用来标识与设备文件相连的驱动程序,用来反  映设备类型.次设备号被驱动程序用来辨别操作的是哪个 ...

  9. POJ-2442 Sequence K路归并问题

    题目链接:http://poj.org/problem?id=2442 问题一:K个有序表合成一个有序表,元素共有n个.用堆优化 问题二:两个序列的前n小的元素.堆优化. 这题就是问题二的扩展,每次处 ...

  10. 2013 ACM/ICPC Asia Regional Changsha Online–C (模拟)

    题目描述 略... 题解 注意控制精度即可....变量全部定义成double,结果round就行....妈蛋....被这题目恶心死了.... 代码: #include <iostream> ...