|
カスタム検索
|
|
 text |
|
text（テキストボックス）| 属性 | イベント フォーカス name value disabled readonly size maxlength onselect onchange |
|---|
name属性
name属性は、<input>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラムなどから参照されます。type="text"を指定した場合、このname属性は必須となります。
プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号など極力使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」（アンダーバー）を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。
フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。
value属性
value属性を指定すると、テキストボックスにあらかじめ入力されているテキストを表示させることができます。例えば、「ここに名前を入力してください」といったような、ガイド的な使用が可能です。
disabled属性、readonly属性
disabled属性を指定すると、テキストボックスを使用不可にします。ブラウザには表示されるが、入力はできないテキストボックスとなります。
readonly属性を指定すると、選択はできるが、変更はできない状態にします。
size属性
size属性は、テキストボックスが表示される幅を指定します。ほとんどのブラウザでは、指定した数値が半角英数の文字数の分だけ表示される幅となります。このsize属性が指定されない場合は、ブラウザの初期値が適用されます。
maxlength属性
maxlength属性は、テキストボックスに入力可能な文字数を指定します。文字数は半角英数でカウントされるので、日本語の入力が想定される場合には、2倍の数値を記述しておきましょう。
このmaxlength属性を指定しない場合は、無制限に入力が可能となります。セキュリティ的にも、適切な文字数を指定しておくようにしましょう。
入力例
入力例です。各属性の働きを確認してみてください。
input_text.html
<html>
<head>
<title><input type="text" />の例</title>
</head>
<body>
<form action="プログラムのパス" method="post">
<div>TEL1：<input type="text" name="tel_1" /></div>
<div>TEL2：<input type="text" name="tel_2" /></div>
<div>TEL3：<input type="text" name="tel_3" value="03-xxxx-xxxx" /></div>
<div>TEL4：<input type="text" name="tel_4" value="03-xxxx-xxxx" disabled="disabled" /></div>
<div>TEL5：<input type="text" name="tel_5" value="03-xxxx-xxxx" readonly="readonly" /></div>
<div>TEL6：<input type="text" name="tel_6" size="30" /></div>
<div>TEL7：<input type="text" name="tel_7" size="30" maxlength="10" /></div>
</form>
</body>
</html>
onselect属性、onchange属性
onselect属性を指定すると、テキストボックスが選択されたときのブラウザの動作を指定することができ、onchange属性は、テキストボックスの値が変更されたときのブラウザの動作を指定します。ただし、これらの属性はJavaScriptに関することなのでこのサイトでは触れません。
<input>
ページの先頭
2024 Webデザインレッスン