textarea要素とは

<textareaテキストエリア>要素は、 multiマルチlineライン textテキスト fieldフィールドの意味で、フォームに複数行入力できるテキストフィールドを表す要素です。テキストフィールドの領域を超える文字数をタイピングした場合はスクロールバーを表示し、何行でもテキストを入力できます。なお、この<textarea>要素の中に要素内容としてテキストを配置した場合は、そのテキストが初期値となります。 また、この<textarea>要素は、基本的に<form>要素内に配置して利用しますが、HTML5からは<form>要素外でもform属性を指定することで利用できるようになりました。

意味・役割
複数行のテキストフィールドを表す要素
利用できるバージョン(HTML4.01以降)
全てのバージョン
コンテンツ・カテゴリ
(HTML5より前:インライン要素
コンテンツ・モデル(梱包できる要素)
テキスト
この要素を配置できる親要素
フレージング・コンテンツが配置できる要素

サンプルコード

textarea要素のコード例
<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コルス属性は、columnsカラムの略で、1行あたりに表示する文字数 (半角)を指定する属性になります。この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ロウズ属性は、テキストフィールドに表示する行数 を指定する属性になります。この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ネーム属性は、 テキストエリアの名前を指定する属性です。この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属性

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で追加

autofocusオートフォーカス属性は、 ページを表示した時点で、フォーカス (カーソル)を入れて入力可能状態にする属性です。

<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で追加

autocompleteオートコンプリート属性は、 <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で追加

requiredリクワイアード属性は、 テキストエリアを必須項目にする属性です。

<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で追加

readonlyリードオンリー属性は、 テキストエリアを読み取り専用にする属性です。この属性を指定しても値は送信されます。値を送信したくない場合は、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で追加

placeholderプレースホルダー属性は、 入力に関するヒントを指定する属性です。この属性を使用することで入力欄に予めこの属性のテキストが入り、ユーザーが何を入力すればいいのかというヒントになります。ただし、この属性を<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属性

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で追加

minlengthミニレングス属性は、テキストエリアに入力する最小の文字数 (半角)を指定する属性です。この属性を指定しない場合は最小文字数の制限はされません。

<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で追加

formフォーム属性は、 <textarea>要素を、<form>要素の中に配置したかった場合に、関連する<form>要素を指定する属性です。 <textarea>要素を、<form>要素の中に配置したかった場合は必ず必要な属性で、属性値には<form>要素に指定した、id属性の値を指定します。

<textarea form="関連するform要素のid名"></textarea>
属性値
<form>要素に指定した、id属性の属性値
利用できるバージョン(HTML4.01以降)
HTML5 〜
使用例
<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で追加

inputmodeインプットモード属性は、どのキーボードを表示するかを指定する属性です。

<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で追加

dirnameディーアイアールネーム属性は、テキストの方向 "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で追加

wrapラップ属性は、テキストエリアの幅を超えたテキストの折り返しを指定する属性です。この属性を省略した場合は "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
HTML5
4.10.11 The textarea element
HTML4.01
17.7 The TEXTAREA element

関連する要素

関連するレッスン