html中input標簽的屬性怎么用

這篇文章主要講解了“html中input標簽的屬性怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html中input標簽的屬性怎么用”吧！

html中input標簽的屬性有：type、required、pattern、step、placeholder、readonly、disabled、size、form、maxlength、autofocus、min、max等。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

首先先來說說html input標簽的屬性：

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

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

打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）

3.pattern：該屬性包含了一個JavaScript風格的正則表達式，輸入的內容必須完全匹配該正則表達式，不然就算輸入的內容無效。對正則表達式不了解？可以去看看JavaScript 正則表達式。

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

5.step：和max min類似，作用是提供一個可以上下點的按鈕，比如當前數字是1，你設置了step = "5"，點一下上的按鈕，就變成6了。

6.placeholder：該屬性不多說，大家應該都很熟悉，一般是用來提示用戶輸入的，當用戶真的輸入了文字之后，會被輸入的文字覆蓋。

7.readonly：顧名思義，該屬性會讓表單空控件不可編輯。這里的不可編輯不是禁用，只是不能編輯文本而已，比如像單選框radio，復選框checkbox這種，本來就是不可編輯的，所以這個屬性對它們來說毫無意義。

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

9.maxlength ：該屬性用于限制用戶輸入的最大字數限制。

10.size：已經沒什么時候實際的作用了，控制大小現在幾乎都是由CSS控制了。

11.form：在HTML5中，表單控件已經沒有必要嵌套在一個表單中，新的form屬性可以把表單元素與頁面上的任意的表單關聯起來。也可以被嵌套在一個表單中，隨著另一個表單提交，代碼如下：

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

這樣，就把form和input聯系起來了。如果input沒有form屬性，那么，它將被關聯到離他最近的form表單。

12.autocomplete：顧名思義，自動完成，用戶輸入一部分，后面的自動補全。需要瀏覽器保存用戶輸入的內容，以便下一次自動補全。

13.autofocus：該屬性指的是表示這個表單控件在頁面載入的時候自動獲得焦點。

以上就是html input標簽的屬性了。

擴展資料

現在說說input標簽的用法：

先看個html input標簽的實例：

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

這個的效果如圖：

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

來說一說html input標簽的用法總結：

1.文本框：

在表單中，文本框用來讓用戶輸入字母、數字等等，如用戶的姓名，地址等。

代碼格式如下：

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

2.密碼框：

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

代碼格式如下：

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

3.隱藏域：

是用來收集或發送信息的不可見元素，對于網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。

代碼格式如下：

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

4.單選按鈕：

當需要用戶從有限個選項中選擇一個時，使用單選按鈕。比如我們在注冊的時候選擇體重。

代碼格式如下：

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

5.復選框：

允許在待選項中選中一項以上的選項。每個復選框都是一個獨立的元素，都必須有一個獨一的名稱。

代碼格式如下：

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

6.文件上傳框：

代碼格式如下：

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

注意：利用這項功能時，在 form 標簽中要指定method屬性。要把method 指定為post, enctype屬性指定為 multipart/form-data。

說明：multipart 控件是否上傳多文件

感謝各位的閱讀，以上就是“html中input標簽的屬性怎么用”的內容了，經過本文的學習后，相信大家對html中input標簽的屬性怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！