如何指定應禁用輸入元素？-css教學-PHP中文網

首頁

web前端

css教學

如何指定應禁用輸入元素？

PHPz

Sep 04, 2023 am 10:09 AM

如何指定應禁用輸入元素？

在網頁上使用表單時，有時需要我們停用任何輸入欄位。例如，防止使用者在完成表單中的前面步驟之前不允許使用某些輸入欄位。同樣，也可以透過停用表單欄位直到填寫所有必填欄位來防止使用者提交無效資料或虛假資料。

為了解決上述問題，我們有不同的方法可以用來停用HTML中的輸入元素，例如使用"disabled"屬性、JavaScript和CSS。在本文中，我們將看到如何指定一個輸入元素應該被停用。

無論您是剛開始學習網頁開發的開發人員，還是經驗豐富的開發人員想要更新知識，本文將為您提供所需的信息，以便有效地禁用網頁上的輸入元素。

禁用輸入元素的不同方法

方法一：使用「disabled」屬性

停用 HTML 輸入元素的第一種方法，或者我們可以說是最簡單的方法，是使用元素中可用的「disabled」屬性。該屬性可以添加到任何輸入元素，並將阻止使用者與該元素互動。

當輸入元素被停用時，它無法被編輯、選擇或作為表單的一部分提交。此屬性通常用於向使用者表示該輸入不可用，或防止使用者提交無效資料。

文法

以下是使用輸入元素的disabled屬性停用輸入元素的語法，請使用下列程式碼：

<input type="number" name="phone" disabled>

在上面的程式碼中，我們有一個類型為數字的輸入字段，可以使用 HTML 中元素的「disabled」屬性來停用該輸入字段。

Example

的中文翻譯為：

範例

在此範例中，使用元素中的可用屬性停用名稱為「phone」的輸入元素。 “disabled”屬性用於停用輸入元素。

<html>
   <head>
      <title>Example to disable the input element using disabled attribute method </title>
   </head>
   <body>
      <h2 id="Welcome-to-Tutorialspoint">Welcome to Tutorialspoint</h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone" disabled>
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>

方法2：使用JavaScript

停用HTML輸入元素的第二個方法是使用JavaScript。當需要根據使用者輸入或其他因素動態停用元素時，這種方法非常有用。

使用 JavaScript 方法的一個優點是，它允許我們根據使用者輸入或其他條件動態新增或刪除「停用」屬性，因為當需要根據使用者操作停用輸入元素時，它非常有用或其他因素。

此方法涉及使用JavaScript程式碼存取輸入元素並將其"disabled"屬性設為true，使用該方法的語法如下所示。

文法

以下是使用JavaScript停用輸入元素的語法，使用以下程式碼：

document.getElementById("disabledInputField").disabled = true;

在上面的程式碼中，我們有一個 JavaScript 程式碼，其中輸入元素的 ID 為“disabledInputField”，並且“disabled”屬性設為 true。現在，任何 ID 設定為「disabledInputField」的輸入元素都將被停用，不允許使用者存取它。

Example

的中文翻譯為：

範例

在這個範例中，使用JavaScript停用了id和name都為"name"的輸入元素。要停用輸入元素，我們有一個名為「Submit」的按鈕，當點擊按鈕時呼叫一個名為"disablename()"的函數，並將"name"輸入元素的"disabled"屬性設為true。

<html>
   <head>
      <title>Example to disable the input element using JavaScript method</title>
      <script>
         function disableName() {
            document.getElementById("name").disabled = true;
         }
      </script>
   </head>
   <body>
      <h2 id="Welcome-to-Tutorialspoint"> Welcome to Tutorialspoint </h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone">
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>

方法三：使用CSS

在這個方法中，我們將使用CSS來停用輸入元素。停用輸入元素的CSS方法涉及使用CSS程式碼來樣式化停用的輸入元素，以便清楚地向使用者表明他們無法與其進行互動。

文法

以下是使用 CSS 停用輸入元素的語法，請使用以下程式碼 -

input[disabled] {
   opacity: 0.8;
   pointer-events: none;
}

在上面的程式碼中，我們有一個CSS程式碼，其中輸入元素具有設定為true的disabled屬性。在這裡，為了停用輸入元素，我們將不透明度設為0.8，並且將pointer-events設為none，因為這兩個CSS屬性都將使輸入元素被停用，並最終不允許使用者存取它。

Example

的中文翻譯為：

範例

在這個範例中，使用CSS停用了id和name為"phone"的輸入元素。為了停用輸入元素，我們使用了CSS代碼，將帶有"disabled"屬性的任何輸入元素的不透明度設為0.8，並將"pointer-events"屬性設為"none"。所有這些CSS屬性都使輸入元素變成停用狀態。

<!DOCTYPE html>
<html>
   <head>
      <title>Example to disable the input element using CSS method</title>
      <style>
         input[disabled] {
            opacity: 0.8;
            pointer-events: none;
         }
      </style>
   </head>
   <body>
      <h2 id="Welcome-to-Tutorialspoint"> Welcome to Tutorialspoint </h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone" disabled>
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>