HTML・CSS・JavaScriptでパスワード入力欄を実装する方法｜安全性とユーザビリティを両立するテクニック

Webフォームにおいて「パスワード入力欄」は非常に重要な役割を担っています。ユーザー情報を守る入り口であるため、見た目のわかりやすさとセキュリティのバランスが求められます。本記事では、HTML・CSS・JavaScriptを使ってパスワード入力欄を作成する方法について詳しく解説します。基本的な作り方から、見やすく便利なUIの設計、そしてよくある「パスワードの表示／非表示切り替え」機能の実装まで、実践的な内容をお届けします。

HTMLで基本的なパスワード入力欄を作成する

HTMLでは、<input>タグにtype="password"を指定することでパスワード入力欄を作成できます。以下はその基本的な例です。

<form>
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" required>
  <button type="submit">ログイン</button>
</form>

このように設定すると、ユーザーが入力した文字は「●」や「*」で表示され、第三者に見えにくくなります。また、required属性を加えることで、未入力の場合にエラーが出るようになります。

CSSでパスワード欄の見た目を整える

次に、CSSを使って見た目を整えていきましょう。ユーザーにとって見やすく、クリックしやすいフォーム設計は非常に重要です。

form {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

input[type="password"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  border: 1px solid #aaa;
  border-radius: 5px;
}

CSSで整えることで、視認性と操作性がアップします。とくにパスワード入力欄は間違えやすいので、フォーカス時の枠線の色を変えるなどの工夫もおすすめです。

JavaScriptでパスワードの表示／非表示を切り替える

最近のWebサービスでは、パスワードの表示・非表示を切り替えられる機能が一般的になっています。JavaScriptを使ってこの機能を実装してみましょう。

HTMLにトグルボタンを追加

<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
<button type="button" id="togglePassword">表示</button>

JavaScriptの実装

const passwordField = document.getElementById('password');
const toggleButton = document.getElementById('togglePassword');

toggleButton.addEventListener('click', function () {
  const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordField.setAttribute('type', type);

  this.textContent = type === 'password' ? '表示' : '非表示';
});

このスクリプトでは、ボタンをクリックするたびにtype属性を切り替えることで、入力文字の表示・非表示を制御しています。ボタンのラベルも「表示」「非表示」に自動で変わるので、ユーザーにとってもわかりやすい仕様です。

ユーザビリティ向上の工夫：アイコンの使用

さらに、テキストボタンではなく目のアイコンなどを使うと、より直感的なインターフェースになります。Font Awesomeなどのアイコンライブラリを活用すると、次のように実装できます。

<!-- CDNの読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="password-wrapper">
  <input type="password" id="password">
  <i class="fa-solid fa-eye" id="toggleIcon"></i>
</div>
.password-wrapper {
  position: relative;
}

#toggleIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}
const passwordInput = document.getElementById('password');
const toggleIcon = document.getElementById('toggleIcon');

toggleIcon.addEventListener('click', () => {
  const isPassword = passwordInput.getAttribute('type') === 'password';
  passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
  toggleIcon.classList.toggle('fa-eye');
  toggleIcon.classList.toggle('fa-eye-slash');
});

このように、目のアイコンが変化することで、ユーザーは今パスワードが見えているのかどうかを一目で確認できます。

パスワードのバリデーション（強度チェック）

セキュリティ向上のために、JavaScriptを使ってパスワードの強度チェック（バリデーション）を行うことも推奨されます。

<input type="password" id="password" placeholder="8文字以上で入力してください">
<p id="passwordStrength"></p>
const strengthText = document.getElementById('passwordStrength');

passwordInput.addEventListener('input', () => {
  const value = passwordInput.value;
  if (value.length < 8) {
    strengthText.textContent = "弱い（8文字未満）";
    strengthText.style.color = "red";
  } else if (!/[A-Z]/.test(value) || !/[0-9]/.test(value)) {
    strengthText.textContent = "普通（大文字・数字が必要）";
    strengthText.style.color = "orange";
  } else {
    strengthText.textContent = "強い";
    strengthText.style.color = "green";
  }
});

リアルタイムでパスワードの強さを表示することで、ユーザーが安全なパスワードを作成する手助けになります。

パスワード入力欄でよくあるミスとその対策

入力欄が複数ある場合の確認チェック

パスワード再入力欄がある場合、一致確認も必要です。

const confirmPassword = document.getElementById('confirm-password');

confirmPassword.addEventListener('input', () => {
  if (passwordInput.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity("パスワードが一致しません");
  } else {
    confirmPassword.setCustomValidity("");
  }
});

プレースホルダーだけに頼らないラベル設計

プレースホルダーだけを表示し、ラベルを省略するとアクセシビリティが下がることがあります。必ず<label>タグも使うようにしましょう。

まとめ

本記事では、HTML・CSS・JavaScriptを使ったパスワード入力欄の作成方法について解説しました。シンプルなフォームの作成から、JavaScriptを使った表示・非表示切り替え、強度チェック、さらにはアイコンによるUI改善まで、多くの実践的なテクニックをご紹介しました。
ユーザーにとって使いやすく、かつセキュリティも高められるようなフォーム設計を意識することが、信頼性の高いWebサイトへの第一歩です。今後の実装にぜひ活かしてください。

タイトルとURLをコピーしました