HTML5/フォーム/textarea要素複数行のテキスト入力欄を作る

<textarea></textarea>

ブラウザ
分類	フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ
利用場所	フレージング・コンテンツが置ける場所
内容	テキスト

textarea要素は、複数行のテキスト入力欄を作成します。


<textarea name="example1"></textarea>

<textarea name="example2" cols="50" rows="10">サンプル</textarea>

属性		値
任意属性
`name=""`	部品の名前	文字列	部品を識別するための名前
`cols=""`	入力欄の幅	数値	文字数で指定（初期値は `20`）
`rows=""`	入力欄の高さ	数値	行数で指定（初期値は `2`）
`maxlength=""`	入力できる最大文字数	数値	文字数で指定
`minlength=""`	入力できる最小文字数	数値	文字数で指定
`wrap=""`	送信時の改行の有無	`soft`	折り返しを反映せずに送信する（初期値）
`wrap=""`	送信時の改行の有無	`hard`	折り返し部分に改行を入れて送信する
`form=""`	フォームとの関連付け	ID名	関連付けるform要素に指定したID名
`autocomplete=""`	オートコンプリート	`on`	オートコンプリートを有効にする
`autocomplete=""`	オートコンプリート	`off`	オートコンプリートを無効にする
`autofocus`	自動フォーカスの指定	（`autofocus`）	値は省略可能、1つの文書に1つだけ指定可能
`placeholder=""`	入力のヒント	文字列	記入例、フォーマットの例
`dirname=""`	書字方向の送信に使う名前	文字列	識別するための名前
`inputmode=""`	入力モード	キーワード	本文参照
`readonly`	読み取り専用	（`readonly`）	値は省略可能
`disabled`	部品の無効化	（`disabled`）	値は省略可能
`required`	入力必須	（`required`）	値は省略可能

wrap="hard" を指定する場合は、cols属性の指定が必須となります。

入力欄の初期値について

textarea要素内の文字列は、初期値として入力欄に表示されることになります。

<textarea name="example">
この文字列が初期値として表示されます
</textarea>

初期値の文字列に<や>記号が含まれる場合は、<>と記述します。また、&記号も&と記述しておきます。

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、入力されたデータ（または初期値）とセットで送信されることになります。

<textarea name="comment">
Hello
</textarea>

上記の場合は、comment=Hello といった感じで送信されます。

cols属性とrows属性について

cols属性とrows属性は、入力欄の幅と高さを指定します。

次の例では、50文字分の幅と10行分の高さを指定しています。

<textarea name="example" cols="50" rows="10"></textarea>

maxlength属性について

maxlength属性は、入力できる最大文字数を指定します。

次の例では、最大文字数を50文字に指定しています。

<textarea name="example" maxlength="50"></textarea>

minlength属性について

minlength属性は、入力できる最小文字数を指定します。

次の例では、最小文字数を10文字に指定しています。

<textarea name="example" minlength="10"></textarea>

wrap属性について

wrap属性は、入力テキストの折り返し部分を、送信データに反映させるかどうかを指定します。指定できる値は次の2つです。

soft: 折り返しを反映せずに送信します。（初期値）
hard: 折り返し部分に改行を入れて送信します。

<textarea name="example" cols="30" wrap="hard"></textarea>

wrap="hard" を指定する場合は、cols属性の指定が必須となります。

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

この属性は、部品をform要素の外に配置する場合に使用します。（form要素の中に配置する場合は不要です）

<p>コメント：<textarea name="comment" form="example"></textarea></p>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>

ただし、この機能に対応していないブラウザもあります。
form属性の使用例は、form要素のページでご覧になれます。

autocomplete属性について

autocomplete属性は、オートコンプリート機能（入力内容の自動補完）を使うかどうかを指定します。

値には on（使う）または off（使わない）を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。（form要素にも指定されていない場合は on の状態がデフォルトとなります）

<textarea name="example" autocomplete="off"></textarea>

HTML 5.1では、textarea要素のautocomplete属性に on / off 以外の値も指定できるようになりました（詳しくは仕様書をご覧ください）。これにより、きめ細やかな設定が行えるようになります。

autofocus属性について

autofocus属性は、フォーム部品の自動フォーカスを指定します。

この属性が指定された部品は、文書の読み込み時に自動的にフォーカスされることになります。

この属性は、1つの文書に1つだけ指定することができます。

