"password" 型の <input> 要素は、パスワードを安全に入力する方法を提供します。この要素はプレーンテキストの 1 行編集コントロールとして表示され、そのテキストは読み取られることがないように、1 つ 1 つの文字がアスタリスク ("*") やドット ("•") のような記号に置き換えられ、隠されます。この文字はユーザーエージェントOS によって変わります。

詳細な入力プロセスの動作は、ブラウザーによって異なっている場合があります。例えば、モバイル端末ではしばしば、ユーザーが思ったとおりのキーを押したかどうかを確かめることができるように、入力した文字を、隠す前に一瞬だけ表示します。これは特に、キーのサイズが小さく、押し間違いが起こりやすい、仮想キーボードの場合に役立ちます。

パスワードのような機密情報が含まれているフォーム(ログインフォームなど)は、HTTPS で送信されるべきです。現在では多くのブラウザーで、安全ではないログインフォームの場合に警告を行う仕組みが実装されています。詳細は安全でないパスワードを参照してください。

パスワードを表す DOMString または空
イベント change 及び input
対応している共通属性 autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, size
IDL 属性 selectionStartselectionEndselectionDirection、及び value
メソッド select(), setRangeText(), setSelectionRange()

value 属性は、パスワードを入力するために使われているテキスト編集コントロールの、現在の内容である DOMString を格納します。ユーザーが何も入力していない場合、この値は空文字列 (" ") です。required プロパティが指定されている場合、パスワード編集ボックスが妥当となるためには、空文字列以外の値を含まなければなりません。

pattern 属性が指定されている場合、"password" コントロールの内容は、その値が検証をパスした場合のみ、妥当とみなされます。詳細は Validation を参照してください。

改行文字の LF (U+000A) と CR (U+000D) は "password" の値には許容されません。パスワードコントロールに値がセットされるとき、LF 及び CR は値から取り除かれます。

パスワード入力欄の使用

パスワード入力ボックスは通常、他のテキスト入力ボックスのように動作します。主な違いは、ユーザーの近くにいる人がパスワードを読み取ることを防ぐために、その内容を隠すことです。

シンプルなパスワード入力欄

以下は最も基本的なパスワード入力欄で、<label> 要素を使ったラベルとともに設置されています。

<label for="userPassword">Password: </label>
<input id="userPassword" type="password">

オートコンプリートを許可する

パスワードを自動的に入力するため、ユーザーのパスワードマネージャを許可するには、autocomplete 属性を指定します。パスワードの場合、通常は次のいずれかの値をとります。

"on"
ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可します。これは、"current-password" あるいは"new-password" を使用するほど有益ではありません。
"off"
ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可しません。いくつかのソフトウェアはこの値を無視しますが、それは通常、ユーザーの安全なパスワードの実践を維持する能力を、阻害するものであることに注意してください。
"current-password"
ブラウザー、あるいはパスワードマネージャがサイトのための現在のパスワードを入力することを許可します。この値はブラウザー、あるいはパスワードマネージャに、そのサイトの既知のパスワードを自動的に入力させ、新しいパスワードを提案するものではないもので、"on" よりも多くの情報を提供します。
"new-password"
ブラウザー、あるいはパスワードマネージャが、そのサイトの新しいパスワードを自動的に入力することを許可します。これは「パスワードの変更」や「新規ユーザー」フォームの、ユーザーに新しいパスワードを求める入力欄で使われます。新しいパスワードは、パスワードマネージャによって、複数の方法で生成される場合があります。単に新しく提示されるパスワードで埋めるかもしれませんし、あるいは新しいパスワードを生成するインターフェイスを、ユーザーに見せるかもしれません。
<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password">

パスワードを必須にする

ユーザーのブラウザーに対し、フォームの送信前に、パスワード欄が妥当な値を持っていなければならないことを伝えるためには、ただ required 論理属性を指定するだけです。

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required>
<input type="submit" value="Submit">

入力モードを指定する

推奨する、または必須となるパスワードの構文ルールが、標準キーボードよりも、代替となるテキスト入力インターフェースから恩恵を受ける場合、特定のものを要求するために inputmode 属性を使用することができます。この最も明快な用途は、 PIN のようにパスワードが数字で構成されていることを必要とする場合です。例えば、仮想キーボードを持つモバイル端末では、パスワードの入力をより簡単にするため、フルキーボードの代わりに、数字のキーパッドレイアウトに切り替えることを選択するかもしれません。 PIN が1回限りの使用であれば、 autocomplete 属性を off に設定してサジェストが保存されないようにしてください。

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric">

