<textarea> 要素
は、複数行のプレーンテキストの入力フィールドを表します。ユーザーエージェント(ブラウザ)は、フィールド内のテキストの編集、挿入、削除を許可します。改行はLF(U+000A)
です。ユーザーによる変更に制約を設定する場合はdisabled 属性
やreadonly 属性
を使用します。
- カテゴリー
- フロー・コンテンツ、パルパブル・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ
- 配置場所
- フレージング・コンテンツが置ける場所。
- 内容
- テキスト
- 属性
-
autocomplete="on|off"
HTML5で追加- オートコンプリート機能(入力履歴から内容を予測・提示する機能)のオンオフを切り替えます。
autofocus[="autofocus"]
HTML5で追加- ページがロードされると自動的にフォーカスされます。
cols="表示幅"
- 入力フィールドの表示幅を、予想される1行あたりの最大文字数の0より大きい数値で指定します。無効な数値が指定されているか属性が指定されていない場合のデフォルト値は20です。
dirname="パラメータ名"
HTML5で追加- この要素の文字表記の方向を指定するパラメータがある場合はそのパラメータ名を指定します。属性が指定されている場合、値は空であってはなりません。
<textarea name="comment" dirname="comment.dir"></textarea> <input type="hidden" name="comment.dir" value="ltr">
disabled[="disabled"]
- 指定することでコントロール無効の使用不可の状態にします。
form="ID"
HTML5で追加- 関連付ける
<form> 要素
のid 属性
を指定します。この属性でフォームを指定することで、<form> 要素
に含まれていなくてもフォームの部品として機能させることができます。 maxlength="最大文字数"
- 入力フィールドに入力できる最大の文字数を数値で指定します。
minlength="最小文字数"
HTML5で追加- 入力フィールドに入力できる最小の文字数を数値で指定します。
minlength 属性
は、ユーザーが値を入力してから有効になるため、空の文字列を許可しない場合はrequired 属性
を指定するなどの設定が必要です。 name="パラメータ名"
- フォーム送信とform.elements APIに使用されるこのフィールドの名前を指定します。
placeholder="プレースホルダー"
HTML5で追加- 入力例やフィールドの説明など、予めフィールド内に表示させるテキストを指定します。
readonly[="readonly"]
- 指定することでユーザーがテキストを編集できない「読み取り専用」の状態にします。
readonly 属性
が指定されている場合、HTML5で追加されたフォーム要素のチェック機構の対象からは除外されます。 required[="required"]
HTML5で追加- 指定することで、項目の選択を必須にすることができます。
rows="表示行数"
- 入力フィールドの表示行数を0より大きい数値で指定します。無効な数値が指定されているか属性が指定されていない場合のデフォルト値は2です。
wrap="soft|hard"
HTML5で追加- テキストエリア内のテキストを送信する際にラップするか(行折り返しの部分に改行を加えるか)をキーワードで指定します。デフォルトはsoftで、ラップをせずに送信します。hardを指定した場合は、ユーザーエージェント(ブラウザ)によって改行された部分(行折り返し)に改行コードを加えて送信されます。hardが指定されている場合、
cols 属性
の指定が必須になります。 - グローバル属性
accesskey
,autocapitalize
,autofocus
,class
,contenteditable
,data-*
,dir
,draggable
,enterkeyhint
,hidden
,id
,inputmode
,is
,itemid
,itemprop
,itemref
,itemscope
,itemtype
,lang
,nonce
,spellcheck
,style
,tabindex
,title
,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › textarea</title>
</head>
<body>
<h1>HTML5 › textarea</h1>
<form method="post">
<p>ご意見ご感想はこちらから送信してください。</p>
<textarea rows="6" cols="40" placeholder="こちらへ入力してください。"></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>