|
|
|
||||||||
| 機能 | テキスト入力エリアを定義 | |
|---|---|---|
| 属性 | HTML-4.01 | コア 言語 イベント フォーカス name rows cols disabled readonly onselect onchange |
| XHTML-1.0 | コア 言語 イベント フォーカス name rows cols disabled readonly onselect onchange | |
name属性name属性は、<textarea>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラム等から参照されます。<textarea>タグには、このname属性は必須といえるでしょう。
name属性の値は、プログラムから参照されるので、値の指定には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」(アンダーバー)を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。
フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。
rows属性、cols属性rows属性とcols属性を指定すると、テキストエリアの表示サイズを変更することができます。rowsは縦方向、colsは横方向です。値には文字数(半角英数の文字数)を指定します。この属性を指定しない場合は、ブラウザの初期値が設定されます。
disabled属性disabled属性を指定すると、テキストエリアを使用不可にします。ブラウザには表示されるが、何もできない状態になります。
readonly属性readonly属性を指定すると、テキストエリアの表示だけし、実際の入力はできない状態にします。
入力例入力例です。各属性の働きを確認してみてください。
<html>
<head>
<title><textarea>の例</title>
</head>
<body>
<form action="プログラムのパス" method="get">
<div><textarea name="text">記入してください。</textarea></div>
<div><textarea name="text_2" rows="5"></textarea></div>
<div><textarea name="text_2" cols="30"></textarea></div>
<div><textarea name="text_2" rows="5" cols="30"></textarea></div>
<div><textarea name="text_2" disabled="disabled"></textarea></div>
<div><textarea name="text_2" readonly="readonly"></textarea></div>
</form>
</body>
</html>
onselect属性、onchange属性onselect属性を指定すると、テキストエリアが選択されたときのブラウザの動作を指定することができ、onchange属性は、テキストエリアの値が変更されたときのブラウザの動作を指定します。ただし、これらの属性はJavaScriptに関することなのでこのサイトでは触れません。