textarea要素とは
<
要素は、
<textarea>
要素の中に要素内容としてテキストを配置した場合は、そのテキストが初期値となります。
また、この<textarea>
要素は、基本的に<form>
要素内に配置して利用しますが、HTML5からは<form>
要素外でもform
属性を指定することで利用できるようになりました。
- 意味・役割
- 複数行のテキストフィールドを表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
-
- フロー・コンテンツ
- フレージング・コンテンツ
- インタラクティブ・コンテンツ
- パルパブル・コンテンツ
- リスト化、ラベル付け可、サブミット可能、リセット可能、フォーム関連要素
- コンテンツ・モデル(梱包できる要素)
- テキスト
- この要素を配置できる親要素
- フレージング・コンテンツが配置できる要素
サンプルコード
<form action="" method="post">
<dl>
<dt><label for="mutter">つぶやき</label></dt>
<dd>
<textarea name="mutter" id="mutter" cols="30" rows="10"></textarea>
</dd>
</dl>
<p><input type="submit" value="つぶやく"></p>
</form>
RERUN
textarea要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
cols属性
属性は、cols
属性で指定した文字数を超えたテキストは折り返されて表示します(表示上の改行であり、送信されるデータは改行されていません。指定した文字数で送信するデータに改行を挿入する場合は、wrap
属性を使いましょう)。なお、この属性の初期値は "20"
で、この属性を省略した場合、1行あたりに表示する半角での文字数は、20文字になります。
<textarea cols="1行あたりの文字数"></textarea>
- 属性値
-
行あたりに表示する半角の文字数 (初期値:
"20"
) - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="message">メッセージ: </label><br>
<textarea id="message" cols="30"></textarea>
</p>
RERUN
rows属性
属性は、テキストフィールドに表示する行数 を指定する属性になります。このrows
属性で指定した行数を超えたテキストはスクロールバーで表示します。なお、この属性の初期値は "2"
で、この属性を省略した場合、テキストフィールドに表示する行数は2行になります。
<textarea rows="表示する行数"></textarea>
- 属性値
-
テキストフィールドに表示する行数 (初期値:
"2"
) - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="message">メッセージ: </label><br>
<textarea id="message" cols="30" rows="10"></textarea>
</p>
RERUN
name属性
属性は、
テキストエリアの名前を指定する属性です。このname
属性はユーザーが入力した値のラベルになります。従ってユーザーが入力した値を取り出す時に必要な名前になります。一般的には、どの質問に対してのコントール部品なのかがわかるように、質問内容を英語にした名前を指定します。
<textarea name="コントロール部品の名前"></textarea>
- 属性値
- テキストエリアの名前となる文字列
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
RERUN
disabled属性
属性は、
テキストエリアを無効にする属性です。この属性を指定した場合は、値が送信されません。
<textarea disabled="disabled"></textarea>
- 属性値
-
"
disabled
": テキストエリアを無効にする - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" disabled="disabled">このテキストは変更できません。</textarea>
</p>
RERUN
autofocus属性 HTML5で追加
属性は、
ページを表示した時点で、フォーカス (カーソル)を入れて入力可能状態にする属性です。
<textarea autofocus="autofocus"></textarea>
- 属性値
-
"autofocus"
: ページ表示時にフォーカスを入れる - 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" autofocus="autofocus"></textarea>
</p>
autocomplete属性 HTML5で追加
属性は、
<textarea>
要素に、ブラウザによる自動補完を利用するかを指定する属性です。ただし、現状(2017年1月現在)は、この属性で自動補完を "off" に指定してもブラウザによっては自動補完はされるものもあります。
<textarea autocomplete="自動補完のする項目"></textarea>
- 属性値
-
"off"
: 自動補完を OFF にする"on"
: 以前の入力内容をもとに自動補完を ON にする""street-address""
: 番地・マンション名
詳細はWHATWG Standardを御覧ください。
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" autocomplete="off"></textarea>
</p>
RERUN
required属性 HTML5で追加
属性は、
テキストエリアを必須項目にする属性です。
<textarea required="required"></textarea>
- 属性値
-
"required"
: 必須項目にする - 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" required="required"></textarea>
</p>
<p><input type="submit" value="送信"></p>
RERUN
readonly属性 HTML5で追加
属性は、
テキストエリアを読み取り専用にする属性です。この属性を指定しても値は送信されます。値を送信したくない場合は、disabled
属性を使用しましょう。
<textarea readonly="readonly"></textarea>
- 属性値
-
"readonly"
: 読み取り専用にする - 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" readonly="readonly">このテキストは読み取り専用です。</textarea>
</p>
RERUN
placeholder属性 HTML5で追加
属性は、
入力に関するヒントを指定する属性です。この属性を使用することで入力欄に予めこの属性のテキストが入り、ユーザーが何を入力すればいいのかというヒントになります。ただし、この属性を<label>
要素の代わりとして利用することは好ましくありません。
<textarea placeholder="入力に関する字ヒント"></textarea>
- 属性値
- 入力に関するヒントの文字列
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ: </label><br>
<textarea name="message" id="message" cols="30" rows="10" placeholder="私達へのメッセージを入力して下さい。"></textarea>
</p>
RERUN
maxlength属性
属性は、テキストエリアに入力できる最大の文字数 (半角)を指定する属性です。この属性を指定しない場合は最大文字数の制限はされません。
<textarea maxlength="入力できる最大の半角文字数"></textarea>
- 属性値
- 入力できる最大の文字数 (半角)
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<p>
<label for="mutter">つぶやき(半角140文字まで): </label><br>
<textarea name="mutter" id="mutter" cols="30" rows="10" maxlength="140"></textarea>
</p>
RERUN
minlength属性 HTML5で追加
属性は、テキストエリアに入力する最小の文字数 (半角)を指定する属性です。この属性を指定しない場合は最小文字数の制限はされません。
<textarea minlength="入力する最小の半角文字数"></textarea>
- 属性値
- 入力する最小の文字数 (半角)
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">メッセージ(半角30文字以上でご記入下さい。): </label><br>
<textarea name="message" id="message" cols="30" rows="10" minlength="30"></textarea>
</p>
<p><input type="submit" value="送信"></p>
RERUN
form属性 HTML5で追加
属性は、
<textarea>
要素を、<form>
要素の中に配置したかった場合に、関連する<form>
要素を指定する属性です。
<textarea>
要素を、<form>
要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>
要素に指定した、id
属性の値を指定します。
<textarea form="関連するform要素のid名"></textarea>
<form id="contact_form">
<p><input type="submit" value="送信"></p>
</form>
<p>
<label for="message">メッセージ: </label><br>
<textarea form="contact_form" name="message" id="message" cols="30" rows="10"></textarea>
</p>
RERUN
inputmode属性 HTML5.1で追加
属性は、どのキーボードを表示するかを指定する属性です。
<textarea inputmode="キーボードの種類"></textarea>
- 属性値
-
"verbatim"
: 文章ではない英数字 (Ex.ユーザー名、パスワード、製品コード など)"latin"
: 入力補助があるラテン文字 (人間とコンピュータのコミュニケーション用) (Ex.検索ボックス など)"latin-name"
: 入力補助があるラテン文字 (人名用)"latin-prose"
: 入力補助があるラテン文字 (人間同士のコミュニケーション用) (Ex.電子メール、インスタントメッセージ など)"full-width-latin"
: 入力補助があるラテン文字 ("latin-prose"の全角)"kana"
: 日本語用のひらがな入力、ローマ字入力"kana-name"
: 日本語用のひらがな入力、ローマ字入力 (人名用)"katakana"
: 日本語用のカタカナ入力"numeric"
: 0〜9の数値入力 (Ex.クレジットカードの番号 など)"tel"
: 0〜9、「#」、「*」 の電話番号入力 (可能であれば<input type="tel">
を使用する)"email"
: 「@」などを含んだメールアドレス入力 (可能であれば<input type="email">
を使用する)"email"
: 「/」などを含んだURL入力 (可能であれば<input type="url">
を使用する)
- 利用できるバージョン(HTML4.01以降)
- HTML5.1 〜
<p>
<label for="message">Message: </label><br>
<textarea name="message" id="message" cols="30" rows="10" inputmode="latin-prose"></textarea>
</p>
RERUN
dirname属性 HTML5で追加
属性は、テキストの方向 ("ltr"
、"rtl"
)を送信する際に使うキーを指定する属性です。
<textarea dirname="テキストの方向の送信に使うキー"></textarea>
- 属性値
- テキストの方向の送信に使うキー
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">Message: </label><br>
<textarea name="message" id="message" cols="30" rows="10" dirname="dirKey"></textarea>
</p>
<p><input type="submit" value="送信"></p>
RERUN
wrap属性 HTML5で追加
属性は、テキストエリアの幅を超えたテキストの折り返しを指定する属性です。この属性を省略した場合は "sort"
となり、テキストエリアでの表示上は改行されていますが、送信されるデータは、実際にエンターキーなどで改行を行った箇所以外は改行されません。
なお、"hard"
を指定する場合は、cols
属性による、1行あたりの表示文字数の指定が必須になります。
<textarea wrap="テキストの折り返しの設定"></textarea>
- 属性値
-
"sort"
: 送信されるデータは、実際にエンターキーなどで改行を行った箇所以外は改行されません。"hard"
: 送信されるデータは、cols
属性で指定された文字数を超えないように、ブラウザ自動的に改行 (CR+LF)を挿入します。
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
<p>
<label for="message">Message: </label><br>
<textarea name="message" id="message" cols="30" rows="10" wrap="hard"></textarea>
</p>
<p><input type="submit" value="送信"></p>
RERUN
textarea要素のサンプル
<form action="" method="post">
<dl>
<dt><label for="your_name">お名前</label></dt>
<dd>
<input type="text" name="your_name" id="your_name">
</dd>
<dt><label for="your_email">メールアドレス</label></dt>
<dd>
<input type="email" name="your_email" id="your_email">
</dd>
<dt><label for="message">お問い合わせ内容</label></dt>
<dd>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
仕様
- HTML5.1
- 4.10.11. The textarea element
- HTML4.01
- 17.7 The TEXTAREA element
関連する要素
<form>
要素<input>
要素<select>
要素<option>
要素<optgroup>
要素<button>
要素<label>
要素<fieldset>
要素<legend>
要素