<input type="password">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容

input要素type="password" を指定すると、パスワードの入力欄を作成できます。


<input type="password" name="example1">

<input type="password" name="example2" size="30" maxlength="30">

属性
任意属性(共通)
type="" 部品のタイプ password パスワードの入力欄
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 入力欄の初期値
disabled 部品の無効化 disabled 値は省略可能
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
autofocus [+]自動フォーカスの指定 autofocus 値は省略可能、1つの文書に1つだけ指定可能
任意属性
size="" 入力欄の幅 数値 文字数で指定
maxlength="" 入力できる最大文字数 数値 文字数で指定
minlength="" [+]入力できる最小文字数 数値 文字数で指定
autocomplete="" [+]オートコンプリート on オートコンプリートを有効にする
off オートコンプリートを無効にする
pattern="" [+]入力可能なパターン 正規表現 JavaScriptの正規表現を使用
placeholder="" [+]入力のヒント 文字列 記入例、フォーマットの例
inputmode="" [5.1]入力モード キーワード 本文参照
readonly 読み取り専用 readonly 値は省略可能
required [+]入力必須 required 値は省略可能

type属性name属性value属性disabled属性form属性autofocus属性の詳細については、input要素のページを参考にしてください。

このタイプの特徴

パスワードを入力するための入力欄です。

(実際の表示例)

このタイプの入力欄では、入力した内容が黒丸(●)などで表示されることになります。(ただし、暗号化されるわけではありません)

size属性について

size属性は、入力欄の幅を文字数で指定します。

次の例では、30文字分の幅を指定しています。

<input type="password" name="example" size="30">

maxlength属性について

maxlength属性は、入力できる最大文字数を指定します。

次の例では、最大文字数を30文字に指定しています。

<input type="password" name="example" maxlength="30">

minlength属性について

minlength属性は、入力できる最小文字数を指定します。

次の例では、最小文字数を5文字に指定しています。

<input type="password" name="example" minlength="5">

autocomplete属性について

autocomplete属性は、オートコンプリート機能(入力内容の自動補完)を使うかどうかを指定します。

値には on(使う)または off(使わない)を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。(form要素にも指定されていない場合は on の状態がデフォルトとなります)

<input type="password" name="example" autocomplete="off">
  • HTML 5.1では、input要素のautocomplete属性に on / off 以外の値も指定できるようになりました(詳しくは仕様書をご覧ください)。これにより、きめ細やかな設定が行えるようになります。

pattern属性について

pattern属性は、入力可能な値のパターンを、JavaScriptの正規表現を使って指定します。

  • ただし、この属性で指定する正規表現は、部分一致ではなく全体一致でチェックするものとなります。(パターンの前後に ^(?:)$ が指定されているとみなされます)
パスワード:<input type="password" name="pass" pattern="[a-zA-Z0-9]+">

pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。この説明は、エラーメッセージ、ツールチップ、ステータスバーなどに表示される場合があります。

パスワード:<input type="password" name="pass" pattern="[a-zA-Z0-9]+" title="パスワードは半角英数字で入力してください。">

placeholder属性について

placeholder属性は、入力の助けとなるような短いヒント(記入例やフォーマットの例など)を指定します。(パスワードの場合はあまり必要ないかもしれません)

対応しているブラウザでは、この値が入力欄に表示されます。(入力を開始すると消えます)

パスワード:<input type="password" name="pass" placeholder="example">

inputmode属性について

inputmode属性は、その入力欄の入力モードを指定します。

<input type="password" name="pass" inputmode="verbatim">

この属性の値には、以下のキーワードを指定することができます。

キーワード 説明
verbatim 文章ではない英数字による文字列の入力(ユーザー名、パスワード、製品コード 等、対コンピューター向け)
latin ラテン文字による自由形式なテキストの入力(入力予測等の入力支援が期待される)
latin-name ラテン文字によるユーザー名の入力(人名の入力に適した入力支援が期待される)
latin-prose ラテン文字によるメッセージの入力(対人コミュニケーションに適した入力支援が期待される)
full-width-latin 全角英数字モード(?)
kana 全角かな入力モード
kana-name 全角かな入力モード(人名の入力に適した入力支援が期待される)
katakana 全角カタカナ入力モード
numeric ,- を含む半角数字の入力(クレジットカード番号 等)、数値の場合は type="number" が適切
tel *# を含む半角数字の入力(電話番号)、通常は type="tel" を使用
email @. を含む半角英数字の入力(メールアドレス)、通常は type="email" を使用
url /. を含む半角英数字の入力(URL)、通常は type="url" を使用

readonly属性について

readonly属性は、そのフォーム部品が読み取り専用であることを指定します。

この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。

<input type="password" name="example" readonly>
  • この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

<input type="password" name="example" required>

使用例

以前からある属性を指定した例

<dl>

<dt>デフォルト</dt>
<dd><input type="password" name="example1"></dd>

<dt>幅を指定</dt>
<dd><input type="password" name="example2" size="30"></dd>

<dt>最大文字数を指定</dt>
<dd><input type="password" name="example3" size="30" maxlength="30"></dd>

<dt>初期値を指定</dt>
<dd><input type="password" name="example4" size="30" value="example"></dd>

<dt>無効化を指定</dt>
<dd><input type="password" name="example5" size="30" value="example" disabled></dd>

<dt>読み取り専用を指定</dt>
<dd><input type="password" name="example6" size="30" value="example" readonly></dd>

</dl>

表示例
デフォルト
幅を指定
最大文字数を指定
初期値を指定
無効化を指定
読み取り専用を指定
  • 本題とは関係ありませんが、dt要素とdd要素にはスタイルが指定されています。
autocomplete属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_password.html">
<p>オン:<input type="password" name="pass" autocomplete="on"> <input type="submit" value="ログイン"></p>
</form>

<form method="get" action="input_password.html">
<p>オフ:<input type="password" name="pass" autocomplete="off"> <input type="submit" value="ログイン"></p>
</form>

表示例

オン:

オフ:

  • Firefox(11)では、オートコンプリートがオンの状態で送信すると、パスワードを記憶するかどうかの確認メッセージが表示されます。
minlength属性、pattern属性、required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_password.html">

<p><input type="password" name="pass" size="30" minlength="5" pattern="[a-zA-Z0-9]+" title="パスワードは5文字以上の半角英数字で入力してください。" required> <input type="submit" value="ログイン"></p>

</form>

表示例

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。