カスタム検索

<textarea>タグ

<textarea>タグは、テキストエリアを定義します。<input type="text">(テキストボックス)と異なる点は、複数行にわたってテキストを入力できることです。

また、<textarea>と</textarea>の間に記述されたテキストは、テキストエリアに表示されます。あらかじめ「入力してください」といったようなテキストを記述しておくことで、ガイド的な使い方が可能です。

<textarea>タグの機能と属性
機能 テキスト入力エリアを定義
属性 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属性を指定すると、テキストエリアの表示だけし、実際の入力はできない状態にします。

入力例

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

textarea.html
<html>
    <head>
        <title>&lt;textarea&gt;の例</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に関することなのでこのサイトでは触れません。

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