構文
<form>
<div>
<textarea>・・・</textarea>
:
</div>
</form>
説明文
<textarea>タグは,<form>タグでサーバー側に送信するデータの入力する部品として利用する。<input>タグとは異なり,複数行入力することが可能だ。
表示するテキスト・エリアの大きさは「cols」と「rows」属性で指定できる。例えば,「cols="20" rows="5"」と指定すると,横20文字,縦5列分のテキスト・エリアが表示される。また,テキスト・エリアにあらかじめ文書などを入力しておきたい場合は,<textarea>と</textarea>の間に記述しておく。文書を省略した場合はテキスト・エリアは空白となる。この際,</textarea>を忘れずに記述する必要がある。
<textarea>タグはインライン要素であるため,基本的にブロック要素の中で利用するようにする。また,<form>タグはブロック要素であるが,HTML 4 Strictでは<form>タグ内にはブロック要素のみ包括を許可しているため,<textarea>タグを利用する際は,他のブロック要素を利用して記載するようにする。
サンプル
HTMLソース
<form method=POST action="cgi/wwwperl.cgi">
<div>
メッセージ:<br>
<textarea name="MSG" cols="40" rows="4">お世話になっております。
</textarea><br>
<input type="submit" value="送信">
</div>
</form>
・ ブラウザ表示例
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素,タグ
タグ要素 |
インライン要素,フォーム要素 |
包括可能要素 |
文字列 |
タグ記述条件 |
開始タグ:必須 終了タグ:必須 |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
align=配置位置 |
セル内の横方向における内容の配置位置を指定する。「left」で左揃え,「center」で中央揃え,「right」で右揃え,「justify」でセル内に均等になるように配置する。また,「char」を指定するとchar属性に従った配置を行う |
○ |
○ |
|
cols=文字数 |
テキスト入力エリアの横幅を指定する。単位は文字 |
○ |
○ |
|
name=名前 |
このフォームに名前を付ける。フォームの内容を送信する場合,「名前=値」のように値の前にここで指定した名前が付加される。サーバー側のプログラムで処理する場合,この名前を確認することでどのフォーム部品の値であるかを判断できる |
○ |
○ |
|
rows=行数 |
テキスト入力エリアの行数を指定する |
○ |
○ |
|
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
accesskey=キー |
このタグにフォーカスするキー設定を行う。「A」と指令すると,[ALT]+[a]を屋下することでこのタグにフォーカスが移動する |
○ |
○ |
|
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
disabled |
入力を禁止する。禁止すると背景および文字が灰色になる。また,テキスト・エリア内に表示されている文字を選択してコピーなどを行えなくなる |
○ |
○ |
|
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
○ |
○ |
|
readonly |
入力を禁止する。禁止すると背景が灰色になる。disabledとは違いテキスト・エリア内に表示されている文字の選択は可能で、文字列のコピーなどに対応する |
○ |
○ |
|
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
tabindex=順序 |
タブ・キーによるフォーカスの移動順序を指定する。値が小さいほど先にフォーカスされる |
○ |
○ |
|
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onfocus=スクリプト |
このタグに対応する表示結果にフォーカスが当たった場合に,指定したスクリプトを実行する |
○ |
○ |
|
onblur=スクリプト |
このタグに対応する表示結果にフォーカスが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
関連項目