<textarea> …… 複数行のテキスト入力欄を作成する

<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。

cols属性は、一行当たりの最大文字数の目安を指定する際に使用します。 cols属性の値として指定できるのは、1以上の正の整数です。 何も指定しない場合の初期値は20です。

rows属性は、表示行数を指定する際に使用します。 rows属性の値として指定できるのは、1以上の正の整数です。 何も指定しない場合の初期値は2です。

例えば、cols="20" rows="2" を指定すると、一般的なブラウザでは、 1行当たり約20文字分が表示される程度の横幅、および、2行分が表示される程度の高さで テキスト入力欄が表示されます。

readonly属性は、ユーザーによるテキスト編集を不可にして読み取り専用にする際に使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

textarea要素は、HTML5ではautofocus属性・form属性・maxlength属性・placeholder属性・required属性・wrap属性が新たに追加されています。

required属性は、入力必須を指定する場合に使用します。 required属性を指定すると、入力欄が空の状態でフォーム送信しようとすると値の入力が求められます。 同時にreadonly属性を指定している場合には、このバリデーションは無効となります。

maxlength属性は、入力可能な最大文字数を指定する際に使用します。 例えば、maxlength="20"を指定すると、maxlength属性がサポートされているブラウザ（Google Chromeなど）では、 ユーザーは最大20文字までしか入力できなくなります。

wrap属性は、入力テキストの改行ルールを指定する際に使用します。 指定できる値は、soft、または、hardの二種類で、初期値はwrap="soft"です。 wrap="hard"を指定する場合には、同時にcols属性を指定する必要があります。

placeholder属性は、ユーザー入力に関するヒントを短めのテキストで指定する際に使用します。 例えば、入力欄に初期値として「ご意見・ご感想をご記入ください」などのヒントを示してユーザーの操作を補助することができます。 ヒントが長くなる場合には、title属性のほうがより適しているでしょう。 また、placeholder属性でその入力欄の項目名を表すべきではありません。 このような目的には<label>を使用してください。

尚、<textarea>～</textarea>の内容は、初期入力値となります。 placeholder属性の指定はヒントテキストであり、一般的なブラウザでは入力欄をフォーカスすると消えます。 それに対して<textarea>～</textarea>の内容は初期入力値であり、 この値をユーザーが編集して利用することもできます。 <textarea>～</textarea>の初期入力値と、placeholder属性の値を同時に指定すると、 一般的なブラウザでは、初期入力値が優先されてplaceholder属性の指定は表示されなくなるようです。

■属性

■使用例

Sponsors