html标签 input,HTML标签之——<input>

是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是设置步长的