長さの要件を設定する

普通、minlength 属性や maxlength 属性を使って、許容する最小の長さと最大の長さをパスワードに適用することができます。この例では、直前の例を拡張して、ユーザーの PIN が 4 〜 8文字でなければならないことを指定しています。size 属性は、パスワード入力コントロールが 8 文字分の幅であることを保証するために使用されています。

<label for="pin">PIN:</label>
<input id="pin" type="password" inputmode="numeric" minlength="4"
       maxlength="8" size="8">

テキストを選択する

他のテキスト入力コントロールのように、 select() メソッドを使って、パスワード欄のすべてのテキストを選択することができます。

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12">
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = function() {
  document.getElementById("userPassword").select();
}

結果

また、selectionStartselectionEnd を使って、コントロールの文字がどの範囲で選択されているかを取得または設定することができ、selectionDirection を使って、どの方向に選択が発生したのか(あるいは広げようとしているのか。プラットフォームに依存します。詳細は各ドキュメントを参照してください)を知ることができます。しかしながら、与えられるテキストは隠されており、その有用性は幾分か制限されています。

検証

もしアプリケーションが文字セットの制限を有している場合、あるいは入力されたパスワードの実際の内容について、他の何らかの要件がある場合には、pattern 属性を使って、パスワードがそれらの要件に合致しているか自動的に確認するための正規表現を設定することができます。

この例では、4 〜 8 文字の 16 進数の数字のみが妥当です。

<label for="hexId">Hex ID: </label>
<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
       title="Enter an ID consisting of 4-8 hexadecimal digits"
       autocomplete="new-password">

disabled

この論理属性は、そのパスワード欄がやり取りに利用できないことを示します。また、無効な入力欄の値は、フォームとともに送信されません。

社会保障番号を要求する

この例では、妥当なアメリカ合衆国の社会保障番号の形式に合致する入力のみが受け付けられます。これらの数字はアメリカ合衆国において、税や個人の識別を目的として使われており、その形式は "123-45-6789" です。各種、それぞれのグループ内でどのような値が許可されているかについてのルールも存在しています。

HTML

<label for="ssn">SSN:</label>
<input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12"
    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
    required autocomplete="off">
<br>
<label for="ssn">Value:</label>
<span id="current"></span>

ここでは pattern を使って、入力される値を、正当な社会保障番号を示す文字列に制限しています。明らかに、この正規表現は、妥当な SSN であることを保証していません(社会保障局のデータベースにアクセスしているわけではないので)が、その番号が SSN になり得るものであることは保証しています。一般に、値が妥当になり得ないことを避けています。加えて、3 つの数字のグループがスペース、ダッシュ ("-") で区切る、あるいは区切らないことを許容しています。

inputmode"numeric" にセットされ、より入力しやすくするために、仮想キーボードを持つ端末が数字キーパッドレイアウトに切り替えることを支援しています。minlengthmaxlength がそれぞれ 9 と 12 にセットされ、値が 9 〜 12 文字 (前者はグループ間の区切り文字無し、後者は有り) であることを要件としています。 required 属性は、このコントロールが値を持っていなければならないことを示すために使われています。最後に、 autocomplete"off" にセットされており、これはまったくパスワードではないので、パスワードマネージャーが値をセットしようとすることを回避しています。

JavaScript

これは実にシンプルなコードで、入力された SSN を見られるように、画面に表示するためのものです。これは明らかに、パスワード欄の目的を損ねるものですが、pattern を試すには役立ちます。

var ssn = document.getElementById("ssn");
var current = document.getElementById("current");

ssn.oninput = function(event) {
  current.innerHTML = ssn.value;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="password"> の定義
現行の標準 初回定義
HTML 5.1
<input type="password"> の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 ?1221
Special handling of password inputs in insecure login pages なし ?52 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? あり ?4 あり あり ?
Special handling of password inputs in insecure login pages なし なし ?52 なし なし ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, sii
最終更新者: mfuji09,