【簡単】HTMLのtextareaを基本から実例付きで丁寧に解説

（最終更新日：2023年6月）

✔以下のような疑問を持つ方へ向けた記事となります

「HTMLのtextarea要素って何に使うのだろうか？」
「HTMLのtextarea要素の使い方を詳しく知りたい」
「HTMLでtextarea要素を用いた具体的な例を見てみたい」

✔本記事で提供する内容

HTMLのtextarea要素の基本的な理解
textarea要素の使い方とその応用
textarea要素を用いたHTMLの実例

この記事では、HTMLのtextarea要素の基本的な使い方から、さまざまな具体例を交えて丁寧に解説します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/06 14:23:00時点 Amazon調べ-詳細)

HTMLの基礎とテキストエリア要素

こちらでは、HTMLの基礎とテキストエリア要素についてお伝えしていきます。

まずは基礎をおさえたうえで、テキストエリアについて学びましょう。

HTMLの基本的な概念とテキストエリアの位置付け
「textarea」タグの基本的な説明と特性

HTMLの基本的な概念とテキストエリアの位置付け

HTML（HyperText Markup Language）は、ウェブページを作成するための言語です。

HTMLの要素は、”タグ”と呼ばれるマークアップを使用して構成されています。

<p></p>
<div></div>

テキストエリアは、HTMLの中でも一部の要素。

ユーザーが自由にテキストを入力できる領域を作成する役割です。

このテキストエリアは、「textarea」タグを使用して定義されます。

「textarea」タグの基本的な説明と特性

「textarea」タグは、複数行のテキスト入力フィールドを作成するためのHTMLの要素です。

この要素は、ユーザーが自由にテキストを入力、編集できる領域を提供します。

特に、ユーザーから大量のテキストデータを収集する際や、ユーザーに自由に意見や感想を書き込んでもらう場面などで使用されます。

<textarea id="message" name="message" rows="4" cols="50"></textarea>

ユーザー入力とその扱い

ユーザー入力とその扱いについて見ていきましょう。

テキストエリアでは、ユーザーの入力をどう扱うかが大切です。

ユーザー入力の重要性と入力要素の種類
「textarea」タグが必要となるケースの概観

ユーザー入力の重要性と入力要素の種類

ウェブページは、単に情報を表示するだけでなく、ユーザーとの対話も重要な要素です。

ユーザーからの入力は、ウェブサイトがユーザーの要望や意見を収集し、それに応える手段となります。

HTMLにはこのユーザー入力を受け付けるためのさまざまな要素があります。

input
button
textarea

「textarea」タグが必要となるケースの概観

「textarea」タグは、ユーザーから長文の入力を受け付ける場合に重宝します。

例えば以下のようなケースです。

フィードバックフォーム
意見調査
ブログのコメントセクション

これにより、ユーザーは自由に自分の意見や感想を表現できます。

「textarea」タグの詳細な利用方法

「textarea」タグの詳細な利用方法についてお伝えします。

こちらを理解すれば使いこなせるようになるでしょう。

「textarea」タグの基本的な書き方と属性
よく使う属性：cols, rows, readonlyなど

「textarea」タグの基本的な書き方と属性

「textarea」タグはHTML文書内で、次のように使用します。

<textarea>
ここにデフォルトのテキストを記述できます。
</textarea>

開始タグと終了タグの間にデフォルトのテキストを配置できます。

「textarea」タグの属性を活用し、テキストエリアの振る舞いをカスタマイズしていくこともおすすめです。

よく使う属性：cols, rows, readonlyなど

「textarea」の見た目と振る舞いを制御するための主要な属性をご紹介します。

「cols」：テキストエリアの幅（文字単位）
「rows」：高さ（行数）
「readonly」：ユーザーがテキストを編集できないようにする

実例はこちらです。

<!DOCTYPE html>
<html>
<head>
  <title>Textarea Attributes Example</title>
  <style>
    textarea {
      width: 300px;
      height: 100px;
    }
  </style>
</head>
<body>
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message" cols="30" rows="5"></textarea>

  <br>

  <label for="readonly-message">読み取り専用メッセージ:</label>
  <textarea id="readonly-message" name="readonly-message" cols="30" rows="5" readonly>このテキストは編集できません。</textarea>
