本篇文章主要的向大家介紹了關於html input標籤的屬性,還有關於html input標籤的具體的用法總結。讓我們一起來看看html input標籤有哪些用法吧
首先先說html input標籤的屬性:
1.type:這個屬性是input標籤裡唯一的必須輸入的屬性,當然,也可以不填,預設為type = "text"。具體它有那些數值,我們後面再討論。
2.required:標記一個欄位是否為必須。如果一個欄位被標記為required = "required"(嚴格模式下),或者required(寬鬆模式下)(ps:下面屬性的寫法同理,就不一一寫出了),並且這個字段的值為空,或填入的值是無效值,那麼這個表單不能提交。什麼是無效值?看pattern屬性。
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:此屬性會停用一個表單元素。這裡是停用,完全停用除了
9.maxlength :此屬性用於限制使用者輸入的最大字數限制。
10.size:已經沒什麼時候實際的作用了,控制大小現在幾乎都是由CSS控制了。
11.form:在HTML5中,表單控制項已經沒有必要嵌套在表單中,新的form屬性可以把表單元素與頁面上的任意的表單關聯起來。也可以嵌套在一個表單中,隨著另一個表單提交,程式碼如下:
<form id="form1"></form> <p> <label for="admin">admin</label> <input type="text" id="admin" form="form1"/> </p>
這樣,就把form和input連結起來了。如果input沒有form屬性,那麼,它將被關聯到離他最近的form表單。
12.autocomplete:顧名思義,自動完成,使用者輸入一部分,後面的自動補全。需要瀏覽器儲存使用者輸入的內容,以便下次自動補全。
13.autofocus:該屬性指的是表示這個表單控制項在頁面載入的時候自動獲得焦點。
以上就是html input標籤的屬性了。 (想看更多就來PHP中文網,這裡有最全的HTML影片教學)
#現在說說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標籤的用法總結,有問題可以在下方留言提問。
【小編推薦】
html中b標籤和strong標籤的差別是什麼? b和strong區別的總結
以上是html input標籤的屬性有哪些? input標籤的用法總結(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,確保properdocumentstrumentstrumentsureandbrowserparserparsing。

文章解釋說,HTML標籤是用於定義元素的語法標記,而元素是完整的單位,包括標籤和內容。他們一起工作以構建網頁。查拉克計數:159

本文討論了Lt; Head&gt; &&lt;身體&gt; HTML中的標籤,它們對用戶體驗的影響以及SEO的影響。正確的結構增強了網站功能和搜索引擎優化。

本文討論了HTML標籤,和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。

文章討論了在HTML中指定字符,重點介紹了UTF-8。主要問題:確保正確顯示文本,防止亂七八糟的字符,並增強SEO和可訪問性。

本文討論了用於構建和造型Web內容的各種HTML格式標籤,強調了它們對文本外觀的影響以及語義標籤對可訪問性和SEO的重要性。

本文討論了HTML的“ ID”和“類”屬性之間的差異,重點是它們的獨特性,目的,CSS語法和特異性。它解釋了它們的使用如何影響網頁樣式和功能,並為


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SublimeText3漢化版
中文版,非常好用

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver CS6
視覺化網頁開發工具

WebStorm Mac版
好用的JavaScript開發工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。