一：什么是 input 標簽
input，翻譯過來就是 “輸入” 的意思，在 HTML 中，大多數表單都是使用 input 標簽來實現的。
說明：input 是自閉合標簽，可以看到它是沒有結束符號的。
二：input 標簽中 type 屬性取值
text 單行文本框 password 密碼文本框 radio 單選框 checkbox 多選框 button、submit、reset 按鈕 file 文件上傳
text 單行文本框
單行文本框使用 input 標簽來實現，type 屬性的取值是 text ，比如常用於登陸注冊功能。
<div>
姓名：<input type="text" />
</div>
單行文本框常用屬性
| 屬性 | 解釋說明 |
|---|---|
| value | 設置默認情況下文本框顯示的文字(默認值) |
| size | 設置文本框的長度 |
| maxlength | 設置文本框中最多可以輸入的字符數 |
① value 屬性 默認情況下，單行文本框的輸入區域是空白的，如果想給該區域設置默認的顯示文字，就要用到 value 屬性
② size 屬性 單行文本框的默認長度是 20 像素，如果想改變其默認長度，就要用到 size 屬性，代碼如下所示
③ maxlength 屬性 我們注冊一個賬號，在輸入用戶昵稱時，經常會提示最多輸入多少個字，在單行文本框中，想要實現這個功能，就要使用 maxlength 屬性。
password 密碼文本框
密碼文本框，從名字就可以看出來這是一個輸入密碼的文本框，type 取值為 password 。
密碼：<input type="password" />
從外觀上來看，密碼文本框和單行文本框相似，你也可以把密碼文本框看成是一種特殊的單行文本框。但當我們在輸入框內輸入字符后，我們就可以看到兩者的區別。
在單行文本框中輸入的字符可見，而在密碼文本框中輸入的字符是不可見的。這是兩者本質上的區別。
密碼文本框和單行文本框擁有相同的屬性（value、size、maxlength），作用也是一致的，這里不再重復說明。
但需要特殊說明的是，密碼文本框內的字符被黑色小圓點代替，這也只是讓你旁邊的人看不到你輸入了什么，對數據的安全性來說是沒一點作用的，瀏覽器和服務器之間數據的安全傳輸，屬於后端技術。
radio 單選框
單選框使用 input 標簽來實現，type 屬性取值為 radio 。
這里的要用到屬性 name 和 value
| 屬性 | 解釋說明 |
|---|---|
| name | 單選按鈕所在的組名 |
| value | 單選按鈕的取值 |
value 屬性的取值一般跟后面的文本相同，雖然加不加 value 屬性在顯示效果上都是一樣的，但之所以要加上，也是為了方便 JavaScript 或者是服務器來對數據進行操作，關於這點，所有表單元素的 value 屬性的作用都是一致的。
<form>
性別
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</form>
使用單選框的兩個注意事項
-
注意事項一：不能忘記加 name 屬性。
-
注意事項二：同一組的單選框，必須設置相同的 name。
這兩個注意事項，犯了其中一項，都會導致單選框出現可以同時被選取的情況
checkbox 復選框
復選框使用 input 標簽實現，type 屬性的取值為 checkbox ，從名字可以很清楚的知道，復選框可以選擇多項。
復選框的屬性 name 和 value,和單選框其實是一樣的，這兩個屬性也是必填項。
<form>
你最喜歡的運動 <br />
<input type="checkbox" name="anime" value="游泳" />游泳
<input type="checkbox" name="anime" value="足球" />足球
<input type="checkbox" name="anime" value="籃球" />籃球
<input type="checkbox" name="anime" value="乒乓球" />乒乓球
</form>
多選框默認不會選中任何選項，如果想在默認情況下，選中一個或者多個選項，也需要用到 checked 屬性來實現，代碼如下所示
<form>
你最喜歡的運動 <br />
<input type="checkbox" name="anime" value="游泳" checked />游泳
<input type="checkbox" name="anime" value="足球" checked/>足球
<input type="checkbox" name="anime" value="籃球" checked/>籃球
<input type="checkbox" name="anime" value="乒乓球" checked/>乒乓球
</form>
按鈕
HTML 中，常見的按鈕有三種，分別是普通按鈕 button、提交按鈕 submit 、重置按鈕 reset
①：button 普通按鈕
普通按鈕一般是配合 JavaScript 來實現各種操作的
②：submit 提交按鈕
提交按鈕一般用來給服務器提交數據時使用，你可以把提交按鈕看成是特殊的普通按鈕。
③：reset 重置按鈕
重置按鈕一般用於清除表單中的內容，你同樣可以把它看成是一種特殊的普通按鈕。
可以看到，點擊"重新填寫"按鈕，可以清空我們在輸入框內輸入的內容，這就是重置按鈕的作用。
需要注意的是，重置按鈕 reset 只能清空在 form 標簽內的數據，對於 form 標簽外的表單數據是無效的
file 文件上傳
文件上傳用 input 標簽實現，type 屬性的取值是 file。
像平常我們用到的百度網盤、各種郵箱都有上傳文件的功能
這是本地文件的操作，如果想上傳到網絡，需要后台技術配合了