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屬性可以把表單元素與頁面上的任意的表單關聯起來。也可以被嵌套在一個表單中,隨著另一個表單提交,代碼如下:

<formid="form1"><p><labelfor="admin">admin</label><inputtype="text"id="admin"form="form1"/></p></form>

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

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

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

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

擴展資料

現在說說input標簽的用法:

先看個html input標簽的實例:

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

這個的效果如圖:

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

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

1.文本框:

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

代碼格式如下:

<inputtype=”text”name=”...”size=”...”maxlength=”...”value=”...”/>

2.密碼框:

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

代碼格式如下:

<inputtype=”password”name=”...”size=”...”maxlength=”...”value=”...”/>

3.隱藏域:

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

代碼格式如下:

<inputtype=”hidden”name=”...”value=”...”/>

4.單選按鈕:

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

代碼格式如下:

<inputtype=”radio”name=”...”value=”...”/>

5.復選框:

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

代碼格式如下:

<inputtype=”checkbox”name=”...”value=”...”/>

6.文件上傳框:

代碼格式如下:

<inputtype”file”name=”...”>

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

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