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

时间:2024-03-01 14:49:20

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


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

1. type=”button”

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

button实测图

2. type=”checkbox”

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

checkbox实测图

3. type=”color”

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

color实测图

4. type=”date”

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

date实测图

5. type=”datetime”

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

datetime实测图

6. type=”datetime-local”

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

datetime-local实测图

7. type=”email”

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

email实测图

8. type=”file”

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

file实测图

9. type=”hidden”

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

hidden实测图

10. type=”image”

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

image实测图

11. type=”month”

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

month实测图

12. type=”number”

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

number实测图

13. type=”password”

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

password实测图

14. type=”radio”

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

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"/>

reset实测图

17. type=”search”

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

search实测图

18. type=”submit”

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

引用块内容

19. type=”tel”

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

tel实测图

20. type=”text”

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

text实测图

21. type=”time”

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

time实测图

22. type=”url”

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

url实测图

23. type=”week”

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

week实测图

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