<input>要素の"password"型

<input>要素の”password”型

フォーム内で「パスワード」などのそのままの文字を表示させたくないようなテキスト入力欄を設ける際に使用されます。
ブラウザーによって表示される文字は変わりますが、1つ1つの文字がアスタリスク (“*”) やドット (“•”) のような記号に置き換えて表示されます。

属性

<input> 要素の password型 では、以下の属性が使用できます。

autocomplete

自動補完機能を提供するかどうかを記述します。

• on　ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可します。
• off　ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可しません。
• current-password　ブラウザー、あるいはパスワードマネージャに、そのサイトの既知のパスワードを自動的に入力することを許可します。
• new-password　ブラウザー、あるいはパスワードマネージャが、そのサイトの新しいパスワードを自動的に入力することを許可します。（ユーザー登録やパスワード変更画面で使用されます）

readonly

この属性を指定した場合、値が変更できなくなります。

placeholder

コントロールに何を入力できるかに関する、ユーザーへの助言になるようなテキストを指定します。

maxlength

入力できる最大の文字数を指定します。

minlength

入力できる最小の文字数を指定します。

pattern

値として「正規表現テキスト」を指定することで、入力できるテキストのパターンを指定します。
なお、指定する正規表現テキストは、JavaScriptの RegExp型 で使用される正規表現テキストになります。

size

入力欄の見た目上のサイズを整数値で指定します。

inputmode

推奨する、または必須となるパスワードの構文ルールが、標準キーボードよりも、代替となるテキスト入力インターフェースから恩恵を受ける場合、特定のものを要求するために inputmode 属性を使用することができます。
例えば、「暗証番号」欄のように数値のみとなっているような場合に使用されます。

サンプル

See the Pen vYBzaRj by Masahiko Iwakiri (@m-iwakiri) on CodePen.