textarea要素
Updated / Published
textarea
要素(multi-line text field)は複数行のテキスト入力欄を作成します。要素内のテキスト(テキストのみ内包可能)が初期値としてテキスト入力欄内に表示されます。データの送信は、入力した内容が値として送信されます。入力欄の行数を cols
属性で、列数を rows
属性で指定します。この2つの属性は必須です。なお、入力するデータ量が短く、テキスト入力欄が1行で済む場合は input
要素(type="text"
)を使います。
HTML4.01, XHTML1.0, XHTML1.1のtextarea
要素には、input
要素の maxlength
属性が設けられていません。しかし、HTMLのフォームを拡張した仕様であるWeb Forms 2.0(2006年10月2日最終版)においてはtextarea
要素にmaxlength
属性が設けられ、このWeb Forms 2.0仕様がHTML5へと統合されたので、HTML5においてもmaxlength
属性がtextarea
要素に設けられています。最新のUAはすべてサポートしています。Internet ExplorerもIE9からはtextarea
要素にmaxlength
属性を記述することで文字数制限が可能ですが、IE6,7,8においてはサポートされていないため、textarea
要素の領域を超える文字数を入力すると、スクロールを表示し、いくらでも入力することができます。IE6,7,8において最大入力文字数を機能的に設けるには、onkeydownなどのイベント属性を組み合わせたクライアントサイド・スクリプトで制限することが可能です。ただし環境設定で無効にされているなどのスクリプトが利用できない環境ではこれも無効であるため、正確に文字数制限を設けたい場合は、すべてのUAにおいても言えることですがCGIプログラムによるサーバサイド側で最大文字数を設定するようにした方が安全です。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素型
- インライン要素
- 開始タグ
- 必須
- 終了タグ
- なし
- 非推奨
- -
- 内容モデル
- テキスト
cols属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- textarea
- 必須
- 必須属性
- 非推奨
- -
- 属性値
- 整数(pixels)
テキスト入力欄の横幅を指定します。この横幅は1行に入力できる文字数分の表示幅です。入力可能な文字数の幅を制限するものではありません。UA によって表示は異なりますが、大半の視覚環境の UA は半角スペースを含まない半角文字の入力が続くと、横幅にあわせて内容が自動的に折り返されることはなく、領域からはみ出してテキスト入力欄の下に横スクロールバーを表示します。全角文字や半角スペースが含まれると cols
属性で指定されたテキスト入力欄の横幅にあわせて自動的に折り返しが行われます。
HTML5では、cols
属性にデフォルト値(省略されている場合はcols="20"
が指定されているとみなされる)が定義されているので必須属性ではなくなりました。
disabled属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- 必須
- -
- 非推奨
- -
- 属性値
- disabled
- disabled="disabled"(XHTML)
テキスト入力欄の使用と選択を全て禁止します。使用が禁止されたテキスト入力欄の値は、送信されません。HTML4.01 では disabled
、XHTML では属性値を省略できないため disabled="disabled"
と記述します。
name属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- textarea
- 必須
- -
- 非推奨
- -
- 属性値
- 文字列
テキスト入力欄に名前を付けます。データを送信する時に name
属性の値とテキスト入力欄に入力されたテキストがセットになるので、どの項目に対する回答なのかがわかるように name
属性の値で質問の内容を示しておきます。name
属性の値は半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
readonly属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- input
- textarea
- 必須
- -
- 非推奨
- -
- 属性値
- readonly
- readonly="readonly"(XHTML)
テキスト入力欄を読み取り専用にして、ユーザ側でのデータの入力と変更を禁止します。値の入力と変更を禁止するもので、disabled
属性とは違い、制作者側であらかじめ設定していた値は送信されます。HTML4.01 では readonly
、XHTML では属性値を省略できないので readonly="readonly"
と記述します。
rows属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- textarea
- 必須
- 必須属性
- 非推奨
- -
- 属性値
- 整数(pixels)
テキスト入力欄の高さとなる表示可能な行数を指定します。実際に入力可能な行数を制限するものではありません。指定された入力可能行数を超えた場合は、テキスト入欄の横に縦スクロールバーを表示して、いくらでも入力することができます。
HTML5では、rows
属性にデフォルト値(省略されている場合はrows="2"
が指定されているとみなされる)が定義されているので必須属性ではなくなりました。
wrap属性
- バージョン
- ブラウザの独自機能
- 指定要素
- textarea
- 必須
- -
- 非推奨
- -
- 属性値
- off
- soft
- hard
複数行のテキスト入力欄で文字数が指定された横幅を越える場合にテキストの折り返しを指定します。仕様として正式に定義されている機能ではなくブラウザの独自機能ですが、主要ブラウザはすべて対応しています。テキスト入力欄に入力された内容は、ユーザがテキストの入力途中に折り返す指定をしない限り、送信後のデータに折り返しが反映されることはありません。wrap
属性を指定することで、入力欄の表示域にあわせた文字列の折り返しを指定することができます。値には次の3種類のキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
- off
- 折り返しなし、実際に入力欄で折り返されたものも除いて送信
- soft
- 自動的に折り返す、実際に折り返されたもののみ送信
- hard
- 自動的に折り返す、実際に折り返されたものと自動的に折り返された両方を含んで送信
なお、折り返しと改行は混同される場合が多いですが、全く異なるものです。折り返し(\n
)とはあくまでもソースコード内における改行であって、実際に画面上に改行(<br>
)として表示に反映されることはありません。サーバサイドのCGIスクリプトでは、折り返しを示す "\n
" があれば、デコード(CGI が受け取る形に変換されたデータを元の形に戻すこと)の際に "\n
" を強制改行を示す br
要素に変換するプログラムが書かかれているので、自動的に折り返しが改行コードに代わって表示にも反映されています。
なお、HTML5では、wrap
属性が正式仕様として公認されました。