<h3>회원가입 양식</h3>

<form id="myForm">
  <table class="form-table">
    <tbody>
      <tr>
        <th><label for="email">이메일</label></th>
        <td>
          <input type="email" id="email" name="email" required>
          <div class="error">이메일은 필수입니다. 이메일을 올바르게 입력해 주세요</div>
          <div class="valid">✓</div>
        </td>
      </tr>
      <tr>
        <th><label for="password">비밀번호</label></th>
        <td>
          <input type="password" id="password" name="password" minlength="8" required>
          <div class="error">비밀번호는 필수입니다. 또한 8자리 이상이어야 합니다.</div>
          <div class="valid">✓</div>
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="가입하기">
</form>

<p>CSS의 :user-invalid 가상 선택자를 사용하면 네이티브 밸리데이션을 통과하지 못한 폼과 필드에 커스텀 스타일을 매길 수 있습니다.</p>
<p>:invalid 가상 선택자와 달리 사용자가 입력 시도를 한 뒤에야 상태가 결정됩니다.</p>

:user-invalid {
  border: 1px solid red;
}

:user-invalid + .error {
  display: block;
}

.valid {
  color: green;
  display: none;
}

:user-valid ~ .valid {
  display: inline-block;
}

/* 이하 페이지 구성용 CSS */
form {
  padding: 5px;
}
.form-table {
  border-collapse: collapse;
  & tr {
    border-bottom: 1px solid #ddd;
  }
  & th, & td {
    padding: 5px;
    vertical-align: top;
  }
  & th {
    text-align: right;
  }
  
  margin-bottom: 10px;
}

.error {
  color: red;
  display: none;
}