<TEXTAREA>複数行のテキスト入力フィールドを作る

<TEXTAREA>では、複数行の入力が可能なテキスト入力フィールド(テキストボックス)が作成できます。これは、1行では収まりきらないような備考や感想、問合せの入力欄を作る際に使用されます。 また<TEXTAREA>~</TEXTAREA>内にテキストを記述しておけば、この入力フィールドに、そのテキストがあらかじめ入力された状態で表示させることができます。

name属性では入力フィールドの名前を指定することができ、<FORM>の内容を受信した時に、そのデータを見分ける際に利用します。

cols属性では1行に入力できる文字数を、rows属性では入力できる行数を指定します。この二つの属性は入力フィールドの高さと横幅を決めるものですので、<TEXTAREA>では必須となります。省略はできません。

wrap属性ではテキストがフィールドの右端まで達した時の改行方法を指定できます。 ですがこの属性は、Internet ExplorerとNetscapeが独自に拡張した属性ですので、一般的なブラウザには対応していますが、HTML4.01の仕様では定義されてません。

なお<TEXTAREA>はフォームの部品以外にも、ユーザーインターフェースとしても利用できます。

使用した時の例

<form action="/cgi-bin/sample.cgi" method="post">
お問合せ<br />
<textarea name="toiawase" rows="5" cols="40">
ここに入力して下さい
</textarea>
<br />
<input type="submit" name="submit" value="送信">
</form>

ブラウザ上の表示例

お問合せ

書式

  • <textarea name="名前" rows="行数" cols="">~</textarea> ・・・・・・ 複数行の入力フィールドを作成

属性

name="任意の名前" 入力フィールドの名前を指定
cols="" フィールドの幅(1行に入力可能な文字数)を半角の文字数で指定
rows="" フィールドの高さを行数で指定
wrap="soft" 入力文字数がフィールド右端に達した時の自動改行の設定
  • off・・・改行を禁止
  • soft・・・画面上では自動改行されるが、送信されるデータは改行されない(初期値)
  • hard・・・画面上、送信データともに改行される
readonly="" フィールドへの入力を禁止
disabled="" フィールドへの入力を禁止し、選択不能にする(表示される文字は灰色になる)

対応ブラウザなどのデータ

形式 <textarea>~</textarea> 分類 インライン要素
親要素 子要素にフレージングコンテンツを含める要素 子要素
開始タグ 必須 終了タグ 必須
カテゴリ フローコンテンツ / フレージングコンテンツ / インタラクティブコンテンツ / パルパブルコンテンツ / サブミッタブル / リステッド / ラベラブル / リアソシエイタブル / リセッタブル / フォーム関連
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~