textareaタグ/フォーム部品

<textarea>タグは複数行入力可能なテキストエリアを配置するために使います。

説明

 <textarea>タグは<form>タグに囲まれた中で使い、フォーム部品であるテキストエリアを配置します。配置されたテキストエリアに入力した値をCGIやPHPのページに送信したり、JavaScriptを動作させたりする事が出来ます。

 例えば、以下の図のようにテキストエリアに文字を入力して実行ボタンを押すと、test.jsでJavaScriptが動作し、結果を表示したり出来ます。

textareaのJavaScript利用例

構文

 <textarea>タグはHTMLボディー内に記述します。構文は以下の通りです。

<textarea> name="名前" rows="縦の文字数" cols="横の文字数">初期表示されるテキスト</textarea>

 nameは識別するための名前でJavaScriptの処理でnameを使って値を取り出したり出来ますが、必須ではありません。

 rowsは縦の文字数、colsは横の文字数を数字で指定する事で表示されるサイズを指定します。

 テキストエリアには「初期表示されるテキスト」と記述した内容が最初から表示されますが、省略する事で初期表示を空欄にする事も出来ます。

利用例

 JavaScriptを実行する場合の<textarea>タグの利用例は以下の通りです。

<form name="textform" action="#" onkeydown="if(event.keyCode == 13 || event.charCode == 13){alert('これがアラートです');return false;}">
<textarea rows="3" cols="20"></textarea>
</form>

 縦の文字数を3、横の文字数を20としてサイズを指定しています。<form>タグでonkeydownを指定してJavaScriptが動作するようにしています。;で区切ると複数の処理を記述出来ます。上記ではエンターキーが押された事を判断してreturn falseを実行するようにしています。JavaScriptでは処理が終わった際にページの再読み込みがされますが、return falseを追加する事で再読み込みがされません。

 上記を表示すると以下になります。

 文字を入力してエンターキーを押すとアラートが表示されます。

ディスプレイ

 <textarea>タグで囲むとインラインボックスを示すため、改行されません。複数のテキストエリアを横に並べる事が出来ます。

 <textarea>タグを囲む<form>タグで囲むブロックボックスを示すため、複数テキストエリアを配置すると<form>タグの枠の中で改行されます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加