【2026年8月最新】HTMLのtextareaタグの使い方を解説|複数行入力フォームの作り方とinputタグとの違い、非エンジニアが知っておくべきポイント
「お問い合わせフォームに、お客様がご要望を自由に書き込める欄を追加したい」「アンケートフォームで複数行の感想を入力してもらいたい」——ホームページの改善を考えているとき、こうしたニーズに直面したことはないでしょうか。
その「複数行にわたる自由なテキスト入力欄」を作るためのHTMLタグが、今回解説するtextarea(テキストエリア)タグです。名前だけ聞くとエンジニア向けの専門用語に思えるかもしれませんが、実は「お問い合わせフォームのご要望欄」「アンケートの自由記述欄」「口コミサイトのレビュー欄」など、日常的に目にしているWebサイトの機能そのものです。
この記事では、textareaタグの基本的な使い方から、rows・cols・maxlength・readonlyといった主要な属性の意味、よく比較されるinputタグとの違い、実務でよくあるお問い合わせフォームでの使い方、そして非エンジニアの方がAIを使ってフォーム改善を進める方法まで、専門知識がなくても理解できるよう順を追って解説します。
この記事を最後まで読むと、次の7つが明確になります。
01 WHAT IS TEXTAREA textareaタグとは何か HTMLフォームにおける複数行テキスト入力欄の基礎
まず基礎知識から整理しましょう。textareaタグは、HTML(Webページの構造を記述する言語)において、複数行にわたる自由なテキストを入力できる欄を作るためのタグです。ユーザーが改行を含む長文を入力できる点が最大の特徴で、Webサイトの「お問い合わせフォーム」「アンケート」「レビュー投稿欄」「掲示板の投稿欄」など、幅広い場面で使われています。
📚 用語解説
HTML(エイチティーエムエル):Webページの見出し・段落・画像・フォームなどの「構造」を記述するための言語(HyperText Markup Language の略)。ブラウザはHTMLを読み取って画面にページを表示します。textareaタグはHTMLが持つ数多くのタグの1つです。
私たちが普段目にする「お問い合わせフォームの本文欄」や「アンケートの自由記述欄」の多くは、このtextareaタグによって作られています。裏側の仕組みを知らなくても普段は使えますが、フォームの改善を依頼する立場(経営者・マネージャー・広告担当者など)になった瞬間、「なぜこの欄は3行しか見えないのか」「文字数制限はどこで設定されているのか」といった疑問に自分で答えられると、外部制作会社やAIへの指示が驚くほどスムーズになります。
📚 用語解説
フォーム(Form):Webサイト上でユーザーが情報を入力し、送信できる仕組み全体のこと。名前・メールアドレス・お問い合わせ内容など、複数の入力欄(部品)を組み合わせて1つのフォームが構成されています。textareaタグは、そのフォームを構成する部品の1つです。
1-1. どんな場面でtextareaタグが使われているか
身近な例で考えてみましょう。ネット通販サイトで商品レビューを書くとき、数百文字の感想を書き込める欄がありますが、あれもtextareaタグです。会社のホームページの「お問い合わせフォーム」で「ご要望・ご質問」を自由に書ける欄も同様です。「1行で終わらない、複数行の自由な文章を入力してもらいたい」場面では、ほぼ必ずtextareaタグが使われていると考えて差し支えありません。
02 BASIC SYNTAX textareaタグの基本的な書き方 開始タグ・終了タグ・name属性の役割
textareaタグの最も基本的な書き方は、次のようになります。
<textarea name="message" rows="5" cols="40"></textarea>
ここでポイントになるのが、textareaタグには必ず終了タグ(</textarea>)が必要だという点です。似たような役割を持つinputタグ(後述)は終了タグが不要な「単独タグ」ですが、textareaタグは開始タグと終了タグで文章全体を囲む「コンテナ型」のタグになっています。
📚 用語解説
コンテナ型タグ:開始タグと終了タグのペアで中身を囲む形式のHTMLタグ。<p>...</p>(段落)や<div>...</div>(区切り)などが代表例。textareaタグもこの形式に属し、開始タグと終了タグの間に書いた文字が「初期表示テキスト」として画面に表示されます。
textareaタグの開始タグと終了タグの間に書いた文字は「初期値(あらかじめ入力された状態の文字)」として扱われます。「入力例」のような薄いグレーの案内文を表示したい場合は、後述するplaceholder属性を使うのが正解です。両者を混同すると、ユーザーが送信ボタンを押したときに「入力例の文字」がそのまま送信されてしまう事故が起きるため注意してください。
2-1. name属性の役割
textareaタグには通常、name属性を指定します。これは「このtextareaに入力された内容を、サーバー側でどの名前のデータとして受け取るか」を決めるためのものです。フォームを送信すると、name属性で指定した名前(上の例では「message」)と、ユーザーが入力した内容がセットでサーバーに送られます。
📚 用語解説
name属性:フォーム部品(textarea・input・selectなど)に付ける「識別名」。フォーム送信時、この名前をキーにして入力内容がサーバー側のプログラムに渡される。お問い合わせフォームで「お名前」欄と「お問い合わせ内容」欄を区別して受信できるのは、この属性のおかげ。
name属性が正しく設定されていないと、フォームを送信してもサーバー側で「どの欄に何が入力されたか」を正しく判別できず、お問い合わせメールの内容欄が空欄になってしまう、といった不具合につながります。フォームの動作確認を依頼するときは、この点も念頭に置いておくとよいでしょう。
1つのフォーム内で同じname属性の値を複数のtextareaやinputに設定すると、データが正しく送信されない・後から送信された値で上書きされてしまう、といった不具合が起きます。フォームを改修する際は、name属性が他の入力欄と重複していないか必ず確認してください。
03 ATTRIBUTES textareaタグの主要な属性一覧 rows・cols・maxlength・readonly・placeholder・requiredの意味と使い方
textareaタグには、入力欄の見た目や動作を細かく制御するための「属性」がいくつも用意されています。ここでは実務でよく使われる主要な6つを解説します。
| 属性 | 役割 | 指定例 |
|---|---|---|
| rows | 入力欄の表示行数(高さ)を指定 | rows="5" |
| cols | 入力欄の表示幅(1行あたりの文字数目安)を指定 | cols="40" |
| maxlength | 入力できる最大文字数を制限 | maxlength="500" |
| placeholder | 未入力時に薄く表示する案内文 | placeholder="ご要望をご記入ください" |
| readonly | 内容の閲覧はできるが編集はできない状態にする | readonly |
| required | このtextareaへの入力を送信の必須条件にする | required |
3-1. rows属性・cols属性で入力欄のサイズを決める
rows属性は入力欄の「高さ(表示される行数)」を、cols属性は入力欄の「幅(1行あたりのおおよその文字数)」を指定します。例えばrows="5" cols="40"と書くと、5行分の高さ、40文字幅程度の入力欄が表示されます。
ここで重要なのは、rows・cols属性はあくまで「表示上の大きさ」を決めているだけで、入力できる文字数そのものを制限しているわけではないという点です。5行分の高さしかなくても、ユーザーはその中でいくらでもスクロールしながら長文を入力できます。文字数を制限したい場合は、次に説明するmaxlength属性を使う必要があります。
📚 用語解説
CSS(シーエスエス):Webページの色・余白・サイズなど「見た目」を調整するための言語(Cascading Style Sheets の略)。textareaタグのサイズをより柔軟に・レスポンシブに(スマホでも見やすく)調整したい場合は、rows/cols属性だけでなくCSSも組み合わせて使うのが実務では一般的です。
3-2. maxlength属性で文字数制限をかける
maxlength属性を指定すると、そのtextareaに入力できる最大文字数を制限できます。例えばmaxlength="500"と指定すれば、ユーザーは501文字目以降を入力できなくなります。お問い合わせフォームやアンケートで「文字数制限あり」と案内されている欄は、多くの場合この属性で実現されています。
maxlength属性そのものには「残り〇文字」を画面にリアルタイム表示する機能は含まれていません。「現在の入力文字数/上限文字数」をユーザーに見せたい場合は、JavaScript(Webページに動きを付けるプログラム言語)を別途組み合わせる必要があります。この部分は非エンジニアの方が自力で実装するにはやや専門性が高いため、外部の制作会社やAIツールに依頼するのが現実的です。
3-3. placeholder属性で入力例・案内文を表示する
placeholder属性は、ユーザーが何も入力していない状態のときに、薄いグレー文字で「入力例」や「案内文」を表示するための属性です。「ご要望・ご質問をご自由にご記入ください」のような案内文をよく見かけますが、あれがplaceholder属性です。ユーザーが実際に文字を入力し始めると、この案内文は自動的に消えます。
placeholder属性で指定した文字は、あくまで「案内表示」であり、フォームを送信してもサーバーには送られません。「初期値としてあらかじめ何か文字を入力させておきたい」場合は、2章で説明した開始タグと終了タグの間に文字を書く方法を使う必要があります。この2つを混同すると、「案内文のつもりが実際に送信されてしまう」「逆に送られると思っていた文字が送られない」という不具合の原因になります。
3-4. readonly属性・disabled属性で編集を制限する
readonly属性を指定すると、その入力欄は「閲覧はできるが編集はできない」状態になります。似た属性にdisabled属性がありますが、両者には重要な違いがあります。
| 属性 | 編集の可否 | フォーム送信時のデータ | 主な用途 |
|---|---|---|---|
| readonly | 不可(表示のみ) | 送信される | 確認画面での表示、規約文の表示など |
| disabled | 不可(表示のみ) | 送信されない | 条件によって一時的に無効化したい入力欄 |
例えば「確認画面で、前の画面に入力した内容をそのまま表示するが編集はさせたくない」場合はreadonly属性、「特定の条件を満たすまでこの欄自体を使わせたくない(かつ送信データにも含めたくない)」場合はdisabled属性、というように使い分けます。
3-5. required属性で入力を必須にする
required属性を指定すると、そのtextareaへの入力がフォーム送信の必須条件になります。未入力のまま送信ボタンを押すと、ブラウザが自動的に「この項目を入力してください」という案内を表示し、送信をブロックしてくれます。お問い合わせフォームの「お問い合わせ内容」欄など、空欄では困る項目に付けるのが一般的です。
サイズ決定
文字数制限
案内文表示
入力必須化
04 VS INPUT TAG inputタグとの違いと使い分け 「1行の入力」と「複数行の入力」をどう線引きするか
HTMLのフォームでよく比較されるのが、inputタグとの違いです。お名前・メールアドレス・電話番号などの入力欄はinputタグ、ご要望・ご質問などの複数行入力欄はtextareaタグ、という使い分けが一般的ですが、なぜそうなっているのかを整理しておきましょう。
📚 用語解説
inputタグ:HTMLのフォームで最もよく使われるタグの1つ。type属性の指定次第で、1行のテキスト入力欄(type="text")、メールアドレス入力欄(type="email")、チェックボックス(type="checkbox")、ラジオボタン(type="radio")など、多様な入力部品を1つのタグで作れる汎用的な仕組みになっています。
| 項目 | inputタグ | textareaタグ |
|---|---|---|
| 入力できる行数 | 基本的に1行のみ | 複数行(改行を含む) |
| 終了タグ | 不要(単独タグ) | 必須(</textarea>) |
| サイズ指定 | size属性(文字数目安) | rows・cols属性(行数・幅) |
| 主な用途 | 氏名・メール・電話番号・パスワード等 | ご要望・アンケート回答・コメント等 |
| type属性 | あり(text/email/tel等、多数の種類) | なし(textareaはtype指定不要) |
4-1. なぜお名前欄はinput、ご要望欄はtextareaなのか
お問い合わせフォームを例に考えると分かりやすいでしょう。「お名前」「メールアドレス」「電話番号」は、通常1行で完結する定型的な情報です。改行して複数行にわたって入力される想定がないため、inputタグが使われます。一方「ご要望・ご質問」は、ユーザーによって1行で終わることもあれば、数百文字にわたる場合もあります。こうした可変長で複数行になり得る自由記述には、textareaタグが適しています。
4-2. 誤った使い分けが引き起こす不便
もし複数行の自由記述欄をinputタグで作ってしまうと、ユーザーは改行できず、長い要望を1行に詰め込んで書かざるを得なくなり、非常に読みにくいテキストになってしまいます。逆に、1行で済む「お名前」欄をtextareaで作ってしまうと、無駄に縦長のフォームになり、ユーザーが「ここは何行入力すればいいのか」と戸惑う原因になります。
05 PRACTICAL EXAMPLE 実践:お問い合わせフォームでのtextareaタグ活用 formタグと組み合わせた具体的なコード例と、業務目線での注意点
ここまでの内容を踏まえて、実際にお問い合わせフォームを想定した簡単なコード例を見てみましょう。
<form action="/contact/submit" method="post">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="8" cols="50" maxlength="1000" placeholder="ご質問・ご要望をご自由にご記入ください" required></textarea>
</form>
このコードでは、8行分の高さ・50文字幅の入力欄を用意し、最大1000文字までの入力を許可し、未入力の案内文(placeholder)を表示しつつ、入力を必須(required)にしています。実務のフォームでは、この程度の属性の組み合わせが標準的です。
📚 用語解説
formタグ:フォーム全体を囲むHTMLタグ。action属性で「送信先」を、method属性で「送信方法(postやget)」を指定する。textareaタグやinputタグは、このformタグの中に配置することで、初めて「1つのまとまったフォーム」として機能する。
📚 用語解説
labelタグ:フォームの入力欄に「これは何を入力する欄か」というラベルを紐付けるためのタグ。for属性の値と、対応する入力欄のid属性の値を一致させることで、ラベル文字をクリックしても入力欄にカーソルが移動するようになり、使い勝手(アクセシビリティ)が向上する。
5-1. 業務目線で気をつけたい3つのポイント
制作会社やAIにフォーム改修を依頼する立場として、次の3点は最低限押さえておくと、やり取りがスムーズになります。
5-2. CSSでtextareaの見た目を整える
rows・cols属性だけでは細かい見た目の調整(角丸・余白・枠線の色・スマホでの幅調整など)が難しいため、実務ではCSSを併用するのが一般的です。例えば「幅を画面いっぱいに広げつつ、高さだけrows属性で制御する」といった調整は、CSSのwidth: 100%;のような指定と組み合わせて実現します。
CSSのresizeプロパティを使うと、ユーザーがtextareaの右下をドラッグしてサイズを変更できる機能を、有効にしたり無効にしたりできます。フォームのレイアウトを崩されたくない場合は resize: none; を指定して無効化するのも1つの選択肢です。
06 COMMON PITFALLS textareaタグでよくあるつまずきポイント 非エンジニアが遭遇しやすい5つの不具合パターンと対処法
textareaタグ自体はシンプルですが、実際の運用では細かい不具合に遭遇することがあります。ここでは、非エンジニアの方が「あれ、おかしいな」と感じやすい代表的な5つのパターンを紹介します。
6-1. 改行がメールで反映されない
お問い合わせフォームで複数行に分けて入力したはずなのに、届いたメールでは改行が消えて1行につながって表示される、というトラブルがあります。これはtextareaタグ自体の問題ではなく、サーバー側でメール本文を組み立てる処理(PHPなどのプログラム)で改行コードが正しく扱われていないことが原因であるケースがほとんどです。フォームの見た目だけでなく、送信後のメール本文まで含めて動作確認することが大切です。
6-2. 文字数制限にかかっているのに気づかれない
maxlength属性で文字数を制限している場合、上限に達するとそれ以上は何も反応せず、ただ入力できなくなるだけの挙動になります。制限に気づかず「なぜか途中で文章が切れて送信された」と困惑するユーザーが出ることがあるため、上限に近づいたら警告を出す、または残り文字数を表示するといった配慮が実務では求められます。
6-3. 初期値と案内文(placeholder)を混同してしまう
3章でも触れた通り、開始タグと終了タグの間に書いた文字は「初期値」として送信対象になりますが、placeholder属性の文字は送信されません。この違いを知らずに実装すると、「入力例のつもりで書いた文字がそのままお問い合わせとして送信されてしまった」という事故につながります。
6-4. スマホでの表示崩れ
cols属性やCSSでの幅指定が固定値になっていると、スマホの狭い画面幅では入力欄が画面からはみ出したり、逆に極端に小さくなったりすることがあります。レスポンシブ対応(画面幅に応じて自動調整するCSS設計)がされているかどうかは、公開前に必ずスマホ実機かブラウザの表示確認機能でチェックすべきポイントです。
6-5. スクロール操作がページ全体のスクロールと競合する
textarea内でスクロールしようとしたのに、意図せずページ全体がスクロールしてしまう、という操作性の不具合も起こり得ます。特にスマホでは、入力欄の高さ(rows属性)が短すぎると起きやすい現象です。長文入力が想定される欄では、ある程度余裕を持った行数を確保しておくと、ユーザーのストレスを減らせます。
フォームの見た目だけを確認して「問題なさそう」と判断するのは危険です。実際にテスト送信を行い、(1)画面上での入力・表示、(2)送信後にメールやシステムへ正しくデータが届くか、(3)スマホでの表示、の3点をセットで確認することを強くおすすめします。
入力・表示確認
データ到達確認
表示確認
07 AI-ASSISTED FORM IMPROVEMENT 非エンジニアでもフォーム改善をAIに任せられる時代 HTMLの知識がなくてもClaude Codeに指示できる理由
ここまでtextareaタグの仕様を細かく見てきましたが、正直なところ「毎回コードを自分で書く」必要はありません。むしろ重要なのは、「こういう入力欄が欲しい」という要件を、AIや制作会社に的確に伝えられることです。近年はClaude CodeのようなAIコーディングツールが登場し、非エンジニアでも日本語での指示だけでフォームの改修を進められる時代になっています。
📚 用語解説
Claude Code:Anthropic社が提供するAIコーディングツール。「お問い合わせフォームのご要望欄を、文字数制限500文字にして、スマホでも見やすく調整して」のように日本語で指示するだけで、AIが該当するHTML・CSSのコードを読み取り、修正案を作成してくれる。プログラミングの専門知識がなくても、要件さえ明確に伝えられれば具体的な改修を進められる。
例えば、この記事で解説してきた内容を踏まえると、次のような指示がAIに対して的確な依頼文になります。
こうした指示は、専門用語(rows、maxlength等)を知らなくても「行数を増やしたい」「文字数を制限したい」という目的ベースの言葉で伝えれば、AIが適切な属性・コードに変換してくれます。この記事で用語を理解しておけば、より具体的で誤解のない指示ができるようになる、という位置付けです。
7-1. 弊社GENAIでの実運用例:フォーム改修もClaude Codeで内製化
弊社(株式会社GENAI)では、Claude Max 20xプラン(月額$200・約30,000円)を契約し、営業・広告運用・記事制作・経理・秘書業務まで社内のあらゆる業務にClaude Codeを組み込んでいます。ホームページやLP(ランディングページ)のtextarea・input周りの細かい改修も、その一部です。
従来であれば「フォームの入力欄を1つ調整する」だけでも外部の制作会社に依頼し、見積もり・修正依頼・確認までに数日かかることが珍しくありませんでした。現在は、社内の担当者がClaude Codeに日本語で改修内容を伝えるだけで、数十分〜数時間の単位でコード修正・動作確認まで完結するケースが増えています(案件の複雑さにより変動する概算値です)。
| 工程 | 従来(外注中心) | AI活用後(社内完結) |
|---|---|---|
| フォーム仕様の要件整理 | 打ち合わせ・見積もり待ちで数日 | Claude Codeに日本語で直接指示 |
| HTML/CSSの修正実装 | 外注先の対応待ちで数日 | Claude Codeが数十分〜数時間で修正 |
| スマホ表示の確認 | 納品後に別途確認依頼 | その場でスクリーンショット確認まで完結 |
| 細かい微調整の反復 | 都度追加見積もりが発生しがち | 追加コストなく即時に反復調整 |
7-2. 発注・指示のときに意識したい3つのコツ
AIや制作会社にフォーム改修を依頼する際、この記事の内容を踏まえて意識したいポイントを整理します。
AIによるコード修正は非常に速く進むからこそ、一度に多くの変更依頼を詰め込むと、確認漏れが起きやすくなります。「まずご要望欄の文字数制限だけ」「次にスマホ表示の調整だけ」のように、小さい単位で確認しながら進めるのが、非エンジニアの方でも安全にAI活用を進めるコツです。
08 CONCLUSION まとめ ── textareaタグを理解すると、フォーム改善の指示が的確になる 基本属性・inputタグとの違い・AI活用のポイントを振り返る
この記事では、HTMLのtextareaタグの基本的な使い方から、rows・cols・maxlength・readonly・placeholder・requiredといった主要属性の意味、inputタグとの違い、お問い合わせフォームでの実践例、よくあるつまずきポイント、そして非エンジニアの方がAIを活用してフォーム改善を進める方法までを解説しました。最後にポイントを振り返ります。
最も伝えたいメッセージは、「HTMLタグの細部を自分で書けるようになる必要はないが、仕組みを理解しておくことで、外部の制作会社やAIへの指示が格段に的確になる」という点です。textareaタグという小さな入り口から、フォーム改善やAI活用の一歩を踏み出していただければ幸いです。
よくある質問
Q. textareaタグとinputタグ、結局どちらを使えばいいですか?
A. 入力してもらいたい情報の性質で判断します。お名前・メールアドレス・電話番号のように1行で完結する定型的な情報にはinputタグを、お問い合わせ内容やアンケートの自由記述のように複数行にわたる可能性がある文章にはtextareaタグを使うのが基本です。改行を含む長文が想定されるかどうかが判断基準になります。
Q. textareaの入力欄のサイズはどうやって決めればいいですか?
A. rows属性で高さ(行数)、cols属性で幅(1行あたりの文字数目安)を指定できますが、実務ではCSSと組み合わせて、スマホでも見やすい幅に自動調整するのが一般的です。想定される入力文章の長さから、ある程度余裕を持った行数(例えば5〜8行程度)を確保しておくと、ユーザーが窮屈に感じにくくなります。
Q. 文字数制限はどうやってかければいいですか?
A. maxlength属性に上限の数値を指定します。例えばmaxlength="500"とすると500文字までしか入力できなくなります。ただしこの属性だけでは「残り文字数の表示」はされないため、ユーザーに分かりやすく伝えたい場合は、別途JavaScriptで文字数カウンターを実装する必要があります。
Q. placeholderに書いた文字は、そのままお問い合わせ内容として送信されますか?
A. 送信されません。placeholder属性の文字は、あくまで未入力時に表示される案内文であり、フォーム送信データには含まれません。逆に、開始タグと終了タグの間に直接書いた文字は「初期値」として扱われ、ユーザーが編集しなければそのまま送信されるため、この2つを混同しないよう注意が必要です。
Q. readonly属性とdisabled属性はどう違いますか?
A. どちらも「編集できない」状態にする点は共通していますが、readonly属性を指定した入力欄はフォーム送信時にデータが送られるのに対し、disabled属性を指定した入力欄は送信データに含まれません。確認画面での表示にはreadonly、条件によって一時的に使用不可にしたい場合はdisabledというように使い分けます。
Q. プログラミングの知識がなくても、textareaタグの改修をAIに依頼できますか?
A. 依頼できます。「入力欄の高さを広げたい」「文字数を制限したい」「スマホで見やすく調整したい」といった目的ベースの言葉で伝えれば、Claude CodeのようなAIコーディングツールが適切なHTML・CSSのコードに変換して修正してくれます。この記事で紹介した属性の意味を理解しておくと、より具体的で誤解のない指示ができるようになります。
フォーム改善やホームページの細かい修正、Claude Codeで内製化しませんか
textareaタグの調整のような小さな修正から、業務システム全体のAI活用まで。
弊社の実運用ノウハウをベースに、貴社のWeb改善・業務自動化の内製化をご支援します。
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code/Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの70〜80%が目安、月額基本料は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか?
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理/AIBPO by AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。




