HTML

HyperText Markup Language textarea element.

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属性の指定は表示されなくなるようです。

属性

autofocus 属性
自動フォーカスを指定する(autofocus)
cols 属性(初期値は20)
一行当たりの最大文字数の目安を指定する
disabled 属性
操作を無効にする(disabled)
form 属性
どのフォームと関連付けるかを<form>のid名で指定
maxlength 属性
入力可能な最大文字数を指定
name 属性
入力フィールドの名前を指定
placeholder 属性
ユーザー入力に関するヒントを短めのテキストで指定
readonly 属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required 属性
入力必須を指定
rows 属性(初期値は2)
表示行数を指定する
wrap 属性
入力テキストの改行ルールを指定

使用例


<p>
	<label for="kanso">ご意見・ご感想:</label><br>
	<textarea id="kanso" name="kanso" cols="40" rows="4" maxlength="20" placeholder="ご意見・ご感想をご記入ください"></textarea>
</p>