CSS 偽類 - :required

CSS :required 偽類選擇具有 required 屬性的表單元素。

此屬性使元素成為必填欄位，這意味著使用者必須在提交表單之前為其輸入值。

語法

:required {
   /* ... */
}

CSS :required 示例

這是一個演示簡單登入表單的示例，其中包含必填欄位，以便使用者知道他們需要輸入哪些資訊才能提交表單 -

<html>
<head>
<style>
   .form-container {
      width: 300px;
      margin: 0 auto;
   }
   input:required:invalid {
      border: 2px solid red;
   }
   label {
      display: block;
      margin-top: 10px;
   }
   .submit-conatiner {
      margin-top: 10px;
   }
   button {
      background-color: violet;
      padding: 10px;
      border: none;
   }
</style>
</head>
<body>
   <div class="form-container">
      <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" >

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" >

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>

      <div class="submit-conatiner"><button type="submit">Submit</div>
      </form>
   </div>
</body>
</html>

列印頁面