【コピペOK】htmlでパスワードの伏字を表示・非表示と切り替える方法について解説

本記事は、「ユーザーがパスワードを見たいときに、目のマークなどのアイコンで表示する方法が分からない」と思いつつ

UIHACK 編集長

・パスワードが伏字にならず、普通のテキストとして表示されてしまう。
・パスワード確認画面を作成する際に、正しく実装できない。
・パスワードの入力欄が見た目や使い勝手に問題がある。

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「パスワードを伏字にする方法」を「後半」ではよくある「目のマークアイコンなどを使ってパスワード」の表示を切り替える方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

パスワード入力欄を伏字表示にする方法

ホームページでよくあるパスワードを入力した際の、伏字でマスクする方法を解説します。

input type=”password”でパスワード入力欄を伏字表示にする方法は、HTMLのコードを使って、ユーザーがパスワードを入力する項目を伏字にする方法です。

UIHACK 編集長

例えば、ユーザーがウェブサイトにログインするときに、パスワードを入力するとき、その入力欄を伏字にすることで、他の人がパスワードを見ることができなくなります。パスワードを隠すことで、セキュリティを強化することができます。

以下のHTMLのコードを使うことで、パスワードを伏字にすることができます。

<form>
    <label for="password">パスワード：</label>
    <input type="password" id="password" name="password" placeholder="パスワードを入力してください">
    <input type="submit" value="送信">
</form>

【実行結果】パスワード入力欄を伏字表示

UIHACK 編集長

解説

このコードの中で、input要素のtype属性に“password”を指定することで、パスワード入力欄が伏字表示になります。また、label要素を使ってパスワード入力欄にラベルを付けることができます。

↓次の章で、input type=passwordについて詳しく解説します↓

input type=passwordについて解説

input type=”password”は、HTMLのinput要素の一種で、ウェブページのフォーム（入力欄）でパスワードを受け付ける際に使用される属性です。この属性を使うと、ユーザーが入力したパスワードが伏字（通常は黒丸やアスタリスク）に表示されるようになります。

主な特徴

input type=passwordで追加できる属性

input type=”password”には、以下のような追加できる属性があります。

入力欄に初期表示のテキスト（ヒント）を指定します。ユーザーが入力を始めると自動的に消えます。

maxlength属性は、input要素に対して指定することができる属性の1つで、入力欄に入力できる最大文字数を制限するために使用されます。つまり、この属性を指定することで、ユーザーが入力できる文字数を制御することができます。

pattern属性は、入力欄に入力できる内容を正規表現を用いて制限するために使用されます。つまり、この属性を使うことで、ユーザーが入力する値が特定のパターンに一致するかどうかを検証できます。

required属性は、input要素に対して指定することができる属性の1つで、入力欄に必ず何らかの値を入力する必要があることを示すために使用されます。つまり、この属性を指定することで、ユーザーがフォームを送信する前に、必須項目が未入力のままであれば、警告が表示するようになります。

パスワード表示・非表示のカスタマイズ

input type=”password”でのパスワード表示・非表示のカスタマイズには、JavaScriptを使用して要素の属性を切り替える方法が一般的です。具体的には、以下のような2つの方法で実現できます。

【完成デモ】①パスワード表示・非表示のカスタマイズ

HTML

<div class="password-container">
  <input type="password" id="passwordInput">
  <button id="showPasswordButton">表示</button>
  <p>↑表示をクリックする入力欄のテキストのマスクが解除。</p>
  <p>↑非表示をクリックする入力欄のテキストがマスクされます。</p>
</div>

UIHACK 編集長

解説

上記のコードでは、HTML部分でid属性を直接設定している代わりに、JavaScriptでgetElementByIdメソッドとaddEventListenerメソッドを使って要素を取得し、クリックイベントをリスナーに登録しています。

JavaScript

var showPasswordButton = document.getElementById("showPasswordButton");
showPasswordButton.addEventListener("click", togglePasswordVisibility);

function togglePasswordVisibility() {
  var passwordInput = document.getElementById("passwordInput");
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    showPasswordButton.textContent = "非表示";
  } else {
    passwordInput.type = "password";
    showPasswordButton.textContent = "表示";
  }
}

UIHACK 編集長

解説

JavaScriptのコードでは、“showPasswordButton”というIDを持つボタン要素を取得し、addEventListenerメソッドを使ってボタンがクリックされたときにtogglePasswordVisibility関数を呼び出すように設定しています。togglePasswordVisibility関数は先ほどと同じく、パスワードの表示・非表示を切り替える機能を実装しています。

【完成デモ】②パスワード表示・非表示のカスタマイズ

HTML

<div class="password-container">
  <input type="password" id="passwordInput" placeholder="パスワードを入力してください">
  <span class="toggle-password" onclick="togglePasswordVisibility()">&#x1f441;</span>
</div>

CSS

.password-container {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

JavaScript

function togglePasswordVisibility() {
  var passwordInput = document.getElementById("passwordInput");
  var toggleIcon = document.querySelector(".toggle-password");

  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    toggleIcon.textContent = "🙈"; // 眼のアイコンに表示を切り替える絵文字
  } else {
    passwordInput.type = "password";
    toggleIcon.textContent = "👁️"; // 目のアイコンに表示を切り替える絵文字
  }
}

UIHACK 編集長

解説

togglePasswordVisibilityという関数を定義しています。この関数は、目のアイコンがクリックされると呼び出されます。関数の中で、passwordInputという変数にpasswordInputというIDを持つ要素（パスワード入力欄）を取得し、toggleIconという変数に目のアイコンを取得します。

パスワード入力欄のtype属性を判定して、もし“password”（パスワードが非表示）なら、type属性を”text”に変更し、目のアイコンの絵文字も🙈（眼のアイコン）に変更します。

それ以外の場合は、“text”以外（パスワードが表示されている）なので、type属性を”password”に戻し、目のアイコンの絵文字も👁️（目のアイコン）に変更します。

結果として、目のアイコンをクリックすると、パスワードの表示・非表示が切り替わるようになります。

パスワードの伏字を表示・非表示と切り替える方法についてのまとめ

UIHACK 編集長

今回は、パスワードを伏字にする方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「パスワード入力欄を伏字表示にする方法」を読む↑

HTMLで年と月を選択する入力欄を実装したい方はぜひ以下の記事もご覧ください。

2023年7月24日 【コピペ】はじめてのinput type=’month’の使い方！日付・カレンダー作成時のコツも解説

ラジオボタンの初期値を設定してもcheckedが効かない経験がある方はぜひ以下の記事もご覧ください。

2023年7月25日 【現役プログラマーが解説】HTMLでラジオボタンでchecked属性の選択値を取得する方法