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

這篇文章給大家分享的是有關(guān)html中input標(biāo)簽的屬性有哪些？input標(biāo)簽的用法總結(jié)（附實(shí)例）的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

首先先來(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：下面屬性的寫法同理，就不一一寫出了)，并且這個(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類似，作用是提供一個(gè)可以上下點(diǎn)的按鈕，比如當(dāng)前數(shù)字是1，你設(shè)置了step = "5"，點(diǎn)一下上的按鈕，就變成6了。

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

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

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

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

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

11.form：在HTML5中，表單控件已經(jīng)沒有必要嵌套在一個(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沒有form屬性，那么，它將被關(guān)聯(lián)到離他最近的form表單。

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

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

以上就是html input標(biāo)簽的屬性了。（想看更多就來(lái)億速云，這里有最全的HTML視頻教程）

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

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

<form action="demo_form.asp">
用戶名: <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)讓用戶輸入字母、數(shù)字等等，如用戶的姓名，地址等。

代碼格式如下：

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

2.密碼框：

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

代碼格式如下：

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

3.隱藏域：

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

代碼格式如下：

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

4.單選按鈕：

當(dāng)需要用戶從有限個(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ú)一的名稱。

代碼格式如下：

<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)簽的屬性有哪些？input標(biāo)簽的用法總結(jié)（附實(shí)例）就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！