HTML - disabled 屬性

HTML disabled 是一個布林屬性，可以應用於各種表單元素，使它們無法互動或無法編輯。

當元素被停用時，使用者無法對其進行聚焦、點選或更改，並且它不會包含在表單提交中。它可以用於以下元素：<input>、<fieldset>、<button>、<textarea>、<select>、<option> 和 <optgroup> 等。

語法

<tag disabled>

應用於

以下列出的元素允許使用 HTML disabled 屬性。

元素	描述
<input>	HTML <input> 標籤用於指定輸入欄位。
<textarea>	HTML <textarea> 標籤用於表示多行純文字編輯控制元件。
<button>	HTML <button> 標籤用於嵌入可點選按鈕。
<fieldset>	HTML <fieldset> 標籤用於在一個 Web 表單中對多個控制元件和標籤進行分組。
<select>	HTML <select> 標籤用於建立下拉列表以選擇專案。
<option>	HTML <option> 標籤用於命名下拉列表中的專案。
<optgroup>	HTML <optgroup> 用於在 select 元素中將相關的 option 元素組合在一起。

HTML disabled 屬性示例

下面的示例將說明 HTML disabled 屬性的用法，以及我們應該在哪裡以及如何使用此屬性！

停用 input 元素

在以下示例中，我們將使用 disabled 屬性和 input 欄位。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with input element.</p> 
   Text(disabled): 
   <input type="text" 
      placeholder="Disabled"
      disabled>
   <input type="text" 
      placeholder="Not disabled">
</body>

</html>

停用 button 元素

考慮另一種情況，我們將使用 disabled 屬性和 button 元素。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with button element.</p>
   <button disabled>Disabled</button>
   <button>Not Disabled</button>
</body>

</html>

停用 fieldset 元素

讓我們看看下面的示例，我們將使用 disabled 屬性和 fieldset 元素。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with fieldset element.</p>
   <fieldset disabled>
      <legend>Login Form</legend> 
      Username: 
      <input type="text" 
         placeholder="username">
      <br> 
         Password: 
      <input type="password" 
         placeholder="password">
      <br>
      <button>Login</button>
   </fieldset>
</body>

</html>

停用 select 元素

在這個例子中，我們將使用 disable 屬性停用整個 select 標籤。

<!DOCTYPE html>
<html>

<body>
<h1>Disabled Select Element</h1>
<form action="html/index.htm">
   <label for="fruits">Choose a fruit:</label>
   <select id="fruits" name="fruits" disabled>
      <option value="orange">Orange</option>
      <option value="lemon">Lemon</option>
      <option value="mango">Mango</option>
      <option value="pineapple">Pineapple</option>
   </select>
   <br><br>
   <input type="submit" value="Submit">
</form>

</body>
</html>

停用下拉選單中的 optgroup

在這個例子中，我們將使用 disabled 屬性停用 select 下拉選單中的一組選項。

<!DOCTYPE html>
<html>
<body>

<h1>The optgroup disabled attribute</h1>

<form action="html/index.htm">
  <label for="fruits">Choose a fruit:</label>
  <select name="fruits" id="fruits">
    <optgroup label="Citrus Fruits">
      <option value="orange">Orange</option>
      <option value="lemon">Lemon</option>
    </optgroup>
    <optgroup label="Tropical Fruits" disabled>
      <option value="mango">Mango</option>
      <option value="pineapple">Pineapple</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

停用下拉選單中的 option

在這個程式碼中，我們將使用 disable 屬性停用下拉列表中的一個選項。

<!DOCTYPE html>
<html>
<body>

<h1>Option disabled attribute</h1>

<form action="html/index.htm">
  <label for="fruits">Choose a car:</label>
  <select>
    <option value="volvo" disabled>Volvo</option>
    <option value="Maruti">Maruti</option>
    <option value="vw">VW</option>
    <option value="car98">car98</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

停用 textarea 元素

在這個例子中，我們將使用 disable 屬性停用一個 textarea 標籤。

<!DOCTYPE html>
<html>
<body>

    <h1>The textarea disabled attribute</h1>
    
    <textarea disabled rows="7" cols="20">
        At tutorialspoint you have access to multiple 
        courses to upskill your knowledge. We offer free tutorials
        in all web development technologies.
    </textarea>

</body>
</html>

啟用停用元素的指令碼

以下是一個例子，我們將使用 disabled 屬性和 input 標籤，並在點選按鈕時使用 javascript 啟用它。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Enable Text Input</title>
   <script>
      function enableInput() {
         document.getElementById("textInput").disabled = false;
      }
   </script>
</head>
<body>
   <h3>Click the button to enable text input</h3>
   <label for="textInput">Enter Text:</label>
   <input type="text" id="textInput" disabled>
   <button onclick="enableInput()">Enable Input</button>
</body>
</html>

支援的瀏覽器

屬性
disabled	是	是	是	是	是

html_attributes_reference.htm

列印頁面