<input type="password">
<input>
要素の password
型は、パスワードを安全に入力する方法を提供します。この要素はプレーンテキストの 1 行編集コントロールとして表示され、そのテキストは読み取られることがないように、1 つ 1 つの文字がアスタリスク ("*") やドット ("•") のような記号に置き換えられ、隠されます。この文字はユーザーエージェントや OS によって変わります。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
詳細な入力プロセスの動作は、ブラウザーによって異なっている場合があります。例えば、モバイル端末ではしばしば、ユーザーが思ったとおりのキーを押したかどうかを確かめることができるように、入力した文字を、隠す前に一瞬だけ表示します。これは特に、キーのサイズが小さく、押し間違いが起こりやすい、仮想キーボードの場合に役立ちます。
パスワードのような機密情報が含まれているフォーム (ログインフォームなど) は、 HTTPS で送信するべきです。現在では多くのブラウザーで、安全ではないログインフォームの場合に警告を行う仕組みが実装されています。詳細は安全でないパスワードを参照してください。
値 | パスワードを表す DOMString 、または空欄 |
イベント | change (en-US) および input |
対応している共通属性 | autocomplete , inputmode , maxlength , minlength , pattern , placeholder , readonly , required , size |
IDL 属性 | selectionStart , selectionEnd , selectionDirection , value |
メソッド | select() , setRangeText() , setSelectionRange() |
値
value
属性は、パスワードを入力するために使われているテキスト編集コントロールの、現在の内容である DOMString
を格納します。ユーザーが何も入力していない場合、この値は空文字列 (" "
) です。required
プロパティが指定されている場合、パスワード編集ボックスが妥当となるためには、空文字列以外の値を含まなければなりません。
pattern
属性が指定されている場合、"password"
コントロールの内容は、その値が検証をパスした場合のみ、妥当とみなされます。詳細は Validation を参照してください。
改行文字の LF (U+000A) と CR (U+000D) は "password"
の値には許容されません。パスワードコントロールに値がセットされるとき、LF 及び CR は値から取り除かれます。
追加の属性
型に関係なくすべての <input>
要素を操作する属性に加え、 password
型の入力欄は次の属性にも対応しています。
属性 | 説明 |
---|---|
maxlength |
値が取りうる UTF-16 文字単位での最大長 |
minlength |
妥当と判断される最小文字数 |
pattern |
妥当と判断されるために、入力欄の内容が一致する必要がある正規表現 |
placeholder |
空欄の時に入力欄に表示される入力例の値 |
readonly |
入力欄の内容を読み取り専用にするかどうかを示す論理属性 |
size |
入力欄の長さを何文字分にするかを表す数値 |
maxlength
ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 maxlength
が指定されていないか、無効な値が指定されていると、パスワード入力欄には最大文字数が設定されません。この値は minlength
の値以上である必要もあります。
フィールドに入力されたテキストの長さが UTF-16 コード単位で maxlength
の長さを超えていると、その入力欄は制約検証に失敗します。
minlength
ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 maxlength
で指定された値以下である必要があります。 minlength
が指定されていないか、無効な値が指定されていると、パスワード入力欄には最小文字数が設定されません。
入力欄のテキストの長さが UTF-16 コード単位で minlength
の長さよりも短いと、その入力欄は制約検証に失敗します。
pattern
pattern
属性は、指定する場合は正規表現であり、入力欄の value
が制約検証に合格するためにはこれと一致しなければなりません。これは RegExp
型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u'
フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。
指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。
Tip: title
属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。
pattern の使用はパスワード入力において、ユーザーが幅広い種類の文字クラスを使用した有効なパスワードを選択して使用するのに役立ちます。パターンを使用すると、大文字・小文字の規則、数桁の数字や区切り記号などの使用を義務づけることができます。詳細と例については検証の節を参照してください。
{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
readonly
論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value
は、 JavaScript コードから直接 HTMLInputElement.value
プロパティを設定することで変更することができます。
注: 読み取り専用フィールドは値を持てないため、 required
は readonly
属性も指定されている入力欄には効果がありません。
{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
パスワード入力欄の使用
パスワード入力ボックスは通常、他のテキスト入力ボックスのように動作します。主な違いは、ユーザーの近くにいる人がパスワードを読み取ることを防ぐために、その内容を隠すことです。
シンプルなパスワード入力欄
以下は最も基本的なパスワード入力欄で、<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
または one-time-code
のどちらかに設定してサジェストが保存されないようにしてください。
<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();
}
結果
また、selectionStart
や selectionEnd
を使って、コントロールの文字がどの範囲で選択されているかを取得または設定することができ、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"
にセットされ、より入力しやすくするために、仮想キーボードを持つ端末が数字キーパッドレイアウトに切り替えることを支援しています。minlength
と maxlength
がそれぞれ 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"> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser