|
カスタム検索
|
|
 password
|
|
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><input type="password" />の例</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に関することなのでこのサイトでは触れません。
text
ページの先頭
2010 Webデザインレッスン