最近学习HTML的过程中遇到了input标签,作为一名前端初级学习者,其实我是不太了解的。既然不懂的话,就得深入的去了解。那么,什么是input标签呢?
1. input标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
2.HTML 与 XHTML 之间的差异
在 HTML 中,input标签没有结束标签。
在 XHTML 中,input标签必须被正确地关闭。
3.HTML5 中的新属性。
4. input标签支持HTML的全局属性
5. input标签支持HTML的事件属性
6.标签类型 (type):
说明:所有主流浏览器都支持 type 属性,但是并非所有主流浏览器都支持所有不同的 input 类型。
text:默认。定义一个单行的文本字段。(默认宽度为20)
password:定义密码字段。(字符会被遮盖)
checkbox:复选框(checked属性:是否选中)
radio:单选框(name属性:指定多个单选框的在一个区域里进行单选操作)
button:定义普通按钮。常用于与JS一起启动脚本。(value属性:button按钮显示的文本)
reset:定义重置按钮(清除文本区域内容,重置所有表单值为默认值)
submit:定义提交按钮。
hide:定义隐藏输入字段。(存放仅用于自己使用的信息)
file:定义输入字段和 "浏览"按钮,供文件上传。
image:定义图像形式的提交按钮。
以下类型为 HTML5 新增 type 类型:
email:在提交表单时会自动验证email的格式是否正确,格式不正确浏览器是不允许提交的。opera浏览器中必须有name属性,否则不起作用。
url:在提交表单时会自动验证url的格式。Opera中会自动在开始处添加http://.
number:可以限制输入的数字,若未输入则会抛出一个错误。(step为上一个数字与下一个数字的间隔)
range:此类型将显示一个可拖动的滑块条,能够选择性的对限制范围内的数值进行设置。拖动时会反馈给value一个值.
search:此类型表示输入的将是一个搜索关键字。
color: 此类型表单可让选择颜色值,并反馈到value中.
telephone:此类型可输入一个电话号码。
Date pickers (date, month, week, time, datetime, datetime-local):( 供选取日期和时间 )
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
参考资料:
1.W3C
2. Mr.Think博客