使用 CSS 偽類的實(shí)時(shí)表單反饋：一種用戶友好的方法

厭倦了笨拙的表單驗(yàn)證消息？ 讓我們使用 CSS 偽類來提升用戶體驗(yàn)，以獲得即時(shí)、直觀的反饋。本文演示了如何使用 CSS 創(chuàng)建更具響應(yīng)性和用戶友好的表單。

入門：先決條件

本教程需要對(duì) HTML 和 CSS 有基本的了解。 這就是您所需要的！

用于動(dòng)態(tài)驗(yàn)證的 CSS 偽類

我們將使用簡(jiǎn)單的 HTML 表單元素和 CSS 來說明實(shí)時(shí)反饋。

初始 HTML 結(jié)構(gòu)（簡(jiǎn)化）：

<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>

初始 CSS 樣式（簡(jiǎn)化）：

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;
    }
}

初始外觀：

現(xiàn)在，讓我們添加 CSS 偽類的魔力：

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

input:valid {
  outline-color: lightgreen;
}

input:invalid {
  outline-color: red;
}

:valid 和 :invalid 實(shí)際操作：

• :user-valid 和 :user-invalid: 即使在瀏覽器的內(nèi)置驗(yàn)證啟動(dòng)之前，它們也會(huì)根據(jù)用戶交互提供反饋。注意：瀏覽器對(duì)這些的支持尚未普及。

input:user-valid {
  outline-color: lightgreen;
}

input:user-invalid {
  outline-color: red;
}

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

• :placeholder-shown: 當(dāng)占位符文本可見時(shí)，此目標(biāo)為輸入字段。結(jié)合 :valid 和 :not()，我們只能在用戶開始輸入后提供反饋。

input:not(:placeholder-shown):valid {
  outline-color: lightgreen;
}

input:not(:placeholder-shown):invalid {
  outline-color: red;
}

:placeholder-shown 實(shí)際操作：

• :focus: 要在輸入過程中完善反饋并避免在用戶完全輸入數(shù)據(jù)之前立即突出顯示 :invalid，請(qǐng)使用 :focus:invalid。

<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>

:focus:invalid更精致的體驗(yàn)：

結(jié)論

通過策略性地使用 CSS 偽類，您可以創(chuàng)建提供清晰、即時(shí)反饋的表單，從而顯著增強(qiáng)用戶體驗(yàn)。 嘗試使用這些技術(shù)來構(gòu)建更直觀和用戶友好的界面。 在下面的評(píng)論中分享您的想法和其他 CSS 偽類想法！

以上是使用 CSS 增強(qiáng)表單用戶體驗(yàn)：實(shí)時(shí)反饋技術(shù)以實(shí)現(xiàn)更好的用戶交互的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！