HTMLとCSSを使用したパスワードと再入力パスワードの実装方法

HTMLのコード例:

<form>
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" required>
  <label for="confirm-password">パスワード再入力:</label>
  <input type="password" id="confirm-password" name="confirm-password" required>
</form>

上記のコードでは、<input>要素のtype属性を「password」と指定することで、入力されたテキストが隠されるようになります。また、<input>要素にrequired属性を追加することで、フォームが送信される前にこのフィールドが入力されているかどうかを確認することができます。

CSSのコード例:

input[type="password"] {
  /* スタイルの指定例 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="password"]:invalid {
  /* バリデーションエラー時のスタイルの指定例 */
  border-color: red;
}

上記のCSSコードでは、input[type="password"]セレクタを使用してパスワードフィールドにスタイルを適用しています。例として、パディング、ボーダー、およびボーダーの角丸を指定しています。

さらに、input[type="password"]:invalidセレクタを使用して、バリデーションエラーが発生した場合にフィールドのボーダーカラーを赤に変更することができます。

これらのコード例を使用することで、ユーザーがパスワードを入力する際に簡単なバリデーションを行い、エラーを表示することができます。