input的type属性所有参数(含css3.0)

input的type属性所有参数(含css3.0)

---

这是我的第一篇博文，不知道要来写什么，刚好最近看了下css3中input的type属性，发现有很多简单实用的东西，于是就决定写这篇博文。（仅供参考，准确性有待检测！）

1. type=”button”

button相信大家都不陌生的了！
<input type="button" value="这是一个类型为button" />

2. type=”checkbox”

checkbox也不会陌生的。
<input type="checkbox" name="checkbox" id="checkbox" />

3. type=”color”

color颜色选择器。
input type="color" name="color" id="color"/>

4. type=”date”

date日期选择（数字型的）
<input type="date" name="date" id="date"/>

5. type=”datetime”

datetime日期输入（字母型的），粗略的测试了下Safari支持，其它… …
<input type="datetime" name="datetime" id="datetime"/>

6. type=”datetime-local”

datetime-local本地日期选择。
<input type="datetime-local" name="datetime-local" id="datetime-local"/>

7. type=”email”

email邮件格式输入框，条件是包含一个“@”。
<input type="email" name="email" id="email" />

8. type=”file”

file文件选择器，用于上传文件。
<input type="file" name="file" id="file"/>

9. type=”hidden”

hidden隐藏的文本框，用户在浏览器是看不到的，也不占地方，可以用js控制它的值。
<input type="hidden" name="hidden" id="hidden" value="123"/>

10. type=”image”

image为图形按钮，有个src属性，默认是一个提交按钮，可以定制自己想要的按钮。
<input type="image" name="image" id="image" src="1.png"/>

11. type=”month”

month年和月的选择器，是中文的！
<input type="month" name="month" id="month"/>

12. type=”number”

number数字输入框，只能输数字。
<input type="number" name="number" id="number"/>

13. type=”password”

password密码输入框，默认输入内容是“●”代替。
<input type="password" name="password" id="password"/>

14. type=”radio”

radio单选圆形按钮，默认下只能单选且选后无法不选中任何，后期可以更改规则。
<input type="radio" name="radio1" id="radio"/>

15. type=”range”

range控制选择器，可以设置它的value属性更改它原始位置（原始位置在中间=50）。
<input type="range" name="range" id="range" value="60"/>

16. type=”reset”

reset重置按钮，重置表单内的输入和选择。
<input type="reset" name="reset" id="reset"/>

17. type=”search”

search搜索框，它后面比一般的文本框多了一个“x”，用来清空输入的文本（可以去掉的）。
<input type="search" name="search" id="search"/>

18. type=”submit”

submit提交按钮，用于提交表单。
<input type="submit" name="submit" id="submit"/>

19. type=”tel”

tel电话号码输入框，在电脑上没什么特别，就是个文本框，主要是方便移动端上的体验，点击出现数字键盘。
<input type="tel" name="tel" id="tel"/>

20. type=”text”

text文本输入框。
<input type="text" name="text" id="text" value="这是一个类型为text" />

21. type=”time”

time时间选择器。
<input type="time" name="time" id="time"/>

22. type=”url”

url地址输入框，判定条件可能是“：”或者“/”。
<input type="url" name="url" id="url"/>

23. type=”week”

week年份-周的选择器，计算出几月几日是当年的第几周。
<input type="week" name="week" id="week"/>

好了，已经介绍完input的type属性值，有漏的，有错的欢迎留言和dalao们一起交流，分享经验。