VIDEO LESSON

HTMLのtextareaタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:48動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の十三本目は、テキストエリアタグです。
0:06これは、複数行の文章を入力できる欄を作るためのタグです。
0:10たとえば、お問い合わせフォームで質問を詳しく書いてもらう場面や、商品レビューの感想欄、
0:16アンケートの自由記述欄など、一行では入り切らない長めの文章を受け取りたいときに使います。
0:21今回は、一行入力との違いから、基本の書き方、初期値の書き方、大きさや文字数の指定、
0:26そして記事の活用事例まで、初心者向けに順番に解説します。
0:30長い文章を気持ちよく書いてもらえるフォームを作れるようになりましょう。
0:35まず、似た役割のインプットとの違いを押さえましょう。
0:39インプットのテキストタイプは、名前やメールアドレスのような短い一行の入力に向いています。
0:46一方、テキストエリアは最初から複数行を書くことを前提にした欄で、入力中に改行もできます。
0:53もう一つの違いは書き方です。
0:55インプットは開始タグだけで完結しますが、テキストエリアは開始タグと終了タグを必ずセットで書きます。
1:03これは、後で学ぶ初期値をタグの間に書くためでもあります。
1:08一行で足りるか、長い文章になりそうか、内容の長さを想像して選ぶことが大切です。
1:14迷ったら、利用者がじっくり書きそうな欄はテキストエリアと考えてください。
1:20基本の書き方です。
1:22テキストエリアは、開始タグと終了タグを明示して使います。
1:26コード例では、まずラベルで感想という項目名を示し、ラベルのフォーとテキストエリアのアイディーを同じコメントにして対応付けています。
1:37そしてネーム属性のコメントが、フォームを送信したときに、入力内容と一緒に送られる名前、
1:41つまりキーになります。
1:46ラベルを対応付けておくと、項目名をクリックしただけでも入力欄にフォーカスが移り、
1:51読み上げソフトでも何を書く欄なのかが伝わります。
1:56フォームの部品は、単体で置かず、ラベルとセットで書く習慣を付けましょう。
2:02初期値、つまり最初から入っている文章の書き方が、このタグ最大の特徴です。
2:07インプットではバリュー属性に初期値を書きますが、テキストエリアにバリュー属性はありません。
2:14初期値は、開始タグと終了タグの間に、直接文章を書きます。
2:18コード例では、エイチティーエムエルについて質問です、という文が最初から入った状態で表示されます。
2:26ここで注意したいのは、タグの間に書いた改行や空白も、そのまま文字として扱われることです。
2:32見やすくしようと改行やインデントを入れると、その余分な空白まで初期値になってしまうため、
2:37文章はタグにぴったり寄せて書くのが基本です。
2:42欄の大きさの目安は、ローズとコルズという二つの属性で指定します。
2:47ローズは縦に何行分を表示するかの目安で、たとえばファイブと書けば五行分ほどの高さになります。
2:54コルズは横幅を文字数で表した目安で、四十と書けば一行に四十文字ほど入る幅が目安になります。
3:01ただし、これらはあくまで目安であり、実際の表示サイズはブラウザーやフォントによって少し変わります。
3:09スマホのような狭い画面でもはみ出さないよう、最終的な幅はシーエスエスで百分率などを使って調整すると安心です。
3:17長文を想定するなら、ローズは少し大きめにしておくと、利用者がスクロールせずに自分の文章を確認しやすくなります。
3:25入力の長さを整える属性を三つ紹介します。
3:28マックスレングスは入力できる文字数の上限で、たとえば五百と書けば五百文字までしか入力できません。
3:35ミニマムにあたるミニレングスは、最低限必要な長さを示します。
3:39ただし、空欄そのものを禁止したい場合は、後で紹介するリクワイアードも合わせて検討します。
3:46もう一つ、プレースホルダーは、まだ何も入力されていないときに薄く表示されるヒントです。
3:52感想を書いてください、のような短い例を示せます。
3:55ただしプレースホルダーは、入力を始めると消えてしまうため、項目名を伝えるラベルの代わりにはなりません。
4:03また、上限はブラウザー側だけでなく、サーバー側でも検証するのが安全です。
4:08状態を指定する三つの真偽属性の違いを確認します。
4:11リクワイアードは、値の入力を必須にする指定で、空のままでは送信時に注意が表示されます。
4:16リードオンリーは読み取り専用で、内容は読めますが書き換えはできません。
4:21ただし値は通常どおり送信されます。
4:23一方、ディスエイブルドは操作自体を無効にする指定で、欄はグレーになり、通常は送信の対象にもなりません。
4:30この三つは似て見えて結果が違うため、目的に合わせて選び分けてください。
4:34なお、真偽属性は、あるかないかで決まります。
4:37ディスエイブルド、イコール、フォルスと書いても無効化は解除されません。
4:42解除したいときは属性そのものを取り除きます。
4:45記事の活用事例を見てみましょう。
4:47テーマは、長い文章を入力できるようにすることです。
4:51コード例では、ラベルで質問という項目名を示し、フォーとアイディーをメッセージで対応付けています。
4:59テキストエリアには、送信時のキーになるネーム、五行分の高さを示すローズ、
5:04千文字までの上限を示すマックスレングスが指定され、タグの間には初期値として、
5:10エイチティーエムエルについて質問です、という文が入っています。
5:15試すときは、練習用ファイルにこのコードを貼り付けて保存し、再読み込みしてから、
5:20開発者ツールのエレメンツで構造を確認してください。
5:25入力して、改行や文字数の上限の動きも実際に確かめてみましょう。
5:30仕上げに、折り返しと見た目の調整です。
5:33ラップ属性は、画面上の折り返しと、送信される値に改行を含めるかの扱いを決めます。
5:40通常はソフトという扱いで、見た目は自動で折り返され、入力した改行だけが送信されます。
5:47見た目については、シーエスエスで幅を百分率にして親要素に合わせると、狭い画面でもはみ出しにくくなります。
5:56また、多くのブラウザーでは欄の右下をドラッグして高さを変えられます。
6:02記事では、固定の高さで内容が隠れないか確認し、必要以上にサイズ変更を禁止しないことが勧められています。
6:11利用者が自分の文章全体を見返せる余裕を残しておきましょう。
6:16ブラウザー互換性を確認します。
6:18記事が参照するエムディーエヌの記録では、テキストエリア本体は、クロームが一以降、
6:25エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
6:31古くからある基本的なフォーム部品なので、現在の主要なブラウザーでは安心して使えます。
6:37ただし注意したいのは属性ごとの差です。
6:40たとえばミニレングスは、クローム四十以降、ファイアフォックス五十一以降など、
6:45本体よりずっと後に追加されています。
6:49要素が使えても新しい属性が使えるとは限りません。
6:53新しい属性を使う場合は、本体とは別に対応状況を確認し、対象の実機でも試しておきましょう。
7:00最後に練習とまとめです。
7:02テキストエリアは、複数行の文章を入力できる欄を作るタグでした。
7:06大切なポイントは三つです。
7:08一つ目は、初期値はバリュー属性ではなく、開始タグと終了タグの間に書くこと。
7:14二つ目は、ラベルとアイディーを対応付け、ネームで送信時のキーを決め、ローズとコルズで大きさの目安を示すこと。
7:22三つ目は、マックスレングスなどの長さの制限と、リクワイアード、リードオンリー、
7:28ディスエイブルドといった状態の指定を、目的に合わせて使い分けることです。
7:33練習として、お問い合わせフォームに五行の質問欄を作り、初期値とプレースホルダーの違いを確かめるところから始めてみてください。
7:43お疲れさまでした。
7:44次回もHTMLタグを一つずつ学んでいきましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

textareaタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。複数行の入力欄。初期値は value 属性ではなく開始・終了タグの間に書きます。

解説記事・サンプルコードを読む：HTMLのtextareaタグとは？属性・使い方・ブラウザー互換性と活用例 →