HTML5新增表单属性
1.  placeholder 属性
当⽤户还没有输⼊值的时候，输⼊型控件可以通过  placeholder 属性向⽤户显⽰描性说明或者提⽰信息。使⽤  placeholder属性只需要将说明性⽂字作为该属性值即可。除了普遍的⽂本输⼊框外，email、number、url 等其他类型的输⼈框也都⽀持placeholder 属性。
placeholder 属件的使⽤⽅法如下：
<label> text::  <input  type="text"  placeholder="write  me"></label>
2、autocomplete 属性
浏览器通过  autocomplete  属性能够知晓是否应该保存输⼊值以备将来使⽤。例如不保存的代码如下：
<input  type="text"  name="mr"  autocomplete="off"/>
autocomplete  属性应该⽤来保护敏感⽤户数据，避免本地测览器对它们进⾏不安全地存储。对于  autocomplete 属性，可以指
定“on”“off " 与““(不指定) 这三种值。不指定时，使⽤浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时，可以显⽰指定候补输⼊的数据列表。
使⽤  <detailst>标签与  list 属性提供候补输⼊的数据表，⾃动完成时，可以将该 <detalist> 标签中的数据作为候补输⼈的数据在⽂本框中⾃动显⽰。autocomplete 属性的使⽤⽅法如下所⽰：
<inp ut  typ e="te x t"  nam e="m r"  autocom p le te="on"  lis t="m r s"/>
3. autofocus 属性
给⽂本框、选择框或按钮控件加上该属性，当画⾯打开时，该控件⾃动获得光标焦点。⽬前为⽌要做到这⼀点需要使⽤JavaScript, autofocus 属当的使⽤⽅法如下所⽰:
<inp ut  typ e="te x t"  autof ocus>
只有当⼀个页⾯是以使⽤某个控件为主要⽬的时，才对该控件使⽤ autofocus 属性。⼀个页⾯只能有⼀个控件有该属性。
从实际⾓度来说，不要随便滥⽤该属性。
4.  list 属性
在 HTML5  中，单⾏⽂本框增加了⼀个  list 属性，该属性的值为某个  <datalist>标签的  id。<datalist>标签也是  HTML5中新增标签，该标签类似于选择框( select )，但是当⽤户想要设置的值不在选择列表之内时，允许其⾃⾏输⼊。该标签本⾝并不显⽰，⽽是当⽂本框获得焦点时以提⽰输⼊的⽅式显⽰。
为了避免在没有⽀持该标签的浏览器上出现显⽰错误，可以⽤ CSS 等将它设定为不显⽰。list 属性的使⽤⽅法如下代码。
<!doctype  html>
<html>
<head>
<meta charset="utf-8">
<title>我的⽹页</title>
</head>
<body>
text: <input type="text" name="mr" list="mr">
<!--使⽤将datalist标签设定为不显⽰-->
<datalist id="greetings" >
<option value="123">123</option>
<option value="456">456</option>
<option value="789">789</option>
</datalist>
</body>
</html>
【说明】⽬前只有  Opera 10  浏览器⽀持  list  属性
5.  min  和  max 属性
通过设置 min 和 max 属性，可以将  range  输⼊框的数值输⼊范围限定在最低值和最⾼值之间。这两个特性既可以只设置⼀个，也可以两个都设置，当然还可以都不设置，输⼊型控件会根据设置的参数对值范围做出相应调整。
【例】创建⼀个表⽰型⼤⼩的 range 控件，值的范围为 0%~100%，代码如下：
<input  id="confidence"  name="mr"  type="range" min="o"  max="100"  value="0">
上述代码会创建⼀个最⼩值为0、最⼤值为100 的 range 控件。
默认的 min 为 0,max 为 100。
6.step 属性
对于输⼊型控件，设置其  step 特性能够制定输⼊值递增或递减的梯度。
例如，按如下⽅式表⽰型⼤⼩  range 控件的 step 属性设置为 5：
<input  id="confidence"    name="mr"  type="range"  min="0"  max="100"  step="5"  value="0">
设置完成后，控件可接受的输⼊值只能是初始值与 5 的倍数之和。也就是说只能输⼊0、5、10  …  10
0， ⾄于是输⼊框还是滑动条输⼈则由浏览器决定。
step属性的默认值取决于控件的类型，对于range 控件，step默认值为1。
7.  required 属性
⼀旦为某输⼊型控件设置了 required 属性，那么此项必镇，否则⽆法提交表单。
以⽂本输⼊框为例，要将其设置为必填项，按照如下⽅式添加 required  属性即可。
<input  type="text"  id="firtname"  name="mr' reaquired>
required  属性是最简单的⼀种表单验证⽅式。
8. email 输⼊类型
email  类型的<input>标签是⼀种专门⽤来输⼈  email  地址的⽂本框。提交时如果该⽂本框中内容不是  email  地址格式的⽂字则不允许提交，但是它并不检查  email  地址是否存在。和所有的输⼊类型⼀样⽤户可能提交带有空字段的表单，除⾮该字段加上了  required  属性。
email  类型的⽂本框具有  multiple 属性，它允许在该⽂本框中输⼊⼀串以逗号隔开的有效  email  地
址。当然，这不是要求⽤户使⽤该  email  地址列表，浏览器可能使⽤复选框从⽤户的邮件客户端或⼿机通讯录中很好地取出⽤户的联络⼈的列表。
email  类型的  <input>标签的使⽤⽅法如下：
<input  type= "email"  name="email"  value="1530738736@qq"/>
9. url输⼊类型
url  类型的<input>标签是⼀种专门⽤来输⼈  url  地址的⽂本框。提交时如果该⽂本框中内容不是  url  地址格式的⽂字，则不允许提交。
url  类型的<input>标签的使⽤⽅法如下:
<input  name="url" type="url"  value="www.baidu"/>
10. date类型
date  类型的 input  标签以⽇历的形式⽅便⽤户输⼈。
Date类型的<input>标签的使⽤⽅法如下:
<input  name="date1"  type="date"  value="2012 09-25"/>
11. time类型
time  类现的<input>标签是⼀种专门⽤来输⼊时间的⽂本框， 并且在提交时会对输⼊时间的有效性进⾏检查。
time 类型的  <input>  标签的使⽤⽅法如下：
<input  name="time1"  type="time"  value="10:00"/>
12. datetime 输⼊类型
datetime  类型的  input  标签是⼀种专门⽤来输⼊  UTC  ⽇期和时间的⽂本框，并且在提交时会对输⼊的⽇期和时间进⾏有效性检查。
datetime  类型的  input  标签的使⽤⽅法如下：
<input name="datetime1"  type="datetime"  />
13.  datetime-local  输⼊类型
datetime-local  类型的  input  标签是⼀种专门⽤来输⼊本地⽇期和时间的⽂本框，并且在提交时会对输⼊的⽇期和时间进⾏有效性检查。
datetime-local 类型的<input> 标签的使⽤⽅法如下:
<input  name="datetime-local"    type="datetime-local"/>
14.  month输⼊类型
month  类型的<input>标签是⼀种专门⽤来输⼈⽉份的⽂本框， 并且在提交时会对输⼊的⽉份的有效性进⾏检查。
month类型的<input>标签的使⽤⽅法如下:html中提交表单用什么属性
<input  name="moth1"  type="month"  Value="2012-09"/>
15.  week输⼊类型
week  类型的  <input>  标签是⼀种专门⽤来输⼊周号的⽂本框，并且在提交时会对输⼊的周号有效性进⾏检查。它可能是个简单的输⼊⽂本框， 允许⽤户输⼊⼀个数字；也可能更复杂。更精确。
week 类型的<input>标签的使⽤⽅法如下:
<input  name="week1"    type="week"  value="2012-w39"/>
16.  number输⼊类型
number 类型的<input>标签是⼀种专门⽤来输⼊数字的⽂本框，并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。
number  类型的  <input> 标签的使⽤⽅法如下：
<input  name="number1"  type="number"  value="54"  min="10"  max="100"  step="5"  />
17. range输⼊类型
range  类型的  <input>  标签是⼀种只允许输⼊⼀段范围内数值的⽂本框，它具有  min  属性与  max  属性，可以设定最⼩值与最⼤值(默认为0与100)，它还具有step属性，可以指定每次拖动的步幅。
range 类型的  <input>  标签的使⽤⽅法如下：
<input  nam="range1"    type="range"    value="25"  min="0"  max="100"  step="5"/>
18. search  输⼊类型
search  类型的  <input> 标签是⼀种专门⽤来输⼊搜素关键词的⽂本核。search类型与  text  类型仅仅在外现上有区别。
可⽤  css  样式表对⽂本框外观改写，如下所⽰：
input  [type="search"]  { -webkit-appearance:textfield;}
19. tel  输⼊类型
tel  类型的<input>标签被设计为⽤来输⼊电话号码的专⽤⽂本标。它没有特殊的校验规则，它甚⾄不强调只输⼊数字，因为很多电话号码常常带有额外的字符，例如 12-89564752  但是在实际开发中可以通过  pattern  属性来指定对于输⼊的电话号码格式的验证。
20. color输⼊类型
color  类型的 <input>标签⽤来选取颜⾊，它提供了⼀个原⾊选取器。现在，它只在Black Berry 浏览器中被⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。