認(rèn)識(shí)輸入框 input 標(biāo)簽

輸入框是我們網(wǎng)頁(yè)中常見(jiàn)的元素，登錄、注冊(cè)、個(gè)人資料、收貨地址等都需要用到輸入框。而在 HTML 中，輸入框的類(lèi)型和屬性都有很多，我們可以根據(jù)實(shí)際需求來(lái)決定使用哪一類(lèi)輸入框。

1. 輸入框的類(lèi)型

在 HTML 中， input 標(biāo)簽表示輸入框，而輸入框有很多類(lèi)型，比如普通文本輸入框、密碼框、郵箱框（只能輸入郵箱格式的內(nèi)容）、網(wǎng)址框（只能輸入框網(wǎng)址格式的內(nèi)容）、數(shù)字框（只能輸入數(shù)字）、單選框、多選框等。我們可以改變 input 標(biāo)簽的 type 屬性來(lái)顯示不同的輸入框類(lèi)型。

2. 輸入框的使用

input 的類(lèi)型有很多，我們依次為大家介紹。

2.1. 普通輸入框

普通輸入框既可以輸入任意內(nèi)容，沒(méi)有格式和內(nèi)容要求。代碼如下：

<input type='text'>

效果如下：

input 標(biāo)簽的 type 屬性默認(rèn)為text。

2.2. 密碼框

把 input 的 type 屬性設(shè)置為 password則表示密碼框。密碼框既輸入的內(nèi)容為密文顯示，呈現(xiàn)的效果為實(shí)心黑點(diǎn)，不會(huì)顯示具體的輸入內(nèi)容。代碼如下：

<input type='password'>

效果如下：

2.3. 郵箱框

把 input 的 type 設(shè)置為 email則表示郵箱框，那么輸入的內(nèi)容會(huì)有規(guī)則限制，輸入的內(nèi)容必須包含 @，且 @ 后必須有內(nèi)容才滿(mǎn)足驗(yàn)證規(guī)則，否則會(huì)有錯(cuò)誤提示。代碼如下：

<input type='email'>

效果如下：

2.4. 網(wǎng)址框

把 input 的 type 設(shè)置為 url則表示網(wǎng)址框，那么輸入的內(nèi)容會(huì)有規(guī)則限制，輸入的內(nèi)容需要以 http:// 或者 https:// 開(kāi)頭 ，且 @ 后必須有內(nèi)容才滿(mǎn)足驗(yàn)證規(guī)則，否則會(huì)有錯(cuò)誤提示。代碼如下：

<input type="url">

Tips：這里的網(wǎng)站和我們平時(shí)輸入的網(wǎng)站不同，前面必須加上網(wǎng)絡(luò)協(xié)議，既 http:// 或者 https://

2.5. 數(shù)字框

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

<input type='number'>

效果如下：

2.6. 單選框

把 input 的 type 屬性設(shè)置為 radio則表示單選框，因?yàn)?input 標(biāo)簽是單標(biāo)簽，所有單選框的內(nèi)容直接寫(xiě)在 input 標(biāo)簽后面，如果單選框有多個(gè)選項(xiàng)，則需要寫(xiě)多個(gè) input 標(biāo)簽，且每個(gè) input 標(biāo)簽必須添加 name 屬性，否則不能成為一組的單選框（既可以選多個(gè)）。代碼如下：

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

效果如下：

單選框可以添加 checked 屬性，表示默認(rèn)選中一項(xiàng)。代碼如下：

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

效果如下：

Tips：如果給多個(gè)單選框設(shè)置 checked 屬性，則會(huì)默認(rèn)選中最后一個(gè)設(shè)置 checked屬性的選項(xiàng)。

2.7. 多選框

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

<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 標(biāo)簽可以設(shè)置 placeholder屬性為占位符。占位符的作用為輸入提示，如果輸入框沒(méi)有內(nèi)容，則會(huì)顯示占位符的內(nèi)容，一旦輸入框有內(nèi)容，則會(huì)顯示輸入框的內(nèi)容，占位符的內(nèi)容消失。代碼如下：

<input type="text" placeholder="請(qǐng)輸入內(nèi)容">

效果如下：

3. 注意事項(xiàng)

1. 單選框和多選框必須給 name 屬性，name 屬性的值為自定義內(nèi)容；
2. 郵箱框和網(wǎng)站框?qū)斎雰?nèi)容有限制，需按照其驗(yàn)證規(guī)則輸入正確的內(nèi)容；
3. 占位符一般為輸入提示，所以占位符的內(nèi)容為此輸入框的提示，輸入內(nèi)容后消失。

4. 真實(shí)案例分享

京東

 <div>
     <input id="loginname" type="text"  placeholder="郵箱/用戶(hù)名/登錄手機(jī)"/>
</div>

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

簡(jiǎn)書(shū)官網(wǎng)

<div >
    <input placeholder="手機(jī)號(hào)或郵箱" type="text" />
</div>
<div >
   <input placeholder="密碼" type="password" />
</div>

5. 小結(jié)

1. 改變 input 的 type 屬性來(lái)設(shè)置輸入框不同的類(lèi)型。
2. 單選框和多選框需要設(shè)置 name 屬性。
3. 郵箱框、網(wǎng)站框需要按照一定規(guī)則書(shū)寫(xiě)內(nèi)容。
4. 輸入框類(lèi)型比較多，可以根據(jù)實(shí)際需求決定使用哪個(gè)類(lèi)型。