1.<input type="text">：如果一个input没有type属性，那么它会是默认type="text"。没有什么特别的，就是允许输入文本，简单明了。
2.<input type="password">：顾名思义，在用户输入密码的时候建议使用这个属性而非text，使用了这个属性，用户输入的文字将会变成，我们是看不到的，当然，传给后台会是用户输入的文本。有些手机端上不会一开始就是，而是会短暂的明文显示用户输入的最后一个字符，然后才是*。
3.<input type="checkbox">：复选框，默认是小方格，可以选择多个。
4.<input type="radio">：单选框，默认是小圆圈，只能选择一个。
5.<input type="submit">：通常被认为是一个提交按钮，当点击此按钮时，提交本表单的数据。
6.<input type="file">：这个输入类型和其他的不同，其他无非是一些选择，或者输入文本，而这个属性，是为了能让用户上传本地文件。
7.<input type="hidden">：顾名思义，该属性是用来隐藏掉该表单控件。以前一般是用来收集一些数据，但是现在没必要了，有强大的localStorage等存储机制，谁还会用这个去存数据呢。
.8<input type="image">：该属性接受所有<img>，将会像submit一样提交图片，如果想上传图片，照片，不妨使用这个属性。
9.<input type="reset">：重置按钮，点了这个按钮，表单的数据全部重置，也就是清空的意思。一般不会使用，毕竟用户辛辛苦苦填了半天，误操作，点了重置。体验性太差了。
.10<input type="button">：顾名思义，一个按钮，表单按钮，和单纯的<button>元素相比，没有<button>使用CSS方便，所以如果你不是想用这个按钮去重置（reset）或者提交（submit），并且为了和传统的表单风格相比配的话，建议你都使用<button>而不是 <input type="button">。
以上的都是HTML5以前都有的属性，下面是新增的（跟键盘有关的都是要配合手机端使用才有效果）：
11.<input type="email">：该属性外观上和文本栏相似，用于指定一个电子邮箱地址。在web端没有什么差别，但是在手机端就不一样了，输入键盘会自动的变成有@ 数字 A-Z .等，与输入邮箱有关的字符，用户体验直线上升，有木有？
12.<input type="url">：外观功能和 <input type="email">类似，用于指定一个web地址。在手机端上会自动转换成有类似于.com \等方便用户输入web地址的键盘。
13.<input type="tel">：用于指定输入的是电话号码。键盘就会变成输入电话号码的键盘。当然，也可以自己定义一些格式什么的，比如023-1235····之类的，需要与pattern属性连用。
<input type="number">：用于指定输入的是数字，键盘为输入数字的键盘。
14.<input type="range">：变成一个滑动条，不同的客户端显示出默认的样式是不一样的。用户可以左右滑动。webkit中可以使用CSS：input[type=range]{=webkit-appearance:slider-vertical}让滑动条竖起来。
<input type="search">：提供一个搜索栏。如果有文本输入的话，很多浏览器会在最右边提供一个清空搜索栏的小叉，点了就清空该搜索栏。
<input type="color">：在浏览器支持的情况下，提供一个拾色器，虽然功能没有PS里面的那么强大，不过感觉和window自带的图画功能里面的拾色器差不多。
15.<input type="date">：顾名思义，日期选择器，可以用来选择年月日。
<input type="datetime">：该属性提供两个栏，一个年月日，一个用于时分秒。时区被设置成了UTC。
16.<input type="datetime-local">：和 <input type="datetime">几乎完全一样，只是不是UTC时间。
.17<input type="month">：只包括了年，月的时间选择器。
18.<input type="time">：只包括了时分秒的时间选择器，而且是24小时制。
19.<input type="week">：该属性是输入多少年的多少周，你可以选择日期，但是返回的是XXXX年XX周。
网友评论