認識輸入框 input 標簽

輸入框是我們網頁中常見的元素，登錄、注冊、個人資料、收貨地址等都需要用到輸入框。而在 HTML 中，輸入框的類型和屬性都有很多，我們可以根據實際需求來決定使用哪一類輸入框。

1. 輸入框的類型

在 HTML 中， input 標簽表示輸入框，而輸入框有很多類型，比如普通文本輸入框、密碼框、郵箱框（只能輸入郵箱格式的內容）、網址框（只能輸入框網址格式的內容）、數字框（只能輸入數字）、單選框、多選框等。我們可以改變 input 標簽的 type 屬性來顯示不同的輸入框類型。

2. 輸入框的使用

input 的類型有很多，我們依次為大家介紹。

2.1. 普通輸入框

普通輸入框既可以輸入任意內容，沒有格式和內容要求。代碼如下：

<input type='text'>

效果如下：

input 標簽的 type 屬性默認為text。

2.2. 密碼框

把 input 的 type 屬性設置為 password則表示密碼框。密碼框既輸入的內容為密文顯示，呈現的效果為實心黑點，不會顯示具體的輸入內容。代碼如下：

<input type='password'>

效果如下：

2.3. 郵箱框

把 input 的 type 設置為 email則表示郵箱框，那么輸入的內容會有規則限制，輸入的內容必須包含 @，且 @ 后必須有內容才滿足驗證規則，否則會有錯誤提示。代碼如下：

<input type='email'>

效果如下：

2.4. 網址框

把 input 的 type 設置為 url則表示網址框，那么輸入的內容會有規則限制，輸入的內容需要以 http:// 或者 https:// 開頭 ，且 @ 后必須有內容才滿足驗證規則，否則會有錯誤提示。代碼如下：

<input type="url">

Tips：這里的網站和我們平時輸入的網站不同，前面必須加上網絡協議，既 http:// 或者 https://

2.5. 數字框

把 input 的 type 設置為 number則表示數字框，那么就只能輸入數字，輸入其他字符無效，且輸入框最右側會有加減按鈕。代碼如下：

<input type='number'>

效果如下：

2.6. 單選框

把 input 的 type 屬性設置為 radio則表示單選框，因為 input 標簽是單標簽，所有單選框的內容直接寫在 input 標簽后面，如果單選框有多個選項，則需要寫多個 input 標簽，且每個 input 標簽必須添加 name 屬性，否則不能成為一組的單選框（既可以選多個）。代碼如下：

<input type="radio" name='gender'> 男
<input type="radio" name='gender'> 女
<input type="radio" name='gender'> 保密

效果如下：

單選框可以添加 checked 屬性，表示默認選中一項。代碼如下：

<input type="radio" checked> 男
<input type="radio"> 女
<input type="radio"> 保密

效果如下：

Tips：如果給多個單選框設置 checked 屬性，則會默認選中最后一個設置 checked屬性的選項。

2.7. 多選框

把 input 的 type 屬性設置為 checkbox，則表示多選框。多選框和單選框一樣，需要設置 name屬性，且多選框也可以設置 checked 屬性表示默認選中，多選框的 checked 屬性可以設置多個。代碼如下：

<input type="checkbox" name="ball" checked> 籃球
<input type="checkbox" name="ball">足球
<input type="checkbox" name="ball" checked>排球
<input type="checkbox" name="ball">乒乓球

效果如下：

2.8. 占位符

INPUT 標簽可以設置 placeholder屬性為占位符。占位符的作用為輸入提示，如果輸入框沒有內容，則會顯示占位符的內容，一旦輸入框有內容，則會顯示輸入框的內容，占位符的內容消失。代碼如下：

<input type="text" placeholder="請輸入內容">

效果如下：

3. 注意事項

1. 單選框和多選框必須給 name 屬性，name 屬性的值為自定義內容；
2. 郵箱框和網站框對輸入內容有限制，需按照其驗證規則輸入正確的內容；
3. 占位符一般為輸入提示，所以占位符的內容為此輸入框的提示，輸入內容后消失。

4. 真實案例分享

京東

 <div>
     <input id="loginname" type="text"  placeholder="郵箱/用戶名/登錄手機"/>
</div>

<div id="entry" class="item item-fore2">
    <input type="password" id="nloginpwd"  placeholder="密碼"/>
    <span >大小寫鎖定已打開</span>
</div>

簡書官網

<div >
    <input placeholder="手機號或郵箱" type="text" />
</div>
<div >
   <input placeholder="密碼" type="password" />
</div>

5. 小結

1. 改變 input 的 type 屬性來設置輸入框不同的類型。
2. 單選框和多選框需要設置 name 屬性。
3. 郵箱框、網站框需要按照一定規則書寫內容。
4. 輸入框類型比較多，可以根據實際需求決定使用哪個類型。