HTML disabled屬性用法及代碼示例

HTML中的Disabled屬性指示元素是否被禁用。如果設置了此屬性，則禁用該元素。通常使用grayed-out文本繪製Disabled屬性。如果該元素被禁用，則它不會響應用戶操作，因此無法獲得焦點。這是一個布爾屬性。

用法：它可以用於以下元素：<按鈕>，<輸入>，<選項>，<選擇>，<文本區域>，<字段集>和<選擇組>。
用法:

<tag disabled></tag>

<按鈕>：

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
          
        <!--A disabled button-->
        <button type="button" disabled>Click Me!</button> 
    </body>  
</html>

輸出：

<input>：當disabled屬性存在時，它指定輸入被禁用。禁用的入侵是無法使用且無法點擊的。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled input-->
        <label>Input:
            <input type="text" name="value" value =  
              "This input field is disabled" disabled> 
        </label> 
    </body>  
</html>

輸出：

<option>：當disabled屬性存在時，它指定選項字段被禁用。禁用的選項不可用且不可單擊。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled input-->
        <p>Volvo is disabled.</p> 
        <select> 
             <option value="volvo" disabled>Volvo</option> 
             <option value="saab">Saab</option> 
             <option value="vw">VW</option> 
             <option value="audi">Audi</option> 
        </select><br> 
          
    </body>  
</html>

輸出：

<select>：存在disabled屬性時，它指定select字段已禁用。禁用的選擇不可使用且不可單擊。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled input-->
        <p>This select field is disabled.</p> 
        <select disabled> 
             <option value="binary">Binary Search</option> 
             <option value="linear">Linear Search</option> 
             <option value="interpolation"> 
              Interpolation Search 
             </option> 
        </select> 
    </body>  
</html>

輸出：

<textarea>：存在禁用屬性時，它指定禁用textarea字段。禁用的文本區域不可用且不可單擊。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled textarea-->
        <textarea disabled> 
            This textarea field is disabled. 
        </textarea> 
    </body>  
</html>

輸出：

<fieldset>：存在disabled屬性時，它指定禁用該字段集。禁用的字段集不可用且不可單擊。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled fieldset-->
        <p>This field set is disabled.</p> 
        <fieldset disabled> 
          Name:<input type="text"><br> 
        </fieldset> 
    </body>  
</html>

輸出：

<optgroup>：存在disabled屬性時，它指定optgroup被禁用。禁用的optgroup無法使用和不可點擊。

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>HTML disabled Attribute</title>  
    </head>  
    <body style = "text-align:center">     
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>HTML disabled Attribute</h2> 
  
        <!--A disabled optgroup-->
        <select> 
          <optgroup label="German Cars" disabled> 
            <option value="mercedes">Mercedes</option> 
            <option value="audi">Audi</option> 
          </optgroup> 
        </select> 
    </body>  
</html>

輸出：

支持的瀏覽器：禁用屬性支持的瀏覽器如下：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自Vishal Chaudhary 2大神的英文原創作品 HTML | disabled Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。