HTML5 的Input 类型
⼀、⽂本类
  Text，⽂本
  Url，⽹络地址
  Password，密码
  Email，邮箱地址
⼆、操作类
  Checkbox ，复选框
  Radio，单选框
  File，上传⽂件
  Number，数值
  Range，百分百滑动条
三、功能类
  Button，按钮
  Image，图⽚提交按钮
  Submit，⽂字提交按钮
  Reset，重置表单
四、Date类
  Date，年⽉⽇控件
  Month，年⽉控件
  Week，年周控件
  Time，时间控件
  Datetime，年⽉⽇+时间控件
  Datetime-local，本地年⽉⽇+时间控件
五、特殊类
  Hidden，隐藏信息
扩展：
1.⽂本类属性：placeholder。这是⼀个占位符，可以作为提⽰信息，⽽且⽆法被⽤户选中。
2.Url和e-mail，在H5中，会在提交表单的时候检测其格式是否书写正确。
3.操作类。⼀般input标签会结合label标签使⽤，label⼀般有两种书写⽅法：
①⾮跨度：<label><input></input></label>
②跨度：<label for="input_id"></label>
    <input id="input_id"></input>
如果⽹页结构中，input和label是相邻的关系，可以直接使⽤⾮跨度的书写⽅法，以减少代码量。
4.file。在实际应⽤中，⽹页表单中需要上传的⽂件⼀般不⽌⼀个，这时候就要⽤到multiple属性，它是⼀个布尔值属性，在添加这个属性后，就可以上传多个属性。另外，上传的⽂件可以被规定，使⽤accept属性。这个⼀个数组属性，属性值是MIME规定的⽂件类型。
5.Button。Button类型只能在value中定义按钮上显⽰的提⽰⽂字。Image类型只能在src 中链接图⽚。
⽽button标签则结合了button和image的属性，它是⼀个双标签，也就是说它可以在内部嵌套其他标签，让按钮的显⽰效果更多元化。
6.Date类。Date类型的input标签是H5中新增加的。它实际上是⼀个控件，可以很⽅便的选择和显⽰时间数据，但是⽬前⽀持该控件的浏览器并不多。其中IE是完全不⽀持的。
7.Hidden。这个属性的input标签⽆法显⽰，也⽆法被⽤户控制。它的作⽤可以⽤来标记⼀些隐藏的表单信息。
例如：在⼀些⽹站中，对于⽤户的描述，有⼀个信息完整度的提⽰。
⽤户在注册的时候，必填项有5个，可填项有5个。注册的表单可以⽤hidden来记录可填项中有多少个是有数据的。
假如，⼀个⽤户把所有的可填项全部填写。那么他的信息完整度就是100%。
另⼀个⽤户的可填项⼀个也没有填写，他的信息完整度就是50%。
⽽这个数值可以根据hidden中记录的数值来进⾏计算。
HTML5新增的8类INPUT输⼊类型介绍
已经有的输⼊类型 HTML代码⽰例：
代码如下:
⽂本域 <input type="text">
网页设计html代码大全w3cschool单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
⽂件域 <input type="file">
在HTML5中，增加了多个新的表单input输⼊类型，通过使⽤这些新增元素，可以实现更好的输⼊控制和验证。
1、email类型的应⽤
email类型的input元素是⼀种专门⽤于输⼊E-mail地址的⽂本输⼊框，在提交表单的时候，会⾃动验证email输⼊框的值。
代码如下:
<input type="email" name="user_email" />
2、url类型的应⽤
url类型的input元素提供⽤于输⼊url地址这类特殊⽂本的⽂本框。
代码如下:
<input type="url" name="user_url" />
3、number类型的应⽤
number类型的input元素提供⽤于输⼊数值的⽂本框。
代码如下:
<input type="number" name="number1" min="1" max="20" step="4" />
4、range类型的应⽤
range类型的input元素提供⽤于输⼊包含⼀定范围内数字值得⽂本框，在⽹页中显⽰为滚动条。
代码如下:
<input type="range" name="range1" min="1" max="30" />
5、⽇期检出类型的应⽤
输⼊类型 HTML代码功能说明
代码如下:
date <input type="date">
选取⽇、⽉、年
month <input type="month">
选取⽉、年
代码如下:
week <input type="week">
选取周和年
码代码如下:
time <input type="time">
选取时间（⼩时和分钟）
代码如下:
datetime <input type="datetime">
选取时间、⽇、⽉、年（UTC时间）
代码如下:
datetime-local
<input type="datetime-local"> 选取时间、⽇、⽉、年（本地时间）
6、search类型的应⽤
search类型的input元素提供⽤于输⼊搜索关键词的⽂本框。
代码如下:
<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}
7、tel类型的应⽤
tel类型的input元素提供专门⽤于输⼊电话号码的⽂本框。
代码如下:
<input type="tel" name="tel" />
8、color类型的应⽤
color类型的input元素提供专门⽤于设置颜⾊的⽂本框。
代码如下:
<input type="color" name="color" />
W3Cschool（www.w3cschool）最⼤的技术知识分享与学习平台此篇内容来⾃于w3cschool⽹站⽤户上传并发布。

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