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们一起交流,分享经验。