是HTML众多标签中最豪华的标签,拥有30多种属性,最常见的应用是在
标签中常用的type以及属性
属性:
type input的类型(或则说输入域的显示形式)
maxlength 最多输入夫人字符数
size 输入域的长度(测试不好用)
value 输入域的值
placeholder 默认提示
readonly 只读
patten 输入验证的正则
checked (复选框或则单选框)以及被选中
disabled input框无法获得焦点
tabindex 输入域TAB的遍历顺序
name 非常非常重要
type:
text ----文本框
password ----密码
checkbox ----复选框
radio ----单选框
submit ----提交
image ----图片(表单中点击可以用来提交表单)
file ----选择文件选项
hidden ----隐藏(网页中不可见,但是表单提交的时候还是会被提交)
reset ----重置
button ----按钮
1.type = "text" input标签中最常见的一种(包含placeholder,tabindex,maxlength,list用法)
red
yollow
type="text" input框中可以输入文本
maxlength="10" 只能输入10个字符,多余10的将不显示
list ="listdata" 配合标签,构建input框的下拉选择和提示,自动补全(H5新增的比较不错的一个属性,只用于text属性)
中是构建选择(提示的内容),还可以使用laber属性为option提供说明
2.type ="password" 密码输入
这个大家登陆注册什么的时候都有用到,都很熟
额外加了maxlength 和list(正常的输入密码的input框是用不到的)
只为说明placeholder不受type类型 和maxlength影响
3.submit reset button
这三个一起讲的原因是它们最后生成的都是按钮的样式
red
yollow
这边需要说明几点
(1)submit是用来提交的,在type=“submit”之后还可以使用formaction formmethod formtarge formnovalidate分别重写form表单中的action method target novalidate属性
(2)type=“reset”只能在表单中重置表单内容,在表单外没有作用
(3)type = “button“生成的只是普通按钮
4.type = “hidden”
这个在页面上说明也看不到,但是有一点非常重要:就是在表单提交的时候hidden的内容也会被提交(可以用来把药提交的数据放置在表单的hidden input框中,提交的时候一起提交到后台服务器)
5.type =“checkbox”
复选框:
(1)给复选框框设置checked属性就会默认选中
(2)复选框在没有勾选提交表单的时候不会提交,只有在被勾选的时候才会被提交(默认为on)
6.type = “radio”
单选框:apple
orange
yellow
单选框和复选框的用法差不多,暂不多说
7.type = “date”
用在需要用户输入日期的时候,效果不错;
8.type =“color”
点击能显示出一个颜色选择器,虽然用到的地方不多,但是效果还是不错的
9.type =“file”
这是一个让人有爱有恨的功能,它很好解决了PC端上传文件到服务器,但是可恨的是在移动端,苹果手机支持还可以,Android在这方面就是个大坑啊,之前做过一个在微信端需要上传的功能,各种Android支持不一同,有的打不开文件选择,有的不支持multiple多选属性,最后只能用微信自己的接口(js-sdk)实现
10.type = “image” + 分区响应
image的用法和submit有点像,就是多了src和height属性,其他formeacton 属性用法都一样
但是image还有一个特性,点击image的时候不止会提交表单信息,还会提交点击相对于图片左上角的坐标位置,这样就可以来做分区响应了,点击不同区域进行不同的操作。
11.number range
这两个都是针对数字的
min max是设置最小最大的,step是设置步长的