カスタム検索

password(パスワードボックス)

<input>タグの属性でtype="password"を指定した場合、パスワードボックスを定義します。パスワードボックスの機能は、テキストボックスとほとんど同じで、入力された内容が黒丸等で表示され、盗み見られないようになっている点だけが異なります。

盗み見られないといっても、ディスプレイに表示されないだけで、暗号化などの機能があるわけではありません。HTMLやXHTMLには、そのようなセキュリティ機能はなく、暗号化などの実現にはサーバ側での設定が必要となります。

type="password"を指定した場合に使用できる属性は以下のようになります。テキストボックスと同じです。

パスワードボックスの属性
属性 イベント   フォーカス   name   value   disabled   readonly   size   maxlength   onselect   onchange

name属性

name属性は、<input>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラムなどから参照されます。type="password"を指定した場合、このname属性は必須となります。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」(アンダーバー)を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。

value属性

value属性を指定すると、パスワードボックスにあらかじめ入力されているテキストを表示させることができます。しかし、value属性を指定しても、黒丸などで表示されるだけです。セキュリティ面から考えれば、この属性を使用することはあまりないでしょう。

disabled属性、readonly属性

disabled属性を指定すると、パスワードボックスを使用不可にします。ブラウザには表示されるが、入力はできないパスワードボックスとなります。

readonly属性を指定すると、選択はできるが、変更はできない状態にします。

size属性

size属性は、パスワードボックスが表示される幅を指定します。ほとんどのブラウザでは、指定した数値が半角英数の文字数の分だけ表示される幅となります。このsize属性が指定されない場合は、ブラウザの初期値が適用されます。

maxlength属性

maxlength属性は、テキストボックスに入力可能な文字数を指定します。

このmaxlength属性を指定しない場合は、無制限に入力が可能となります。セキュリティ的にも、適切な文字数を指定しておくようにしましょう。

入力例

入力例です。各属性の働きを確認してみてください。

input_password.html
<html>
    <head>
        <title>&lt;input type="password" /&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="post">
            <div>PASSWORD1:<input type="password" name="pwd_1" /></div>
            <div>PASSWORD2:<input type="password" name="pwd_2" /></div>
            <div>PASSWORD3:<input type="password" name="pwd_3" value="xxxxx" /></div>
            <div>PASSWORD4:<input type="password" name="pwd_4" value="xxxxx" disabled="disabled" /></div>
            <div>PASSWORD5:<input type="password" name="pwd_5" value="xxxxx" readonly="readonly" /></div>
            <div>PASSWORD6:<input type="password" name="pwd_6" size="10" /></div>
            <div>PASSWORD7:<input type="password" name="pwd_7" size="10" maxlength="8" /></div>
        </form>
    </body>
</html>

onselect属性、onchange属性

onselect属性を指定すると、パスワードボックスが選択されたときのブラウザの動作を指定することができ、onchange属性は、パスワードボックスの値が変更されたときのブラウザの動作を指定します。ただし、これらの属性はJavaScriptに関することなのでこのサイトでは触れません。

CopyLeft 2024 Webデザインレッスン プライバシーポリシー サイト管理者に連絡