フォーム入力
パスワード強度メーター
表示/非表示トグル付きのパスワード欄。長さと文字種の多さから強度を判定し、弱い/普通/強いのバーとラベルがリアルタイムに変化する。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
強度は「長さ（8/12文字）」と「文字種の多さ（小文字・大文字・数字・記号）」から0〜4のスコアを出し、4本のセグメントと色（朱→黄土→緑）で示します。色だけでなくラベル文字でも段階を伝えています。表示切替は type を text/password で入れ替え、aria-pressed も更新します。
コード（コピーして使えます）
<form class="ps-form" novalidate>
<label class="ps-label" for="ps-input">パスワード</label>
<div class="ps-field">
<input
id="ps-input"
class="ps-input"
type="password"
placeholder="8文字以上を推奨"
autocomplete="new-password"
aria-describedby="ps-text"
/>
<button class="ps-toggle" id="ps-toggle" type="button" aria-label="パスワードを表示" aria-pressed="false">
<svg class="ps-eye" id="ps-eye-on" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
<svg class="ps-eye" id="ps-eye-off" style="display:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
</button>
</div>
<div class="ps-meter" aria-hidden="true">
<span class="ps-seg" data-i="0"></span>
<span class="ps-seg" data-i="1"></span>
<span class="ps-seg" data-i="2"></span>
<span class="ps-seg" data-i="3"></span>
</div>
<p class="ps-text" id="ps-text" aria-live="polite">パスワードを入力してください</p>
</form>