Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【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は、リッチなユーザーインタラクションを実現するための基盤となる重要な要素の一つです。

公式リファレンス: <textarea>: The Textarea element

構文(syntax)

1<textarea>初期値</textarea>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