html input標(biāo)簽的屬性有哪一些？input標(biāo)簽的用法總結(jié)（附案例）

首先先來(lái)說(shuō)說(shuō)html input標(biāo)簽的屬性：

1.type：該屬性是input標(biāo)簽里唯一的必須輸入的屬性，當(dāng)然，也可以不填，默認(rèn)為type = "text"。具體它有那些值，我們后面再討論。

2.required：標(biāo)記一個(gè)字段是否為必須。如果一個(gè)字段被標(biāo)記為required = "required"（嚴(yán)格模式下），或者required（寬松模式下）(ps：下面屬性的寫(xiě)法同理，就不一一寫(xiě)出了)，并且這個(gè)字段的值為空，或者填入的值是無(wú)效值，那么這個(gè)表單不能提交。什么是無(wú)效值？看pattern屬性。

3.pattern：該屬性包含了一個(gè)JavaScript風(fēng)格的正則表達(dá)式，輸入的內(nèi)容必須完全匹配該正則表達(dá)式，不然就算輸入的內(nèi)容無(wú)效。對(duì)正則表達(dá)式不了解？可以去看看JavaScript 正則表達(dá)式。

4.min max：這兩個(gè)屬性用于日期date時(shí)間time等輸入，還有number和range。顧名思義，它們的作用是限制最大值，最小值。

5.step：和max min類(lèi)似，作用是提供一個(gè)可以上下點(diǎn)的按鈕，比如當(dāng)前數(shù)字是1，你設(shè)置了step = "5"，點(diǎn)一下上的按鈕，就變成6了。

6.placeholder：該屬性不多說(shuō)，大家應(yīng)該都很熟悉，一般是用來(lái)提示用戶(hù)輸入的，當(dāng)用戶(hù)真的輸入了文字之后，會(huì)被輸入的文字覆蓋。

7.readonly：顧名思義，該屬性會(huì)讓表單空控件不可編輯。這里的不可編輯不是禁用，只是不能編輯文本而已，比如像單選框radio，復(fù)選框checkbox這種，本來(lái)就是不可編輯的，所以這個(gè)屬性對(duì)它們來(lái)說(shuō)毫無(wú)意義。

8.disabled：該屬性會(huì)禁用一個(gè)表單元素。這里是禁用，完全禁用掉除了<output>之外的所有表單元素。

9.maxlength ：該屬性用于限制用戶(hù)輸入的最大字?jǐn)?shù)限制。

10.size：已經(jīng)沒(méi)什么時(shí)候?qū)嶋H的作用了，控制大小現(xiàn)在幾乎都是由CSS控制了。

11.form：在HTML5中，表單控件已經(jīng)沒(méi)有必要嵌套在一個(gè)表單中，新的form屬性可以把表單元素與頁(yè)面上的任意的表單關(guān)聯(lián)起來(lái)。也可以被嵌套在一個(gè)表單中，隨著另一個(gè)表單提交，代碼如下：

<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>

這樣，就把form和input聯(lián)系起來(lái)了。如果input沒(méi)有form屬性，那么，它將被關(guān)聯(lián)到離他最近的form表單。

12.autocomplete：顧名思義，自動(dòng)完成，用戶(hù)輸入一部分，后面的自動(dòng)補(bǔ)全。需要瀏覽器保存用戶(hù)輸入的內(nèi)容，以便下一次自動(dòng)補(bǔ)全。

13.autofocus：該屬性指的是表示這個(gè)表單控件在頁(yè)面載入的時(shí)候自動(dòng)獲得焦點(diǎn)。

以上就是html input標(biāo)簽的屬性了。（想看更多就來(lái)PHP中文網(wǎng)，這里有最全的HTML視頻教程）

現(xiàn)在說(shuō)說(shuō)input標(biāo)簽的用法：

先看個(gè)html input標(biāo)簽的實(shí)例：

<form action="demo_form.asp">
用戶(hù)名: <input type="text" name="fname"><br>
輸入框: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>

這個(gè)的效果如圖：

效果還是可以的，也是最簡(jiǎn)單的輸入框的樣式，我們今天講的就要簡(jiǎn)單的，簡(jiǎn)單的也表示容易懂。

來(lái)說(shuō)一說(shuō)html input標(biāo)簽的用法總結(jié)：

1.文本框：

在表單中，文本框用來(lái)讓用戶(hù)輸入字母、數(shù)字等等，如用戶(hù)的姓名，地址等。

代碼格式如下：

<input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>

2.密碼框：

是一種特殊的文本域，用于輸入密碼。

代碼格式如下：

<input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>

3.隱藏域：

是用來(lái)收集或發(fā)送信息的不可見(jiàn)元素，對(duì)于網(wǎng)頁(yè)的訪(fǎng)問(wèn)者來(lái)說(shuō)，隱藏域是看不見(jiàn)的。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱(chēng)和值發(fā)送到服務(wù)器上。

代碼格式如下：

<input type=”hidden” name=”...” value=”...”/>

4.單選按鈕：

當(dāng)需要用戶(hù)從有限個(gè)選項(xiàng)中選擇一個(gè)時(shí)，使用單選按鈕。比如我們?cè)谧��?cè)的時(shí)候選擇體重。

代碼格式如下：

<input type=”radio” name=”...” value=”...”/>

5.復(fù)選框：

允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)獨(dú)一的名稱(chēng)。

代碼格式如下：

<input type=”checkbox” name=”...” value=”...”/>

6.文件上傳框：

代碼格式如下：

<input type”file” name=”...”>

注意：利用這項(xiàng)功能時(shí)，在 form 標(biāo)簽中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。

說(shuō)明：multipart 控件是否上傳多文件

以上就是本篇關(guān)于html input標(biāo)簽的屬性介紹，還有關(guān)于html input標(biāo)簽的用法總結(jié)，有問(wèn)題可以在下方留言提問(wèn)。

【小編推薦】

html下拉菜單怎么做？html下拉菜單的代碼實(shí)例介紹

html中b標(biāo)簽和strong標(biāo)簽的區(qū)別是什么？b和strong區(qū)別的總結(jié)

以上就是html input標(biāo)簽的屬性有哪些？input標(biāo)簽的用法總結(jié)（附實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！