<textarea>要素

<textarea>要素の定義

英語で「本文」を表す”text”＋「領域」を表す”area”より。HTML文書では、「複数行」を入力可能なテキスト入力欄を用意する際に使用されます。例えば、アンケートの自由記入欄や、問い合わせフォームのメッセージ欄などが挙げられます。
なお、子要素にできるものはプレーンテキストのみで、他のHTML要素を子要素にすることはできません。<textarea> 要素内に記述したテキストは、入力欄に表示される初期値となります。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLTextAreaElement

属性

グローバル属性が指定できます。

autocomplete

値をブラウザーが自動的に補完してよいかどうかを指定します。

• off ： ブラウザーによる入力補完は行ないません。ユーザーに自力で入力させるか、文書で独自に補完を行いたい場合はこちらを指定します。
• on ： ユーザーの入力履歴に応じて、ブラウザーが値を補完することができます。

なお、この属性が指定されていない場合は、<textarea>要素が含まれる <form> 要素で指定されたautocomplete 属性の値を使用します。（当該の<textarea>要素を子孫に持つ <form> 要素、もしくは form 属性で関連付けられた <form> 要素）

autofocus

この属性が指定されている場合、ページ読み込み時に入力欄がフォーカスを持つべきであることを指定できます。文書中のフォーム関連要素のうちのひとつだけに、この属性を指定することができます。

cols

「平均的な文字幅」による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定しない場合のデフォルト値は 20 です。

disabled

この属性が指定されている場合、ユーザーはその入力欄にテキストを入力することはできず、値を送信することも出来ません。（表示はできますので、入力欄の見本などに活用できます。）

form

ボタンに関連付けられる、<form> 要素の”id”属性を指定します。
この属性によって <form> 要素の子孫にするだけでなく、同一文書内にある任意の <form> 要素に <textarea> 要素を関連付けることが可能になりました。

maxlength

ユーザーが入力可能な文字数を指定します。文字数を指定した場合、制限を超える文字数を入力しようとしても、制限を超える分の入力は無効になります。この属性を省略した場合は無制限となります。

minlength

ユーザーが入力しなければならない最小文字数を指定します。maxlengthと違い、「足りない分の入力が無効になる」ということはありませんが、フォームの送信時にはチェックに引っかかります。

name

フォーム情報とともに送信される、入力欄の名前を指定します。

placeholder

コントロールに何を入力できるかに関する、ユーザーへの助言になるようなテキストを指定します。

readonly

この属性が指定されている場合、ユーザーはその入力欄の値を変更することは出来ません。disable属性と似ていますが、readonly属性を使った場合、入力欄の値を送信することが可能です。
例えば、別の画面から引き継いできた値で、変更させたくはないが、フォームで送信する必要があるような項目の場合に使用します。

required

この属性を指定した場合、入力欄には値を入力しなければならないことを表します。入力せずにフォームを送信しようとした場合、入力を促すメッセージが表示され、フォームの送信は中断されます。
ただし、表示されるメッセージの文言やデザインはブラウザ標準のものになります。

rows

入力欄で表示することができるテキストの行数を指定します。あくまでも見た目上の行数なので、ここで指定した行数よりも長いテキストを入力することは可能です。

spellcheck

入力欄に対して、ブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。

• true ：要素でスペルや文法チェックを行う必要があることを示します。
• default ：要素は既定の動作（親要素の spellcheck 値）によって動作することを示します。
• false ：要素でスペルチェックを行うべきではないことを示します。

wrap

テキストの折り返しの制御法を示します。以下の値を指定可能です。

• hard : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行を挿入します。この値を指定する場合、cols 属性を指定しなければなりません。
• soft : （デフォルト値）ブラウザーは値に含まれる改行をすべて維持しますが、改行の付加は行いません。ただし、見た目上はコントロールの幅でテキストが折り返されているように見えます。
• off ：soft に似ていますが外観を white-space: pre に変更しますので、cols を超えた部分は折り返されず、水平方向にスクロール可能になります。

スタイル付けに関するTIPS

ベースラインの問題

HTML5の仕様上は、<textarea>要素のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。
そのため、<textarea>要素に対して、”vertical-align: baseline;”を指定するのは避けたほうが良いでしょう。

大きさの変更

通常、<textarea>要素の右下角にはドラッグ可能な「ハンドル」が表示されており、これをドラッグすることで入力欄の大きさを変更することが出来ます。
もし、ユーザーによる大きさの変更を許容したくない場合は、CSSの resizeプロパティ に”none”を指定するとサイズ変更を無効に出来ます。

有効・無効な値のスタイル付け

CSSの :valid 及び :invalid 疑似クラスを使用することで、入力された値が有効か無効かでスタイルを分けることが出来ます。

サンプル

入力制限付きの入力欄（＋有効・無効のスタイル分け）

See the Pen mNVaJM by Masahiko Iwakiri (@m-iwakiri) on CodePen.

この例では、「10文字以上20文字以下」という制限をつけているので、10文字未満の文字を入力して送信しようとすると、メッセージが表示され、20文字以上の文字を入力しようとすると、超える文の入力は無視されます。
ただし、required属性を付けていない場合、「未入力＝０文字」は許容されるので、未入力で送信すると何もメッセージは表示されません。

プレースホルダー

See the Pen jgWXMd by Masahiko Iwakiri (@m-iwakiri) on CodePen.

この例では、「要素内にテキストを指定した場合」と「placeholder属性を使用した場合」の違いを示しています。
見た目の違い（placeholderの場合は文字色が少し薄くなっている）もありますが、入力欄をクリック／タップした場合の挙動に大きな違いがあります。
「要素内にテキストを指定した場合」は、ユーザーが表示されている文字を消さない限りテキストは残りますが、「placeholder属性を使用した場合」はクリックした時点でテキストは消えます。