首頁 web前端 html教學 如何設定表單的input文字方塊不可編輯

如何設定表單的input文字方塊不可編輯

Nov 21, 2018 am 10:48 AM
表單

設定表單input文字方塊不可編輯的方法:先建立對應的程式碼檔案;然後透過為表單欄位設定為「onfocus=this.blur(),readonly、disabled」來實作不可編輯的功能即可。

如何設定表單的input文字方塊不可編輯

本篇文章帶給大家的內容是以input文字方塊為例來介紹如何設定表單不可編輯,讓大家了解實作所有表單欄位(文字框,標籤,複選框,文字區域)不可編輯的方法,知道readonly屬性和disabled 屬性的差異。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

有時,我們需要以不可編輯的模式顯示表單域,那麼如何實現?我們可以透過為表單欄位(input文字框,標籤,複選框,文字區域)設定以下方法來實現表單的不可編輯功能。 【相關影片教學推薦:html教學

我們以input文字方塊為例來看看效果:

1、onfocus=this.blur( ) 

<input type="text" name="input1" value="php中文网" onfocus=this.blur()>
登入後複製

如何設定表單的input文字方塊不可編輯

可以看出,表單input文字方塊無法被點擊,不可進行編輯了;裡面的文字也無法選擇。

2、readonly屬性 

<input type="text" name="input1" value="php中文网" readonly> 

<input type="text" name="input1" value="php中文网" readonly="true">
登入後複製

如何設定表單的input文字方塊不可編輯

#可以看出,表單input文字方塊無法點擊,無法進行編輯了。

3、disabled 屬性 

<input type="text" name="input1" value="php中文网" disabled>
登入後複製

如何設定表單的input文字方塊不可編輯

注意:

我們不能為所有表單欄位或元素設定readonly屬性。

下面我們來看看readonly屬性和disabled 屬性的差異是什麼?

readonly屬性和disabled 屬性都是表單欄位(文字框,標籤,複選框,文字區域)的不可編輯屬性,下面我們來看看它們的差異

disabled 屬性----停用屬性

1、停用的表單欄位或元素值不會發佈到伺服器進行處理。

2、停用的表單欄位或元素不會獲得焦點。

3、選項卡導覽時會跳過已停用的表單欄位或元素。

4、某些瀏覽器(如IE)為禁用的表單欄位或元素提供預設樣式(灰色或浮雕文字)。

readonly屬性----只讀屬性

1、欄位或元素的值以唯讀形式來發佈到伺服器進行處理。

2、只讀表單欄位或元素可以獲得焦點。

3、選項卡導航時包含唯讀表單欄位或元素。

4、某些瀏覽器不為唯讀表單欄位或元素提供預設樣式。

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是如何設定表單的input文字方塊不可編輯的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何實現PHP表單提交後的頁面跳轉 如何實現PHP表單提交後的頁面跳轉 Aug 12, 2023 am 11:30 AM

如何實現PHP表單提交後的頁面跳轉【簡介】在Web開發中,表單的提交是一項常見的功能需求。當使用者填寫完表單並點擊提交按鈕後,通常需要將表單資料傳送至伺服器進行處理,並在處理完後將使用者重新導向至另一個頁面。本文將介紹如何使用PHP來實現表單提交後的頁面跳躍。 【步驟一:HTML表單】首先,我們需要在HTML頁面中撰寫一個包含表單的頁面,以便使用者填寫需要提交的資料。

如何使用 JavaScript 實作表單的輸入框內容自動提示功能? 如何使用 JavaScript 實作表單的輸入框內容自動提示功能? Oct 20, 2023 pm 04:01 PM

如何使用JavaScript實作表單的輸入框內容自動提示功能?簡介:表單的輸入框內容自動提示功能在網頁應用程式中非常常見,它可以幫助使用者快速輸入正確的內容。本文將介紹如何使用JavaScript實作此功能,並提供具體的程式碼範例。在建立HTML結構首先,我們需要建立一個包含輸入框和自動提示清單的HTML結構。可以使用以下程式碼:&lt;!DOCTYP

如何處理PHP表單中的使用者權限管理 如何處理PHP表單中的使用者權限管理 Aug 10, 2023 pm 01:06 PM

如何處理PHP表單中的使用者權限管理隨著Web應用程式的不斷發展,使用者權限管理是重要的功能之一。使用者權限管理可以控制使用者在應用程式中的操作權限,確保資料的安全性和合法性。在PHP表單中,使用者權限管理可以透過一些簡單的程式碼來實現。本文將介紹如何處理PHP表單中的使用者權限管理,並給予對應的程式碼範例。一、使用者角色的定義與管理首先,將使用者角色定義與管理是使用者權

如何使用 JavaScript 實作表單的輸入框內容即時校驗功能? 如何使用 JavaScript 實作表單的輸入框內容即時校驗功能? Oct 18, 2023 am 08:47 AM

如何使用JavaScript實作表單的輸入框內容即時校驗功能?在許多網頁應用程式中,表單是使用者與系統之間最常用的互動方式。然而,使用者輸入的內容往往需要進行有效性校驗,以確保資料的準確性和完整性。在這篇文章中,我們將學習如何使用JavaScript實作表單的輸入框內容即時校驗功能,並提供具體的程式碼範例。在建立表單首先,我們需要在HTML中建立一個簡單的表

如何使用HTML、CSS和jQuery實現表單自動保存的進階功能 如何使用HTML、CSS和jQuery實現表單自動保存的進階功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery實現表單自動保存的高級功能在現代網頁應用中,表單是非常常見的元素之一。當使用者在輸入表單資料時,如何能夠實現自動儲存的功能,不僅可以提高使用者的使用體驗,也能確保資料的安全性。本文將介紹如何使用HTML、CSS和jQuery來實作表單的自動儲存功能,並附上具體的程式碼範例。一、HTML表單的結構建構我們先來建立一個簡單的HT

PHP表單處理:表單資料查詢與篩選 PHP表單處理:表單資料查詢與篩選 Aug 07, 2023 pm 06:17 PM

PHP表單處理:表單資料查詢與篩選引言在網路開發中,表單是一種重要的互動方式,使用者可以透過表單向伺服器提交資料並進行進一步的處理。本文將介紹如何使用PHP處理表單資料的查詢與篩選功能。表單的設計與提交首先,我們需要設計一個包含查詢與篩選功能的表單。常見的表單元素包括輸入框、下拉清單、單選框、複選框等,根據具體需求進行設計。用戶在提交表單時,會將資料以POS

Laravel表單類別使用技巧:提高效率的方法 Laravel表單類別使用技巧:提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時,表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架,提供了豐富而強大的表單類,使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧,幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單,首先需要在檢視中編寫對應的HTML表單。在處理表單時,可以使用Laravel

如何使用HTML、CSS和jQuery建立一個帶有浮動提示的表單 如何使用HTML、CSS和jQuery建立一個帶有浮動提示的表單 Oct 25, 2023 am 10:48 AM

如何使用HTML、CSS和jQuery建立一個帶有浮動提示的表單在現代的網頁設計中,表單是不可或缺的元件之一。為了提高使用者體驗,我們經常需要在表單中添加一些浮動提示,以引導使用者正確填寫表單。本文將介紹如何使用HTML、CSS和jQuery建立一個帶有浮動提示的表單,並提供具體的程式碼範例。首先,我們需要建立HTML表單。在表單中,我們需要添加一些輸入字段,以及

See all articles