【HTML】textareaタグで複数行の長いテキスト入力を受け付ける方法

このページについて

このページではHTMLで使う事ができるtextareaの機能と使い方を解説しています。

textareaはその名の通り、テキストエリアです。HTMLにはユーザーに入力してもらうタグというのはいくつか存在しますが、inputタグは短いテキストを受け付けるのに適しています。対するtextareaは複数行のテキストOKという性質を持っています。

一応、このtextareaで保持できるテキストの数は無制限とされていますが属性の設定で管理者が指定することもできます。

textareaはそのまま書いてもOKなんですが、formタグ内に入れて使うこともできます。今回はそのまま使うパターンを簡単に書きます。

<label for="ラベルid"
<textarea id="ラベルid" name="text" rows="高さ" cols="横">
初期入力内容(省略可)
</textarea>

このようになります。textareaには必要な属性があるのでそのあたりの解説をしていきます。

まずはid属性です。これはラベル(labelタグ)と関連付けるために必須です。何を入力してほしいかを明示的に書くためにセットで使います。更にはスクリーンリーダーを使っている方からしたらいきなり説明も無しに入力してってなっても混乱するだけなので、ラベルは必ず追加しましょう。

そのラベルとテキストエリアを関連付けるために必須なのがid属性です。最もJavaScriptではidを指定して取得して色々と加工するとかいう時にも使えるので、設定しておいて損はありません。

設定するにはlabelタグのfor属性と、textareaのid属性を一致させておく必要があります。

name属性はフォームから送信されたデータを受け取り、処理をするために必須です。というのもそもそもname属性を省略するとデータの送信自体が行われないようになっているため、nameも必須です。

このname属性の設定に関しては自分のわかりやすい名前で構いません。

rows属性はテキストエリアの高さを指定する属性になります。これはtextarea専用の属性になります。これは「行の高さを指定」する属性になります。

デフォルトでは2が設定されているので、何も設定しなかった場合は二行分の入力エリアが出ます。

仮に5を設定すると、5行分の高さになります。

高さに関しては行の数で設定するので、そこまで難しくはありませんね。

cols属性はtextareaの横幅を設定する属性です。これもtextarea専用属性です。こちらは文字数での指定となります。

いくつか既に属性の解説をしてきましたが、改めて使える属性一覧です。

autofocus	ページの読み込みと同時に入力エリアを選択状態にする
cols	textareaの横幅を文字数で設定
dirname	テキストエリアのテキスト方向を指定します
disabled	テキストエリアを無効にします
form	どこのformタグに属しているかを指定
maxlength	textareaの最大文字数を設定
minlength	textareaの最小文字数を設定
name	textareaの名前を設定(必須)
placeholder	テキストエリアに表示するプレースホルダー
readonly	読み取り専用にする
required	テキストエリアへの入力が必要であると指定する
rows	テキストエリアの高さを行数で指定
warp	フォームを送信時の改行の扱いを指定する

使える属性はそこそこ多いです。しかし上でも書いたように、必須なのはid属性とname属性でrows属性とcols属性はサイトの構成に応じてといったところです。

maxlength属性を使うことでテキストエリアに入力可能な最大文字数を設定できるので、イタズラ防止につながります。以下は4で設定したテキストエリアです。

4文字までという表記はplaceholder属性を使っているため、文字数の制限には当てはまらず、ユーザーが入力を開始したら消えます。

dirname属性はテキストの方向を→か←で設定できます。日本や多くの英語圏では→ですが、一部の国では←なのでその記述にも対応できるようになっています。

他、グローバル属性・イベント属性をサポートしています。

textareaはユーザーの複数行かつ長いテキストの入力受付を可能にするタグです。name属性やid属性など、必須となる属性からmaxlength属性のような準必須みたいな属性まであるので、それぞれ設定漏れが無いように確認しながら使用しましょう。