【HTML Living Standard】textarea要素の使い方
textarea要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
textareaオブジェクトは、ウェブページ上でユーザーが複数行のテキストを入力できるようにするためのHTML要素を表すオブジェクトです。これは、コメント欄、メッセージ入力フィールド、詳細な説明文など、単一行の入力フォーム（<input type="text">など）では対応できない、広範なテキスト入力を受け付ける際に不可欠な要素です。
基本的な使用方法は、<textarea>開始タグと</textarea>終了タグの間に初期値を直接記述することです。value属性を用いて初期値を設定する<input>要素とは異なる点に注意が必要です。
このオブジェクトには、その挙動や表示を制御するための様々な属性があります。例えば、name属性はフォームが送信される際に、入力されたデータをサーバー側で識別するための名前を指定します。id属性は、CSSでのスタイリングやJavaScriptからの操作において、要素を一意に特定するために使用されます。
ユーザーインターフェースの観点からは、rows属性とcols属性でテキストエリアの表示上の高さ（行数）と幅（文字数）をそれぞれ設定できます。placeholder属性は、ユーザーが入力する内容のヒントとなるテキストを、入力が行われるまで薄い色で表示します。
また、readonly属性を指定すると、ユーザーはテキストエリアの内容を閲覧できますが、編集はできなくなります。disabled属性を指定すると、テキストエリア自体が無効化され、入力も編集もできなくなり、フォーム送信の対象外となります。maxlength属性で入力可能な最大文字数を制限したり、required属性で入力必須にしたりすることも可能です。
JavaScriptを使用することで、このtextareaオブジェクトのvalueプロパティにアクセスし、ユーザーが入力したテキストを取得したり、プログラム的にテキストを設定したりすることができます。これにより、動的なウェブアプリケーションにおいてユーザー入力を柔軟に制御することが可能となります。textareaは、リッチなユーザーインタラクションを実現するための基盤となる重要な要素の一つです。
構文(syntax)
1<textarea>初期値</textarea>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML textarea サイズ設定方法
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Textarea サイズ設定サンプル</title> 7 <style> 8 /* CSSでtextareaのサイズを設定する例 */ 9 .custom-textarea { 10 width: 300px; /* テキストエリアの幅を300ピクセルに設定 */ 11 height: 150px; /* テキストエリアの高さを150ピクセルに設定 */ 12 resize: vertical; /* ユーザーが垂直方向のみリサイズ可能にする（デフォルトは両方向） */ 13 /* resize: none; と設定するとユーザーによるリサイズを無効化できます。 */ 14 } 15 </style> 16</head> 17<body> 18 19 <!-- HTMLのrows属性とcols属性でtextareaのサイズを設定する例 --> 20 <!-- rowsは表示される行数、colsはおおよその文字幅を設定します。 --> 21 <textarea rows="5" cols="40" placeholder="HTML属性でサイズ指定されたテキストエリア (5行 x 40列)"> 22このテキストエリアは、HTMLのrows="5"（5行の高さ）とcols="40"（約40文字幅）属性を使ってサイズが指定されています。 23</textarea> 24 25 <!-- CSSのwidthとheightプロパティでtextareaのサイズを設定する例 --> 26 <!-- CSSはピクセル単位などでより柔軟なサイズ指定が可能です。 --> 27 <textarea class="custom-textarea" placeholder="CSSでサイズ指定されたテキストエリア (幅:300px, 高さ:150px)"> 28このテキストエリアは、CSSで width: 300px; と height: 150px; が設定されています。 29また、resize: vertical; で垂直方向のみリサイズ可能です。 30</textarea> 31 32</body> 33</html>
HTMLのtextarea要素は、ユーザーが複数行のテキストを入力できる領域を作成するために使用されます。フォームなどで長文の入力を求める際によく利用されます。この要素自体には、プログラミング言語における関数のような引数や戻り値の概念は直接適用されません。
textareaのサイズを設定する方法は主に2つあります。1つ目は、HTML属性のrowsとcolsを使用する方法です。rows属性は表示されるおおよその行数を指定し、cols属性はおおよその文字幅を指定します。サンプルコードでは<textarea rows="5" cols="40">のように記述されており、5行の高さと約40文字分の幅を持つテキストエリアが作成されます。
2つ目は、CSSのwidthとheightプロパティを使用する方法です。この方法では、ピクセル（px）などの単位でより柔軟かつ正確な幅と高さを指定できます。サンプルコードの.custom-textareaクラスでは、width: 300px;とheight: 150px;が設定されており、固定されたサイズで表示されます。
また、CSSのresizeプロパティを使用することで、ユーザーがテキストエリアのサイズを変更できるかどうか、またはどの方向へ変更できるかを制御できます。resize: vertical;と設定すると垂直方向のみリサイズ可能になり、resize: none;と設定するとユーザーによるリサイズが完全に無効になります。サンプルコードでは、CSSでサイズを指定したテキストエリアにresize: vertical;が適用されています。これらの方法を使い分けることで、ウェブサイトのレイアウトやユーザー体験に適した入力欄をデザインできます。
textareaのサイズ指定には、HTMLのrowsとcols属性、またはCSSのwidthとheightプロパティを使用できます。rowsとcolsは表示されるおおよその行数と文字幅の目安であり、フォントやブラウザによって実際の表示サイズは異なります。より正確で柔軟なサイズ指定やデザインの調整には、CSSのwidthとheightプロパティを使用するのが一般的です。
CSSでサイズ指定を行う場合、HTML属性よりもCSSの設定が優先されるため、意図しない表示にならないよう注意が必要です。また、CSSのresizeプロパティを使えば、ユーザーがテキストエリアのサイズを変更できるか、どの方向に変更できるかを制御できます。例えば、resize: none;と設定することで、ユーザーによるサイズ変更を完全に無効化し、レイアウトの崩れを防ぐことができます。ユーザーが快適に入力できるよう、コンテンツ量に応じた適切な初期サイズと、必要に応じてリサイズ機能の有無や方向を設定することが重要です。
HTML textareaでの改行表示
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML textarea 改行サンプル</title> 7</head> 8<body> 9 <h1>テキストエリアの改行表示</h1> 10 11 <form> 12 <!-- textarea要素は、入力された改行をそのまま保持し表示します。 --> 13 <!-- 初期値として、textareaタグの間に記述された改行も反映されます。 --> 14 <label for="messageInput">メッセージを入力してください:</label><br> 15 <textarea id="messageInput" name="message" rows="5" cols="40"> 16これは1行目のテキストです。 17これは2行目のテキストです。 18これは3行目のテキストです。 19</textarea> 20 <br> 21 <button type="submit">送信</button> 22 </form> 23</body> 24</html>
HTMLのtextarea要素は、ウェブページ上でユーザーが複数行のテキストを入力できる領域を作成するために使用されます。例えば、お問い合わせフォームやコメント欄などで利用される一般的な要素です。この要素は、プログラミング言語の関数のような「引数」や「戻り値」といった概念は持ちませんが、表示を制御するための様々な「属性」を利用します。
サンプルコードでは、<textarea id="messageInput" name="message" rows="5" cols="40">という形でtextarea要素が定義されています。ここで、rows="5"は表示されるテキストエリアの高さを5行分に、cols="40"は表示される幅を約40文字分に指定しています。
textarea要素の重要な特徴は、ユーザーが入力した改行をそのまま保持し、表示する点です。また、要素の初期値を設定する際も、開始タグ<textarea>と終了タグ</textarea>の間に記述されたテキストは、改行を含めてそのままブラウザに表示されます。サンプルコードの内部に複数行で記述されたテキストが、ウェブページ上で改行が反映された状態で初期値として表示されるのは、このtextarea要素の特性によるものです。これにより、ユーザーは自然な形で文章を入力し、その改行も維持されるため、使いやすいインターフェースを提供できます。
HTMLのtextarea要素は複数行のテキスト入力を扱う際に利用します。特に注意すべきは、改行の扱いです。この要素は、開始タグと終了タグの間に記述された改行や空白文字も初期値としてそのまま表示します。サンプルコードのように<textarea>タグの直後に改行やインデントがあると、それらが入力フィールドに表示されてしまうため、意図しない空白行やスペースが生じる可能性があります。初期値を設定する際は、<textarea>初期値</textarea>のようにタグと内容を詰めると良いでしょう。また、ユーザーが入力した改行もそのまま保持されるため、フォーム送信時やサーバーサイドでデータを扱う際は、改行コード（CRLFやLF）の種類を意識した処理が必要です。これらの特性を理解することで、表示崩れやデータの取り扱いミスを防げます。