Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

Day25-:disabled & :enabled 表單元素啟用與禁用的完美搭配

發表於 分類於 Disqus：

:disabled & :enabled

之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disabled，以及如何利用 :enabled 為啟用狀態設置樣式。



💠 可以使用 disabled 的元素

在了解基本用法之前，先看看哪些 HTML 元素可以被 disabled，進而應用 :disabled 來改變它們的樣式。大部分的表單元素都支持 disabled 屬性：

  • <fieldset>：禁用表單元素群組
  • <input>：禁用輸入框、勾選框、單選框
  • <textarea>：禁用多行文本區域
  • <select>：禁用下拉選單
  • <option>：禁用下拉選單中的選項
  • <button>：禁用按鈕




💠 :disabled 基本用法

語法

1
2
3
選擇器:disabled {
  屬性名: 屬性值;
}
  • 選中禁用的表單元素

範例

一起試試：［CODEPEN］

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" disabled>

  <label>興趣：</label>
  <label>
    <input type="checkbox" name="hobbies" value="reading" disabled> 閱讀
  </label>
  <label>
    <input type="checkbox" name="hobbies" value="sports" disabled> 運動
  </label>

  <label>性別：</label>
  <label>
    <input type="radio" name="gender" value="male" disabled> 男
  </label>
  <label>
    <input type="radio" name="gender" value="female" disabled> 女
  </label>

  <label for="country">國家：</label>
  <select id="country" name="country" disabled>
    <option value="taiwan">台灣</option>
    <option value="japan">日本</option>
    <option value="usa">美國</option>
  </select>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50" disabled></textarea>

  <button type="submit" disabled>送出</button>
</form>
1
2
3
4
5
6
7
input:disabled,
textarea:disabled,
select:disabled,
option:disabled,
button:disabled {
  background-color: #d1d1d1;
}

:disabled

如上所見，當表單元素處於 disabled 狀態時，背景顏色會變為灰色，不過上個章節 :checked 有講過，瀏覽器對複選框、單選框有自己內建的預設外觀，所以此顏色只會變成它預設的淺灰色，如要設置其他樣式可像上篇章節 :checked 一樣，自行客製複選框、單選框樣式，或是利用後面會講到的偽元素來客製樣式。



💠 :enabled 基本用法

與 :disabled 相對應的是 :enabled，它針對表單中的啟用元素。

語法

1
2
3
選擇器:enabled {
  屬性名: 屬性值;
}
  • 選中的是啟用的元素 (沒有 disabled)

範例

一起試試：［CODEPEN］

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="country">國家：</label>
  <select id="country" name="country">
    <option value="taiwan">台灣</option>
    <option value="japan">日本</option>
    <option value="usa">美國</option>
  </select>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>

  <button type="submit">送出</button>
</form>
1
2
3
4
5
6
7
8
9
input:enabled,
textarea:enabled,
select:enabled {
  background-color: cornsilk;
}

button:enabled {
  background-color: sienna;
}

:enabled

這個範例展示了啟用狀態下的表單元素樣式，<input>、<textarea>、<select> 都會有淺黃色的背景色，<button> 會是棕色，但是你可能會發現，其實不寫 :enabled 也能達到相同效果

1
2
3
4
5
6
7
8
9
input,
textarea,
select {
  background-color: cornsilk;
}

button{
  background-color: sienna;
}

兩種方式看起來的效果其實也會是一樣的，但其實還是有些許差異，

比方說，表單元素 <input> 為 disabled 狀態時，會呈現灰色

:enabled&:disabled

如果沒使用 :enabled 時，我們可以按 F12 打開開發人員工具，查看 <input> 的樣式，我們會發現，<input> 會以覆蓋的方式蓋掉原本的背景色

:enabled&:disabled

而 :enabled 只會用於啟用狀態，所以在 disabled 時不會有啟用狀態的樣式。



💠 實務應用：表單必填與按鈕禁用

一起試試：［CODEPEN］

在實際開發中，我們常常會根據表單的驗證狀態來控制按鈕的啟用與禁用，例如提交按鈕在所有欄位通過驗證後才可使用。

1
2
3
4
5
6
7
8
9
10
<form>
  <h1>個人資訊</h1>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="message">自我介紹：</label>
  <textarea id="message" name="message" rows="4" cols="50" required></textarea>

  <button type="submit" id="submit" disabled>送出</button>
</form>

CSS 樣式：表單欄位加上禁用、啟用樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  width: 100%;
  padding: 10px;
  background-color: black;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:enabled {
  background-color: sienna;
}

input:enabled,
textarea:enabled {
  background-color: cornsilk;
}

input:disabled,
textarea:disabled,
button:disabled{
  background-color: #d1d1d1;
}

JavaScript 驗證：姓名、介紹為必填欄位，兩個欄位填寫後才會啟用按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const nameInput = document.getElementById("name");
const messageInput = document.getElementById("message");
const submitButton = document.getElementById("submit");

function checkFormValidity() {
  if (nameInput.value.trim() !== "" && messageInput.value.trim() !== "") {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
}

nameInput.addEventListener("input", checkFormValidity);
messageInput.addEventListener("input", checkFormValidity);

沒有填寫欄位時，提交按鈕為 disabled 狀態

:disabled



填寫後驗證通過，啟用提交按鈕

:enabled

如此一來，就完成驗證表單囉！

💠 總結

:disabled 和 :enabled 是專門針對表單元素的禁用和啟用狀態進行樣式控制。透過這兩個選擇器，我們可以靈活地為表單元素設置不同的視覺效果，提升使用者的操作體驗。



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️