HTML5タグリファレンス
textarea

投稿 | | カテゴリー タグリファレンス, HTML5

<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, class, contenteditable, data-*, dir, hidden, id, lang, 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>