〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

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

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

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

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

UIHACK
編集長
UIHACK 編集長

解説

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

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

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

HTMLのinput type=”password”を使って、ウェブサイトのパスワード入力欄を伏字表示にする方法を説明しました。ユーザーがログイン時にパスワードを入力する際に、セキュリティを強化するための機能です。

input type=passwordについて解説

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

主な特徴

  1. セキュリティ強化
    type=”password”を使うことで、ユーザーが入力したパスワードが他の人に見えないようになります。入力内容が伏字になるため、セキュリティを向上させるのに重要です。
  2. フォームの作成
    ログインフォームアカウント作成フォームなど、パスワードを受け付ける際に使用します。

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

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

placeholder属性(ヒントの表示)

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

placeholder属性のない場合とある場合の比較


「パスワードを入力してください」が非表示

パスワード入力欄にテキストが表示されない


「パスワードを入力してください」が表示

パスワード入力欄に「パスワードを入力してください」と表示させることで、ユーザーがどのような情報を入力すべきかを理解しやすくなります。このテキストは、ユーザーが入力を始めると自動的に消えます。

maxlength属性(文字数の制限)

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


文字数の制限がない

ただし、セキュリティ上の観点から、パスワードの文字数制限は過度に厳しい場合、ユーザー体験を損なう可能性もあるため、慎重に設定する必要があります。


最大文字数が16文字に制限されます。

データベースやサーバーのリソースを節約するためや、入力内容の制限を行いたい場合に役立ちます。

pattern属性(正規表現)

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


入力の制限なし

制限をして無いため、英数字なんでも入力できる


入力の制限

“^[a-zA-Z0-9]{6,}$”という正規表現を指定しています。
この正規表現は、ユーザーが6文字以上の英字または数字のみを入力することを許可します。

正規表現についてのメモ

例えば、上記の^[a-zA-Z0-9]{6,}$という正規表現は、以下のような意味になります。

^ : 文字列の先頭から一致する必要があることを示します。
[a-zA-Z0-9] : 英字(大文字・小文字)または数字に一致することを示します。
{6,} : 直前の文字(英字または数字)が6回以上繰り返すことを示します。

つまり、この正規表現は、6文字以上英字または数字を入力する必要があることを意味します。

required属性(必須項目)について

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


必須項目なし

設定しない場合は、パスワード入力欄に記載なしでも送信される。


必須項目の作成

パスワード入力欄に何も入力せずにフォームを送信しようとした場合、ブラウザはフォームが不完全であると判断し、警告を表示します。これにより、重要な情報や必須項目の入力漏れを防ぐことができます。

input type=passwordで追加できる属性についてのまとめ

・placeholder属性は入力欄に初期表示のテキスト(ヒント)を指定します。
・maxlength属性は入力できる最大文字数を指定します。
・pattern属性はユーザーが入力する値が特定のパターンに一致するかどうかを検証できます。
・required属性は入力欄に必ず何らかの値を入力する必要があることを示すために使用されます。

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

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
編集長
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
編集長
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
編集長
UIHACK 編集長

解説

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

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


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

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

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

この章は、ウェブサイトのパスワード入力欄に目のアイコンを表示し、そのアイコンをクリックすると、パスワードが隠れたり見えたりする機能を作るためのものです。

大切な情報を守るためにも、この機能は大切ですよ。

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

UIHACK
編集長
UIHACK 編集長

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

本記事で学んだ事
  • パスワード入力欄を伏字表示にする方法
  • input type=passwordについて解説
  • パスワード表示・非表示のカスタマイズ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です