HTML

The <textarea> element in HTML is used to provide a multi-line input field where users can enter and edit text.

textarea 要素

<textarea> とは？

<textarea> は、複数行にわたるテキスト入力領域を作る際に使用する HTML 要素です。シングルラインの入力欄（例: <input type="text">）と異なり、改行を含む長文の入力が必要な場合に利用されます。例えば、ユーザーにコメントや問い合わせ内容、説明文などを自由に入力してもらいたいときに便利です。

<label for="message">メッセージ：</label><br>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

• label 要素と組み合わせることで、アクセシビリティと可読性が高まります。
• rows や cols によって初期表示される高さや幅が指定されます。

基本的な属性と使い方

name 属性

• フォーム送信時にサーバーサイドでこの <textarea> 要素の値を参照するための名前を設定します。
• 例: name="comments"
• フォームの送信時、comments というフォームキーで入力された値を受け取ります。

rows と cols

• 表示上の行数 (rows) と列数 (cols) を指定します。
• 例: rows="5" cols="40"
• 実際の幅や高さは、CSS などで上書き可能ですが、HTML 上ではこの属性が初期状態の目安となります。
• スマートフォンなどでの表示では、画面の幅によって変化する可能性があるため、必ずしも指定した cols の通りには表示されない場合があります。

placeholder 属性

• <textarea> の中身が空のときに表示されるヒントテキストを指定します。
• 例: placeholder="ご意見やご感想をお書きください"
• ユーザーエクスペリエンスを向上させるために活用されます。

• label 要素と組み合わせることで、アクセシビリティと可読性が高まります。
• rows や cols によって初期表示される高さや幅が指定されます。

<label for="message">メッセージ：</label><br>
<textarea id="message" name="message" rows="5" cols="40" placeholder="ご意見やご感想をお書きください"></textarea>

disabled 属性

• この属性が付与されると、ユーザーは <textarea> に入力できなくなり、送信対象にもなりません（フォームの送信時に値が送信されない）。
• スタイル的にも薄くグレーアウトされるのが一般的です。

<label for="message">メッセージ：</label><br>
<textarea id="message" name="message" rows="5" cols="40" disabled></textarea>

readonly 属性

• <textarea> の内容を表示しつつ、ユーザーの変更は許可しない設定です。
• disabled とは異なり、フォーム送信時には値が送信されます。

<textarea name="comments" readonly>閲覧のみ可能</textarea>

maxlength 属性 (HTML5)

• <textarea> で入力可能な文字数の最大値を指定します。
• 例: maxlength="200"
• 文字数制限を設けることでデータベースやサーバーサイドの制約に合わせやすくなります。

<textarea name="comments" maxlength="200"></textarea>

見た目のカスタマイズ

サイズの調整 (CSS)

従来は、rows と cols でサイズが指定されていましたが、実際には CSS での制御がより柔軟です。

<label for="message">メッセージ：</label><br>
<textarea id="message" name="message"></textarea>

textarea {
	width: 100%;  /* 親要素に合わせて横幅を自動調整 */
	height: 80px;
	box-sizing: border-box; /* 枠線やパディングを含めたサイズ計算に */
}

• box-sizing: border-box; を使うことで、幅・高さの計算が直感的に行えます。
• レスポンシブ対応を考えるなら width: 100%; のように可変にするのが一般的です。

リサイズの制御 (CSS の resize プロパティ)

ユーザーがドラッグしてテキストエリアの大きさを自由に変えられる機能がブラウザに標準実装されています。

必要に応じて、CSS の resize プロパティで制御可能です。

/* 縦方向へのリサイズのみ許可 */
textarea {
	resize: vertical;
}

/* リサイズを完全に不可にする */
textarea {
	resize: none;
}

テキストの折り返し (wrap 属性)

<textarea> の wrap 属性は、ユーザーが入力したテキストをどのように折り返すかを指定するものです。次の値を取ることができます。

soft

ブラウザ上の見た目だけで改行を行うが、フォームの送信時には改行文字は含まれない。

hard

ブラウザ上でも改行を行い、フォーム送信時にも改行文字が挿入される。

(省略した場合)

多くのブラウザではデフォルトで soft 扱いとなる。

<!-- 表示上は折り返し、送信時に改行は含まれない -->
<textarea name="description" wrap="soft"></textarea>

<!-- 表示上の折り返し + 送信時に改行を含む -->
<textarea name="description" wrap="hard"></textarea>

ラベルとアクセシビリティ

label 要素との連携

• <label> と <textarea> を紐づけることで、スクリーンリーダーなどを利用するユーザーにも分かりやすいフォームを提供できます。
• 一般的には、for 属性に <textarea> の id を指定します。

<label for="comments">コメント</label>
<textarea id="comments" name="comments"></textarea>

aria-* 属性