<textarea name="example" autofocus></textarea>

placeholder属性について

placeholder属性は、入力の助けとなるような短いヒント（記入例やフォーマットの例など）を指定します。

対応しているブラウザでは、この値が入力欄に表示されます。（入力を開始すると消えます）

通信欄：<textarea name="message" placeholder="連絡事項等はこちらへ"></textarea>

次のように改行を入れることもできます。（この改行は入力欄に表示されるテキストにも反映されます）

通信欄：<textarea name="message" placeholder="連絡事項等はこちらへ
・納期
・ご予算
・その他" cols="50" rows="10"></textarea>

dirname属性について

dirname属性は、書字方向の送信に使う名前を指定します。

この値（名前）は、入力内容の書字方向（ltr または rtl）とセットで送信されることになります。（書字方向は自動的に判別されるようです）

<textarea name="comment" dirname="commentDir">Hello</textarea>

例えば、上記の内容を送信した場合、対応しているブラウザでは次のような形式で送られることになります。（ltr は自動的に付けられます）

comment=Hello&commentDir=ltr

Chrome（17）で確認しました。

inputmode属性について

inputmode属性は、その入力欄の入力モードを指定します。

通信欄：<textarea name="comment" inputmode="kana"></textarea>

この属性の値には、以下のキーワードを指定することができます。

キーワード	説明
`verbatim`	文章ではない英数字による文字列の入力（ユーザー名、パスワード、製品コード等、対コンピューター向け）
`latin`	ラテン文字による自由形式なテキストの入力（入力予測等の入力支援が期待される）
`latin-name`	ラテン文字によるユーザー名の入力（人名の入力に適した入力支援が期待される）
`latin-prose`	ラテン文字によるメッセージの入力（対人コミュニケーションに適した入力支援が期待される）
`full-width-latin`	全角英数字モード（？）
`kana`	全角かな入力モード
`kana-name`	全角かな入力モード（人名の入力に適した入力支援が期待される）
`katakana`	全角カタカナ入力モード
`numeric`	`,` や `-` を含む半角数字の入力（クレジットカード番号等）、数値の場合は `type="number"` が適切
`tel`	`*` や `#` を含む半角数字の入力（電話番号）、通常は `type="tel"` を使用
`email`	`@` や `.` を含む半角英数字の入力（メールアドレス）、通常は `type="email"` を使用
`url`	`/` や `.` を含む半角英数字の入力（URL）、通常は `type="url"` を使用

readonly属性について

readonly属性は、そのフォーム部品が読み取り専用であることを指定します。

この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。

<textarea name="example" readonly></textarea>

この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定された部品は、選択することができなくなります。また、データも送信されなくなります。

<textarea name="example" disabled></textarea>

この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。

required属性について

required属性は、そのフォーム部品が入力必須であることを指定します。

<textarea name="example" required></textarea>

入力欄の幅と高さは、スタイルシートでも指定することができます。

例えば、幅を300px、高さを5行にしたい場合は、次のスタイルを指定します。

textarea {
width: 300px;
height: 5em;
}

HTML5における変更点

maxlength属性、minlength属性、wrap属性、form属性、autocomplete属性、autofocus属性、placeholder属性、dirname属性、required属性が追加されました。
cols属性とrows属性が必須ではなくなりました。

HTML 5.1における変更点

inputmode属性が追加されました。
autocomplete属性に on / off 以外の値も指定できるようになりました。（詳しくは仕様書をご覧ください）

使用例

初期値を設定した例


<p><textarea name="example1">初期値の文字列</textarea></p>

表示例: 初期値の文字列

cols属性とrows属性を指定した例


<p><textarea name="example2" cols="30" rows="10"></textarea></p>

表示例

placeholder属性を指定した例


<p><textarea name="example3" placeholder="連絡事項等はこちらへ
・納期
・ご予算
・その他" cols="30" rows="10"></textarea></p>

表示例

readonly属性とdisabled属性を指定した例


<p><textarea name="example4" readonly>読み取り専用</textarea></p>

<p><textarea name="example5" disabled>部品の無効化</textarea></p>

表示例

読み取り専用

部品の無効化

required属性を指定した例

動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。


<form method="get" action="textarea.html">

<p>内容：<br><textarea name="example" required></textarea> <strong>必須</strong></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例: 内容：
必須

対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。