HTML标签之——<input>

<input>是HTML众多标签中最豪华的标签，拥有30多种属性，最常见的应用是在<form>标签中

常用的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用法）

<input type="text" mame ="apple" maxlength="10" placeholder = "请输入" list ="listdata">

<datalist id="listdata">

      <option laber="en">red</option>

      <option>yollow</option>

</datalist>

type="text"                input框中可以输入文本

maxlength="10"        只能输入10个字符，多余10的将不显示

list ="listdata"            配合<datalist>标签，构建input框的下拉选择和提示，自动补全（H5新增的比较不错的一个属性，只用于text属性）

<datalist>                  <datalist>中是构建选择（提示的内容），<option>还可以使用laber属性为option提供说明

2.type ="password" 密码输入

<input type="password"  placeholder = "请输入密码qqqqqqqqqqqqqq" name="" maxlength="10" 

这个大家登陆注册什么的时候都有用到，都很熟

   额外加了maxlength  和list（正常的输入密码的input框是用不到的）

   只为说明placeholder不受type类型 和maxlength影响

 3.submit  reset  button

这三个一起讲的原因是它们最后生成的都是按钮的样式

 

 <form>

       <input type="text" mame ="apple" maxlength="10" placeholder = "请输入" list ="listdata">

        <datalist id="listdata">

            <option label="en">red</option>

            <option>yollow</option>

        </datalist>

        <p>

        <input type="password"  placeholder = "请输入密码" name="pwd"   >

        <p>

        <input type="submit" name="" value="提交" formaction="http://www.baidu.com" formmethod="POST" >

        <input type="reset" name="" value="重置内">

        <input type = "button" value = "按钮">

    </form>

        <input type="reset" name="" value="重置外">

 

这边需要说明几点

（1）submit是用来提交的，在type=“submit”之后还可以使用formaction formmethod formtarge                                              formnovalidate分别重写form表单中的action method  target novalidate属性 

（2）type=“reset”只能在表单中重置表单内容，在表单外没有作用

（3）type = “button“生成的只是普通按钮

4.type = “hidden”

 <input type="hidden" name="name" value = "1">

这个在页面上说明也看不到，但是有一点非常重要：就是在表单提交的时候hidden的内容也会被提交（可以用来把药提交的数据放置在表单的hidden input框中，提交的时候一起提交到后台服务器）

5.type =“checkbox”

复选框:<input type="checkbox" name="vigg" checked >

（1）给复选框框设置checked属性就会默认选中

（2）复选框在没有勾选提交表单的时候不会提交，只有在被勾选的时候才会被提交（默认为on）

6.type = “radio”

 单选框:<input type="radio" name="select">apple

       <input type="radio" name="select" checked >orange

       <input type="radio" name="select">yellow

单选框和复选框的用法差不多，暂不多说

7.type = “date”

<input type="date" name="time">

用在需要用户输入日期的时候，效果不错；

8.type =“color”

 <input type="color" name="color">

点击能显示出一个颜色选择器，虽然用到的地方不多，但是效果还是不错的

9.type =“file”

  <input type="file" name="file" multiple >

这是一个让人有爱有恨的功能，它很好解决了PC端上传文件到服务器，但是可恨的是在移动端，苹果手机支持还可以，Android在这方面就是个大坑啊，之前做过一个在微信端需要上传的功能，各种Android支持不一同，有的打不开文件选择，有的不支持multiple多选属性，最后只能用微信自己的接口（js-sdk）实现

10.type = “image” + 分区响应

<input type="image" src="xxxxxxxxxxxx" height="xxxxxxx" formaction = "xxx" formmethod="xxx" ... >

image的用法和submit有点像，就是多了src和height属性，其他formeacton 属性用法都一样

但是image还有一个特性，点击image的时候不止会提交表单信息，还会提交点击相对于图片左上角的坐标位置，这样就可以来做分区响应了，点击不同区域进行不同的操作。

11.number range

这两个都是针对数字的

<input type="number" name="number" min="0" max="100" step="5" >

<input type="range" name="a" min="0" max="100" step="1" >

min max是设置最小最大的，step是设置步长的