使用 CSS 增強表單使用者體驗：即時回饋技術以實現更好的使用者交互

使用 CSS 偽類的即時表單回饋：一種使用者友善的方法

厭倦了笨拙的表單驗證訊息？ 讓我們使用 CSS 偽類來提升使用者體驗，以獲得即時、直覺的回饋。本文示範如何使用 CSS 建立更具回應性和使用者友善的表單。

入門：先決條件

本教學需要對 HTML 和 CSS 有基本的了解。 這就是您所需要的！

用於動態驗證的 CSS 偽類

我們將使用簡單的 HTML 表單元素和 CSS 來說明即時回饋。

初始 HTML 結構（簡化）：

<code class="language-html"><div>
  <label for="name">Name</label>
  <input type="text" id="name" required>
  </div>
  <div>
  <label for="email">Email</label>
  <input type="email" id="email" required>
  </div>
  <button type="submit">Submit</button>
</div></code>

初始 CSS 樣式（簡單）：

<code class="language-css">form {
    padding: 1rem;
    width: 50%;
    div {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        label {
            font-weight: bold;
            margin-bottom: 5px;
        }
        input {
            padding: 10px;
            border-radius: 5px;
            outline: 2px solid black;
        }
    }
    button {
        padding: 10px 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
}</code>

初始外觀：

現在，讓我們加入 CSS 偽類的魔力：

• :valid 和 :invalid: 這些根據 HTML5 約束（例如 required、type="email"）根據輸入是否有效提供即時回饋。

<code class="language-css">input:valid {
  outline-color: lightgreen;
}

input:invalid {
  outline-color: red;
}</code>

:valid 和 :invalid 實際操作：

• :user-valid 和 :user-invalid: 即使在瀏覽器的內建驗證啟動之前，它們也會根據使用者互動提供回饋。注意：瀏覽器對這些的支援尚未普及。

<code class="language-css">input:user-valid {
  outline-color: lightgreen;
}

input:user-invalid {
  outline-color: red;
}</code>

:user-valid 和 :user-invalid（說明性 - 檢查瀏覽器相容性）：

• :placeholder-shown: 當佔位符文字可見時，此目標為輸入欄位。結合 :valid 和 :not()，我們只能在使用者開始輸入後提供回饋。

<code class="language-css">input:not(:placeholder-shown):valid {
  outline-color: lightgreen;
}

input:not(:placeholder-shown):invalid {
  outline-color: red;
}</code>

:placeholder-shown 實際操作：

• :focus: 要在輸入過程中完善回饋並避免在使用者完全輸入資料之前立即突出顯示 :invalid，請使用 :focus:invalid。

<code class="language-html"><div>
  <label for="name">Name</label>
  <input type="text" id="name" required>
  </div>
  <div>
  <label for="email">Email</label>
  <input type="email" id="email" required>
  </div>
  <button type="submit">Submit</button>
</div></code>

:focus:invalid更精緻的體驗：

結論

透過策略性地使用 CSS 偽類，您可以建立提供清晰、即時回饋的表單，從而顯著增強使用者體驗。 嘗試使用這些技術來建立更直觀和用戶友好的介面。 在下面的評論中分享您的想法和其他 CSS 偽類想法！

以上是使用 CSS 增強表單使用者體驗：即時回饋技術以實現更好的使用者交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！