HTML辞典 textarea要素の解説
複数行にわたるテキスト入力欄を設置する<textarea>タグの使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| textarea要素 |
| テキスト |
グローバル属性（共通）
HTML共通で指定できるグローバル属性について
textarea要素 書式・概要
インラインレベル要素
<textarea name="名前" rows="行数" cols="幅">～</textarea>textarea要素は、複数行のテキスト入力フィールドとして表示されます。
<textarea>～</textarea>の範囲に記述した文字は、このフィールドにあらかじめ入力された状態で表示されます。name属性で指定する名前は、フォームの内容を受信した時にデータを見分けるためなどに使用します。rows属性とcols属性は、その環境において入力に支障のない領域を確保するためのもので、rows属性のデフォルト値は2，cols属性のデフォルト値は20になっています。
使用できる属性
autofocus（オート・フォーカス）
【論理属性】
Webページが読み込まれた際に、自動的にボタンにフォーカスが移ります。
<button autofocus>～</button>disabled（ディスエーブルド）
【論理属性】
ボタンを無効にします。
<button disabled>～</button>form（フォーム）
任意のform要素に付与したid属性値を指定することで、関連付けを行います。対応ブラウザでは、form要素の外にボタンがあった場合でも、送信が可能です。※以前はJavaScriptで対応して部分になります。
cols（カラムス）
テキスト入力欄の幅を文字数で指定できます。（初期値は20）
<textarea cols="50">～</textarea>dirname（ディレクショナリティ・ネーム
送信するデータの書字方向に関するクエリ値のクエリ名を指定します。
| ltr | 左から右 |
| rtl | 右から左（アラビア語など一部の言語） |
maxlength（マックス・レンス）
選択肢の複数選択を可能にします。select要素の選択肢やアップロードするファイルを「Ctrl」キーなどを押しながらクリックすることで、負k数の対象を選択可能です。
name
データが送信される際のクエリ名を設定します。
placeholder（プレースホルダー）
入力コントロールにあらあじめ表示されるダミーテキストを指定します。値に改行コードを含めることはできません。
rows（ロウズ）
テキスト入力欄の高さを文字数で指定します。
<textarea rows="50">～</textarea>readonly（リード・オンリー）
フォームの入力コントロールを閲覧者が編集できないようにします。フォーム送信時に値は送信されます。
wrap（ラップ）
テキスト入力欄における折り返しの指定を行います。
| soft | 入力したテキストは入力欄の幅で自動的に折り返されますが、送信されるクエリには折り返しは反映されません。（初期値） |
| hard | 入力したテキストは入力欄の幅で自動的に折り返され、送信されるクエリにもその折り返しが反映されます。 |
required（レクワイアド）
入力コントロールへのデータ入力や選択が必須になります。この属性が指定された入力コントロールに値がない場合、対応するブラウザーではフォームの送信が行われません。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>textareaタグ サンプルページ</title>
<meta charset="uft-8"><!-- 文字コード指定 -->
</head>
<body>
<form action="https://kcfran.com/send" method="post">
<p>メッセージ</p>
<textarea name="message" rows="20" cols="100"></textarea>
<div>
<input type="submit" name="submit" value="送信">
</div>
</form>
</body>
</html>chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
