一、<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