搜尋
首頁web前端html教學html input標籤的屬性有哪些? input標籤的用法總結(附實例)

本篇文章主要的向大家介紹了關於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標籤的屬性有哪些? input標籤的用法總結(附實例)

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

來說一說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下拉選單怎麼做? html下拉選單的程式碼實例介紹

html中b標籤和strong標籤的差別是什麼? b和strong區別的總結

#

以上是html input標籤的屬性有哪些? input標籤的用法總結(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML文檔中的根標籤是什麼?HTML文檔中的根標籤是什麼?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,確保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML標籤和元素是同一件事嗎?HTML標籤和元素是同一件事嗎?Apr 28, 2025 pm 05:44 PM

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

&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?Apr 28, 2025 pm 05:43 PM

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

&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?Apr 28, 2025 pm 05:42 PM

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

請說明如何指示HTML中文檔使用的字符集?請說明如何指示HTML中文檔使用的字符集?Apr 28, 2025 pm 05:41 PM

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

HTML中的各種格式標籤是什麼?HTML中的各種格式標籤是什麼?Apr 28, 2025 pm 05:39 PM

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

HTML元素的' ID”屬性與'類”屬性之間有什麼區別?HTML元素的' ID”屬性與'類”屬性之間有什麼區別?Apr 28, 2025 pm 05:39 PM

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

HTML中的'類”屬性是什麼?HTML中的'類”屬性是什麼?Apr 28, 2025 pm 05:37 PM

本文解釋了HTML“類”屬性在分組樣式和JavaScript操縱元素中的作用,將其與唯一的“ ID”屬性進行對比。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

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

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Safe Exam Browser

Safe Exam Browser

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