<input> 标签详解

一、<input>是什么

它在HTML中代表一个元素（Element）,多数用于表单的互交控件。
input在HTML中没有闭合标签，单标签的"/"可以不写。

二、<input>属性介绍

type属性

<ol>
<li>type属性有很多的可用值接下来看一下不同的值有什么不同的效果：text
首先type不写值会怎么样？
我们可以看到在type属性没有写类型值得话，默认是文本输入框，也就是"text"

01.png

      </li>
    <li>button

type值为button的话，如同单词一样会出现按钮，但是这个按钮看起来有点变扭（没有文字提示）

02.png

只要加上value属性就可以赋值文字了，如图

03.png

  </li>
    <li>checkbox（复选框）;radio(单选)

type值为checkbox，这时候input变成了复选框进行勾选，type后面的name属性可以设置复选框的分组，此时性别（gender）为一组。再后面的value赋值多数用于提交信息。比如我选男，提交的信息就知道我选的是man。

05.png

添加checked属性可以默认选到该选项，如图可以看到默认为男。

04.png

值为radio实现单选，注意设置name属性值一样的为一组，才能实现单选

1.png

 </li>
    <li>color
       改变控件的颜色，value值设置颜色，但是图中的red并没有变成红色，再看下一张图

06.png

用HEX格式表示才可以。用rgb也是不行的。

07.png

</li>
    <li>date，datetime-local

date
获取控件年，月，日。不包含时间

08.png

datetime-local
获取控件年，月，日，时间

9.png

</li>
<li>file
设置选择文件的控件

10.png

</li>
<li>password
遮挡输入的密码

11.png

</li>
<li>reset
清除当前表单（form）所有内容恢复默认，点击重置后，文本框中‘你好’清除，变成默认值

12.png

</li>
<li>submit
提交表单内容

13.png

</li>
<li>url
输入URL地址，如果输入非法字符会提示你。

14.png

</li>
</ol>

accept属性(配合type="file")

选择文件类型
audio是选择为全部音频类型文件，
video选择全部视频类型文件，
image选择全部图片类型文件，
规定指定类型的文件，值为后缀扩展名，
指定MIME类型<a href="http://www.ruanyifeng.com/blog/2008/06/mime.html"target="_blank" >（MIME详情点击）</a>

1.png