password入力は「中身を隠しながら文字を受け取るための入力欄」
type="password" の入力欄は、 「ユーザーに文字を入力してもらうけれど、画面上では中身を見えなくする」 ための特別なテキスト入力です。
ログインフォーム 会員登録フォーム パスワード変更画面
こういう「他人に見られたくない文字列」を扱う場面で必ず登場します。
password入力の基本形と“隠れるけど送られる”というポイント
見た目は●●●、中身はちゃんと文字列
いちばんシンプルな書き方はこれです。
<input type="password" name="password">
フォームに入れるとこうなります。
<form action="/login" method="post">
<p>ユーザー名：</p>
<input type="text" name="username">
<p>パスワード：</p>
<input type="password" name="password">
<button type="submit">ログイン</button>
</form>
ユーザーが「secret123」と入力すると、 画面上は ●●●●●●●● のように隠れて見えます。
でも、送信されるときはちゃんと
username = "MONO"password = "secret123"
という形で文字列として送られます。
重要なのは「見た目だけ隠れているが、値は普通の文字列として扱われる」ということ。 暗号化されて送られるわけではないので、 通信の安全性は HTTPS（SSL/TLS）側の話になります。
password入力で必ず付けるべき属性
name は「送信されるときのキー名」
<input type="password" name="password">
ここでの name="password" が、 サーバー側で受け取るときのキーになります。
name を付け忘れると、 パスワード欄があっても送信データに含まれません。
ログインフォームでこれをやると、 「パスワードが常に空で送られてくる」という悲劇が起きます。
autocomplete を意識する
ブラウザは、 ログインフォームのパスワードを自動入力してくれることがあります。
それを制御したいときは autocomplete を使います。
<input
type="password"
name="password"
autocomplete="current-password"
>
ログイン用 → current-password 新しいパスワード設定用 → new-password
と書くと、ブラウザが「これは何のパスワード欄か」を理解しやすくなります。
password入力のバリデーションを HTML でざっくりかける
required と minlength / maxlength
<input
type="password"
name="password"
required
minlength="8"
maxlength="64"
>
required 空のまま送信しようとすると、ブラウザが止めてくれます。
minlength / maxlength 文字数の最低・最大を制限できます。
「8 文字以上にしてください」 「64 文字までにしてください」
といったルールを、HTML だけである程度表現できます。
pattern で「複雑さ」を少しだけ指定する
<input
type="password"
name="password"
required
pattern="(?=.*[0-9])(?=.*[A-Za-z]).{8,}"
>
これは「数字と英字を両方含む 8 文字以上」という例です。 正規表現なので少し難しいですが、 「最低限の複雑さ」を HTML 側でチェックすることもできます。
ただし、本当に重要なバリデーションは必ずサーバー側でも行うべきです。 フロント側のチェックは“ユーザーへのガイド”くらいに考えてください。
JavaScript と password入力：値を扱うときの注意
値は普通に input.value で取れる
HTML：
<input type="password" id="password" name="password">
<button type="button" id="check">チェック</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#password");
const button = document.querySelector("#check");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = input.value; // ← 中身は普通の文字列
if (value.length < 8) {
result.textContent = "パスワードは 8 文字以上にしてください。";
} else {
result.textContent = "OK な長さです。";
}
});
input.value で、 画面上では隠れているパスワードの中身を普通に取得できます。
コンソールログや画面に“むやみに表示しない”
開発中にやりがちなのがこれです。
console.log(input.value);
ブラウザのコンソールにパスワードが丸見えになります。
学習中ならまだしも、 本番環境でこれをやると「ログにパスワードが残る」危険な状態になります。
password入力の値は「扱いは普通の文字列だけど、表示やログ出力には細心の注意を払う」 という意識を持っておくのが、エンジニアとして大事な感覚です。
「表示／非表示切り替えボタン」を作る定番パターン
type を password ↔ text で切り替える
HTML：
<input type="password" id="password" name="password">
<button type="button" id="toggle">表示</button>
JavaScript：
const input = document.querySelector("#password");
const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", () => {
const isHidden = input.type === "password";
input.type = isHidden ? "text" : "password";
toggle.textContent = isHidden ? "非表示" : "表示";
});
これで、
- 最初は
type="password"→ ●●●●● と隠れる - 「表示」ボタンを押すと
type="text"→ 中身が見える - もう一度押すと
type="password"に戻る
という UI が作れます。
ここでも、password入力の中身は「ただの文字列」であり、 見せるか隠すかは type の切り替えで制御しているだけ ということが分かります。
password入力を使うか迷ったときの判断基準
「この文字列は“他人に見られたくない”か？」
自分にこう聞いてみてください。
「ここで入力してもらう文字列は、 画面上で丸見えだと困るものか？」
YES → type="password" NO → type="text" や他の type
ログインパスワード 新しいパスワード クレジットカードのセキュリティコード（ただし本来は専用 UI が望ましい）
こういったものは、 画面上で隠すのが前提なので password入力が自然です。
逆に、 名前・検索キーワード・タイトルなどは 隠す必要がないので text入力で十分です。
初心者として「password入力」で絶対に掴んでほしいこと
type="password" の input は、 「中身を画面上では隠しながら、文字列としてパスワードを受け取るための入力欄」 です。
name が送信時のキー名になる 見た目は ●●● だが、中身は普通の文字列として送られる required / minlength / pattern などで最低限のバリデーションをかけられる JavaScript では input.value で値を扱えるが、ログや表示には注意が必要 type を切り替えることで「表示／非表示ボタン」も作れる
あなたが password入力を書くときに、 「この欄は“他人に見られたくない文字列”を扱う場所で、その中身は普通の文字列として処理される」 という感覚をちゃんと持てていたら、 もう password入力を“ただの黒丸入力欄”ではなく、 “セキュリティと UX の両方を意識して設計すべき重要なインターフェース”として扱えている状態です。