</body>
</html>

「textarea」タグの実際の使用例

「textarea」タグの使用例をご紹介します。

使用例を見ることで、実践で即使えるようになるでしょう。

基本的な「textarea」の使用例とその解説
属性”minlength”, “maxlength”, “placeholder”を利用した応用例

基本的な「textarea」の使用例とその解説

基本的な「textarea」の使用例を次に示します。

<textarea cols="30" rows="5">
ここにデフォルトのテキストを記述できます。
</textarea>

この例では、テキストエリアは幅30文字、高さ5行と定義されています。

デフォルトのテキストは「ここにデフォルトのテキストを記述できます。」となります。

属性”minlength”, “maxlength”, “placeholder”を利用した応用例

「minlength」、「maxlength」、「placeholder」などの属性を利用した「textarea」の例です。

<textarea cols="30" rows="5" minlength="10" maxlength="100" placeholder="ここにコメントを入力してください。">
</textarea>

こちらのコードは以下を意味します。

「minlength」属性：テキストエリアの最小文字数を10
「maxlength」属性：最大文字数を100に設定
「placeholder」属性：テキストエリアが空欄のときに表示されるヒントテキストを提供

ユーザーがテキストエリアをクリックすると、「placeholder」のテキストは消えます。

CSSでの「textarea」タグのスタイル付け

こちらでは、CSSでの「textarea」タグのスタイル付けについてお伝えします。

実践では、サイトテーマに合わせてカスタマイズが必須でしょう。

CSSを用いた基本的なスタイル付け
スタイルリングでの微調整

CSSを用いた基本的なスタイル付け

「textarea」タグはCSSを用いてスタイルを追加できます。

以下の例では、テキストエリアの背景色をライトグレーに、文字色をダークグレーに設定しています。

textarea {
    background-color: lightgrey;
    color: darkgrey;
}

CSSを用いてテキストエリアの枠線の色や太さ、角の丸みなども制御することも可能です。

<!DOCTYPE html>
<html>
<head>
  <title>Styled Textarea Example</title>
  <style>
    /* テキストエリアのスタイル */
    .custom-textarea {
      width: 300px;
      height: 100px;
      border: 2px solid #ccc; /* 枠線の色と太さを指定 */
      border-radius: 5px; /* 角の丸みを指定 */
      padding: 10px; /* テキストと枠線の間の余白を指定 */
      font-family: Arial, sans-serif; /* フォントを指定 */
      font-size: 14px; /* フォントサイズを指定 */
    }
  </style>
</head>
<body>
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message" class="custom-textarea"></textarea>
</body>
</html>

スタイルリングでの微調整

テキストエリアのスタイリングには、ベースラインの整合性やテキストエリアのサイズの制御など、微調整が必要な場合があります。

大きな入力フォームなので、他パーツとのバランスが大切になるからです。

たとえば「vertical-align」プロパティを使用して、以下のようなことが可能。

テキストエリアと他の要素との垂直方向の位置関係を調整
テキストエリアが有効（入力可能）か無効（入力不可）かによって異なるスタイルを適用

<!DOCTYPE html>
<html>
<head>
  <title>Styled Textarea Example</title>
  <style>
    .custom-textarea {
      width: 300px;
      height: 100px;
      border: 2px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      vertical-align: middle; /* テキストエリアを中央に配置 */
    }

    .custom-textarea[disabled] {
      background-color: #f2f2f2; /* 無効な場合の背景色 */
      cursor: not-allowed; /* 無効な場合のカーソルスタイル */
    }
  </style>
</head>
<body>
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message" class="custom-textarea"></textarea>

  <br>

  <label for="disabled-message">無効なメッセージ:</label>
  <textarea id="disabled-message" name="disabled-message" class="custom-textarea" disabled></textarea>
</body>
</html>

「textarea」タグの注意点

こちらでは、「textarea」タグの注意点についてお伝えします。

よく使うinputとは異なる特徴があるので注意しましょう。

アクセシビリティとユーザビリティの視点からの注意点
無効と読み取り専用の利用例