• ARIA (Accessible Rich Internet Applications) 属性を用いてさらにアクセシビリティを高めることが可能です。
• 例: aria-required="true" などを指定して、スクリーンリーダーに入力必須であることを伝えられます。

バリデーションとイベント処理

必須入力の指定 (HTML5)

• required 属性を指定することで、フォーム送信時に入力が空だとエラーが出ます。

<textarea name="comments" required></textarea>

イベント処理 (JavaScript)

• oninput や onchange などのイベントを用いて、リアルタイムの入力検知やバリデーションが可能です。

<textarea
	name="comments" 
	id="comments" 
	oninput="checkLength(this)"
	maxlength="200"
></textarea>

<script>
	function checkLength(el) {
		const max = el.getAttribute('maxlength');
		const currentLength = el.value.length;
		// 文字数をリアルタイム表示など
		document.getElementById('count').innerText = `${currentLength}/${max}`;
	}
</script>
<p id="count">0/200</p>

高度な応用

自動サイズ調整 (Auto-resizing textarea)

ユーザーが入力するにつれて自動でテキストエリアの高さを調整するテクニックは、UX 向上に役立ちます。以下のように JavaScript で実装できます。

<textarea id="auto-resize" rows="1" style="overflow:hidden;"></textarea>

<script>
	const textarea = document.getElementById('auto-resize');
	
	// 高さをリセットしてから、scrollHeight に合わせて高さを再設定
	function autoResize(element) {
		element.style.height = 'auto';
		element.style.height = element.scrollHeight + 'px';
	}

	textarea.addEventListener('input', function() {
		autoResize(this);
	});

	// ページ読み込み時にも初期化
	window.addEventListener('load', function() {
		autoResize(textarea);
	});
</script>

• scrollHeight を用いて現在必要な高さを計算し、要素の style.height に反映します。
• フォームの見た目が自然になり、ユーザーが入力しやすくなります。

カスタムスクロールバー

• CSS のカスタムプロパティ（ベンダープレフィックスも含む）を使用して、スクロールバーのデザインを変更することができます。
• 主に WebKit ベースのブラウザ（Chrome や Safari）で利用される下記のような例があります。

textarea::-webkit-scrollbar {
	width: 8px; /* スクロールバーの幅 */
}

textarea::-webkit-scrollbar-thumb {
	background-color: #666; /* スクロールバーのつまみ部分 */
	border-radius: 4px;
}

textarea::-webkit-scrollbar-track {
	background-color: #eee; /* スクロールバーの背景 */
}

リッチテキストエディタとの統合

• <textarea> は、WYSIWYG エディタや Markdown エディタなどのリッチテキストエディタと組み合わせる際のベースとして利用されることがあります。
• 代表的なライブラリ例:
  • TinyMCE
  • CKEditor
  • Quill
• これらのライブラリは <textarea> を隠し要素として利用し、UI にリッチテキストエディタを表示したりします。サーバーに送信する際は <textarea> の内容を使う形になります。

セキュリティ面での注意事項

XSS 対策

• ユーザーが入力したテキストはそのままページに表示すると、悪意あるスクリプトが埋め込まれる危険性があります。
• サーバーサイドで HTML エスケープ（特殊文字のサニタイズ）を行い、JavaScript が実行されないようにする必要があります。

攻撃的な文字入力への対処

• maxlength の設定やサーバーサイドでの文字数チェックにより、膨大な文字数を送信されることへの対策ができます。
• バリデーションを適切に行い、SQL インジェクション等の脆弱性も考慮しましょう。

まとめ

<textarea> はユーザーから複数行の入力を受け取るための基礎的な HTML 要素ですが、多様な属性や CSS、JavaScript を組み合わせることで、以下のような幅広い機能や使い勝手を実現できます。

• 基本的な属性 (rows, cols, name, placeholder, disabled, readonly など) で単純な複数行入力フォームを手早く作成。
• HTML5 の追加属性 (maxlength, required など) やイベント処理でバリデーションを強化。
• CSS の柔軟な設定 (width, height, resize, box-sizing など) でレイアウトを調整し、ユーザー体験を高める。
• アクセシビリティ (ラベルとの連携や ARIA 属性) を考慮して、より多くのユーザーに使いやすいフォームを実装。
• 高度な応用 (自動サイズ調整やカスタムスクロールバー、リッチテキストエディタとの連携) により、エディタライクな入力フォームを構築。
• セキュリティ (XSS 対策や文字数制限、サーバーサイドでのエスケープ) をきちんと行うことで安全性の高いフォームに。

これらのポイントを押さえることで、単なる長文入力欄としてだけでなく、ユーザーや開発者にとってより利便性の高いフォームを作り上げることができます。ぜひ実際のプロジェクトに取り入れ、要件に合った最適な実装を目指してください。