html5中input的type类型有哪些(总结)
一、总结
一句话总结:时间、颜色、(邮件、电话、url)、(数字、数字范围)、搜索search
二、html5中input的type类型
值 | 描述 |
---|---|
button | 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) |
checkbox | 定义复选框。 |
color | 定义拾色器。 |
date | 定义日期字段(带有 calendar 控件) |
datetime | 定义日期字段(带有 calendar 和 time 控件) |
datetime-local | 定义日期字段(带有 calendar 和 time 控件) |
month | 定义日期字段的月(带有 calendar 控件) |
week | 定义日期字段的周(带有 calendar 控件) |
time | 定义日期字段的时、分、秒(带有 time 控件) |
定义用于 e-mail 地址的文本字段 | |
file | 定义输入字段和 "浏览..." 按钮,供文件上传 |
hidden | 定义隐藏输入字段 |
image | 定义图像作为提交按钮 |
number | 定义带有 spinner 控件的数字字段 |
password | 定义密码字段。字段中的字符会被遮蔽。 |
radio | 定义单选按钮。 |
range | 定义带有 slider 控件的数字字段。 |
reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
search | 定义用于搜索的文本字段。 |
submit | 定义提交按钮。提交按钮向服务器发送数据。 |
tel | 定义用于电话号码的文本字段。 |
text | 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。 |
url | 定义用于 URL 的文本字段。 |
三、HTML5 input类型总结
1、文字总结
一、文本类
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一般有两种书写方法:
1.非跨度:<label><input></input></label>
2.跨度:<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中记录的数值来进行计算。
2、代码
1 2 3 4 5226 227 236 241 242 243 input 类型 demoForm 6 39 40 41
四、input相关总结
一、使input文本框不可编辑的三种方法
1.disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。
示例:<input type="text" disabled="disabled" /> 2.readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。示例:<input type="text" readonly="readonly"> 3.readonly unselectable="on" 该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。示例:<input type="text" readonly unselectable="on" >(还是菜鸟一枚,写的不对的地方欢迎指正!)
二、input调用移动端的相册等
<input type="file" accept="image/*" capture="camera"> //支持相册
<input type="file" accept="video/*" capture="camcorder"> //支持视频
<input type="file" accept="audio/*" capture="microphone"> //支持录音
<input type="file" accept="image/*" multiple> //直接支持多选
建议在电脑上开发测试的时候不要加上accept的这个属性,他会明显使找并打开文件的过程变慢,效率很低