アクセシビリティとユーザビリティの視点からの注意点

「textarea」タグの利用に際しては、アクセシビリティとユーザビリティの視点からの注意点があります。

なぜなら大きなテキストエリアは、ユーザーにとって扱いが難しくなる可能性があるからです。

解決策として、適切な大きさを設定しましょう。

また、視覚的な障害を持つユーザーを考慮して、「label」タグを用いてテキストエリアに明確なラベルを提供することも大切です。

これにより、スクリーンリーダーを利用しているユーザーがテキストエリアの目的を理解するのに役立ちます。

無効と読み取り専用の利用例

「textarea」タグには、「disabled」属性と「readonly」属性という2つの属性があります。

これらはユーザーがテキストエリアの内容を編集することを防ぐ効果がありますが、その振る舞いには微妙な違いがあります。

「disabled」属性：ユーザーが全く操作できない
「readonly」属性：コピー可/編集不可

これらの属性は、適切な状況下で適切に使い分けることが重要です。

「textarea」タグと他のフォーム要素の関連性

こちらでは、「textarea」タグと他のフォーム要素の関連性についてお伝えします。

ほかの要素と連携を取りながら、適切な場所に配置しましょう。

「input」タグとの比較と適切な使用場面
「button」タグとの組み合わせ

「input」タグとの比較と適切な使用場面

「input」タグと「textarea」タグの使いどころは、大きく異なります。

「input」タグ：一行のテキスト入力や選択入力（チェックボックスやラジオボタンなど）
「textarea」タグ：複数行のテキスト入力で、ユーザーが長文を入力する場合

適切なタグを適切な場面で使い分けることで、ユーザビリティを高められるでしょう。

「button」タグとの組み合わせ

「textarea」タグはしばしば「button」タグと組み合わせて使われます。

「button」タグにより、ユーザーの入力を送信できるのです。

たとえば、コメントフォームでは「textarea」タグでコメントを入力し、「button」タグで「送信」ボタンを提供するといった使い方が一般的です。

<form>
    <textarea placeholder="ここにコメントを入力"></textarea>
    <button type="submit">送信</button>
</form>

「textarea」タグのブラウザー互換性と技術的概要

「textarea」タグのブラウザー互換性と技術的概要について見ていきましょう。

タグによっては、ブラウザで使えないものもあるのです。

「textarea」タグのブラウザー間の互換性
「textarea」タグの技術的概要と仕様書の紹介

「textarea」タグのブラウザー間の互換性

「textarea」タグはほとんどのブラウザで広くサポートされていますが、ブラウザによっては細部の挙動が異なります。

例えば、テキストエリアのサイズを変更することを可能にする「resize」プロパティは、一部のブラウザではサポートされていません。

さまざまなブラウザでテストをおこない、すべてのユーザーに対して一貫した体験を提供できるかの検証をおすすめします。

「textarea」タグの技術的概要と仕様書の紹介

「textarea」タグの詳細な技術的仕様は、World Wide Web Consortium (W3C) が公開しているHTML仕様書に記載されています。

この仕様書はウェブ標準を定める公式文書であり、詳細な情報や最新の機能について確認できるものです。

HTMLの主要な要素一覧

HTMLは多数の要素を持っており、それぞれが特定の目的のために使用されます。

以下に主要なものを挙げます。

要素名	特徴	例
`<h1>`	見出しを表現する	`<h1>見出し1</h1>`
`<p>`	段落を表現する	`<p>これは段落です。</p>`
`<a>`	リンクを作成する	`<a href="https://example.com">リンク</a>`
`<img>`	画像を挿入する	`<img src="image.jpg" alt="画像">`
`<ul>`	順序のないリスト（箇条書きリスト）	`<ul><li>項目1</li><li>項目2</li></ul>`
`<ol>`	順序のあるリスト（番号付きリスト）	`<ol><li>項目1</li><li>項目2</li></ol>`
`<table>`	表を作成する	`<table><tr><td>セル1</td><td>セル2</td></tr></table>`
`<form>`	フォームを作成する	`<form><input type="text"><input type="submit"></form>`