<textarea> …… 複数行プレーンテキストの入力欄を表す

<textarea>タグは、複数行プレーンテキストの入力欄を表す際に使用します。

textarea要素は、複数行のプレーンテキストを編集するための入力欄を表します。 textarea要素の内容は、入力欄のデフォルト値となります。

■属性

maxlength属性、cols属性、rows属性

maxlength属性は、値の最大長を指定します。

cols属性は、1行あたりに想定される最大文字数を指定します。 cols属性が指定されている場合、その値はゼロより大きい正の整数である必要があります。 cols属性の初期値は 20 です。

rows属性は、表示する行数を指定します。 rows属性が指定されている場合、その値はゼロより大きい正の整数である必要があります。 rows属性の初期値は 2 です。

■使用例

以下のサンプルは、textarea要素にmaxlength属性を指定して、コメントを200字以内に制限しています。 cols属性とrows属性が指定されていない場合、一般的なブラウザでは初期値の20字×2行のサイズで表示されます。

<p>
 <div>コメント（200字以内）: </div>
 <textarea name=comments maxlength=200></textarea>
</p>

■使用例

以下のサンプルは、textarea要素内にテキストを記述しています。 要素内に記述したテキストは、textarea要素のデフォルト値となります。

<p>
 <div>コメント（200字以内）: </div>
 <textarea name=comments maxlength=200>いいね！</textarea>
</p>

placeholder属性は入力ヒント

textarea要素にplaceholder属性を指定すると、入力欄に値がない場合に表示されます。 placeholder属性の値には、ユーザーが入力する際のヒントとなる単語や短い語句を指定します。

placeholder属性で指定された入力ヒントは、ユーザーがtextarea要素にフォーカスして入力を開始すると非表示となります。 autofocus属性の結果としてフォーカスされた場合には、placeholder属性の値は表示されたままです。

placeholder属性は、ラベル代わりとして使用しないでください。 placeholder属性で指定する短いヒントは、サンプル値や予期される形式の簡単な説明です。 長いヒントやその他のアドバイステキストの場合は、title属性の方が適切です。

ラベル、placeholder属性、title属性の違い

ラベル、placeholder属性、title属性はよく似ていますが、微妙に異なります。 ラベルによるヒントは、常に表示されます。 placeholder属性による短いヒントは、ユーザーが値を入力する前に表示されます。 title属性によるヒントは、ユーザーがさらにヘルプを求めた場合に表示されます。

■使用例

以下のサンプルは、textarea要素にplaceholder属性を指定してユーザーが入力する際のヒントを示しています。 ユーザーがtextarea要素にフォーカスして入力を開始すると、placeholder属性の値は非表示となります。

<p>
 <div>コメント: </div>
 <textarea name=comments cols="60" rows="4"
 placeholder="記入例：いつも楽しみにしています。"></textarea>
</p>

■使用例

以下のサンプルは、textarea要素にdirname属性を指定して、ブラウザに要素の方向性を送信するように指定しています。

<p>
 <div>コメント (ヘブライ語でどうぞ):</div>
 <textarea name="comments" dir="rtl" dirname="comments.dir"></textarea>
</p>

readonly属性は読み取り専用

textarea要素にreadonly属性を指定すると、 ユーザーによるテキスト編集が不可能な読み取り専用となります。 textarea要素にreadonly属性が指定されている場合、 入力必須などのフォーム送信時のバリデーションから除外されます。

■使用例

以下のサンプルは、textarea要素にreadonly属性を指定して読み取り専用にしています。 読み取り専用のtextarea要素は、ユーザーによるテキストの編集、挿入、削除が許可されていない状態です。

<div>ファイル名: <code>/etc/bash.bashrc</code></div>
<textarea name="buffer" cols="60" rows="10" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return

...</textarea>

■関連項目

Sponsors