path: root/files/ja/web/html/element/textarea/index.html

---
title: <textarea>
slug: Web/HTML/Element/textarea
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
  - textarea
translation_of: Web/HTML/Element/textarea
---
<div>{{HTMLRef}}</div>

<p><strong>HTML の <code>&lt;textarea&gt;</code> 要素</strong>は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p>上記の例では <code>&lt;textarea&gt;</code> の様々な機能を紹介しています。</p>

<ul>
 <li><code>id</code> 属性により、アクセシビリティのために <code>&lt;textarea&gt;</code> を {{htmlelement("label")}} 要素に結びつけることができる</li>
 <li><code>name</code> 属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定している</li>
 <li><code>rows</code> 属性と <code>cols</code> 属性により、 <code>&lt;textarea&gt;</code> が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。</li>
 <li>既定のコンテンツが開始タグと終了タグの間に入っています。 <code>&lt;textarea&gt;</code> は <code>value</code> 属性に対応していません。</li>
</ul>

<p><code>&lt;textarea&gt;</code> 要素は他にも、フォームの <code>&lt;input&gt;</code> と共通の属性のいくつか、例えば <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code> などを受け付けます。</p>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>

<dl>
 <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
 <dd>これは標準外の属性で、 iOS の WebKit (従って Safari、Firefox、Chrome を含む、iOS で動作するほぼすべてのブラウザー) が対応しており、ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、 iOS 5 以降で使用できます。以下の値を指定できます。
 <ul>
  <li><code>none</code>: 自動大文字化機能を無効にします。</li>
  <li><code>sentences</code>: 文の先頭文字を自動的に大文字化します。</li>
  <li><code>words</code>: 単語の先頭文字を自動的に大文字化します。</li>
  <li><code>characters</code>: すべての文字を自動的に大文字化します。</li>
  <li><code>on</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li>
  <li><code>off</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("autocomplete")}}</dt>
 <dd>この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。
 <ul>
  <li><code>off</code>: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。</li>
  <li><code>on</code>: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。</li>
 </ul>

 <p><code>&lt;textarea&gt;</code> 要素で <strong>autocomplete</strong> 属性を指定していない場合は、ブラウザーは <code>&lt;textarea&gt;</code> 要素のフォームオーナーの <strong>autocomplete</strong> 属性の値を使用します。フォームオーナーは当該 <code>&lt;textarea&gt;</code> 要素が子孫になっている {{HTMLElement("form")}} 要素か、textarea 要素の <strong>form</strong> 属性で <strong>id</strong> を指定されている form 要素です。詳しくは、{{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。</p>
 </dd>
 <dt>{{ htmlattrdef("autofocus") }}</dt>
 <dd>この論理属性で、ユーザーが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書中のフォーム関連要素のうちのひとつだけに、この属性を指定することができます。値は、属性名と同じ <code>autofocus</code> のみ指定可能です。</dd>
 <dt>{{ htmlattrdef("cols") }}</dt>
 <dd>平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定しない場合のデフォルト値は <code>20</code> です (HTML5)。</dd>
 <dt>{{ htmlattrdef("disabled") }}</dt>
 <dd>この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば <code>fieldset</code> 要素から継承します。もし親要素に <code>disabled</code> 属性を持つものがなければ、そのコントロールは利用可能です。)</dd>
 <dt>{{ htmlattrdef("form") }}</dt>
 <dd><code>&lt;textarea&gt;</code> 要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、<code>&lt;textarea&gt;</code> 要素を form 要素の子要素として配置しなければなりません。この属性により、<code>&lt;textarea&gt;</code> 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。</dd>
 <dt>{{ htmlattrdef("maxlength") }}</dt>
 <dd>ユーザーが入力可能な文字 (UTF-16 コード単位) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。</dd>
 <dt>{{ htmlattrdef("minlength") }}</dt>
 <dd>ユーザーが入力しなければならない最小文字数 (UTF-16 コード単位) です。</dd>
 <dt>{{ htmlattrdef("name") }}</dt>
 <dd>コントロールの名前です。</dd>
 <dt>{{ htmlattrdef("placeholder") }}</dt>
 <dd>コントロールに何を入力できるかに関する、ユーザーへの助言です。プレイスホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。
 <div class="note"><strong>注:</strong> プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用<em>しない</em>でください。全体的な説明は、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "ラベルとプレイスホルダー")}}を参照してください。</div>
 </dd>
 <dt>{{ htmlattrdef("readonly") }}</dt>
 <dd>この論理属性は、ユーザーがコントロールの値を変更できないことを示します。<code>disabled</code> 属性とは異なり、<code>readonly</code> 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。</dd>
 <dt>{{ htmlattrdef("required") }}</dt>
 <dd>この属性は、フォームを送信する前に値を入力しなければならないことを示します。</dd>
 <dt>{{ htmlattrdef("rows") }}</dt>
 <dd>コントロールで見ることが可能なテキストの行数です。</dd>
 <dt>{{ htmlattrdef("spellcheck") }}</dt>
 <dd><code>&lt;textarea&gt;</code> がブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。
 <ul>
  <li><code>true</code>: 要素でスペルや文法チェックを行う必要があることを示します。</li>
  <li><code>default</code> : 要素は既定の動作、おそらく親要素の <code>spellcheck</code> 値によって動作することを示します。</li>
  <li><code>false</code> : 要素でスペルチェックを行うべきではないことを示します。</li>
 </ul>
 </dd>
 <dt>{{ htmlattrdef("wrap") }}</dt>
 <dd>テキストの折り返しの制御法を示します。以下の値を指定可能です。
 <ul>
  <li><code>hard</code> : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入します。<code>cols</code> 属性を指定しなければなりません。</li>
  <li><code>soft</code> : ブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持しますが、改行の付加は行いません。</li>
  <li><code>off</code> {{non-standard_inline}}: <code>soft</code> に似ていますが外観を <code>white-space: pre</code> に変更しますので、<code>cols</code> を超えた部分は折り返されず、水平方向にスクロール可能になります。</li>
 </ul>

 <p>この属性を指定しない場合の既定値は <code>soft</code> です。</p>
 </dd>
</dl>

<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2>

<p><code>&lt;textarea&gt;</code> は<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>です。 — ラスタ画像のように固有の寸法を持ちます。既定では、 {{cssxref("display")}} の値は block です。ボックスモデル、フォント、カラースキーム等のスタイル付けが普通の CSS を使用して操作しやすいので、他のフォーム要素と比較して、スタイル付けは比較的容易です。</p>

<p><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a>に、 <code>&lt;textarea&gt;</code> にスタイル付けするためのいくつかの有益なコツがあります。</p>

<h3 id="Baseline_inconsistency" name="Baseline_inconsistency">ベースラインの不整合</h3>

<p>HTML 仕様書では、 <code>&lt;textarea&gt;</code> のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。 Gecko では <code>&lt;textarea&gt;</code> のベースラインを textarea の最初の行のベースラインに設定しています。他のブラウザーは、<code>&lt;textarea&gt;</code> のボックスの下端に設定していることもあります。動作を予測できないため、textarea で {{cssxref("vertical-align")}}<code>: baseline</code> を使用しないようにしてください。</p>

<h3 id="Controlling_whether_a_textarea_is_resizable" name="Controlling_whether_a_textarea_is_resizable">textarea の大きさの変更が可能かどうかの制御</h3>

<p>多くのブラウザーでは、 <code>&lt;textarea&gt;</code> は大きさの変更が可能です。 — 右端の隅にドラッグのためのハンドルがあり、ページ内の要素の大きさを変更するための使用できることが分かるでしょう。これは CSS の {{ cssxref("resize") }} プロパティで制御されます。 — 既定では大きさの変更が有効ですが、 <code>resize</code> の値に <code>none</code> を使用することで明示的に無効にすることができます。</p>

<pre class="brush: html notranslate">textarea {
  resize: none;
}
</pre>

<h3 id="Styling_valid_and_invalid_values" name="Styling_valid_and_invalid_values">有効・無効な値のスタイル付け</h3>

<p>{{cssxref(":valid")}} 及び {{cssxref(":invalid")}} 擬似クラスを使用すると、 <code>&lt;textarea&gt;</code> で有効又は無効な値 (例えば <code>minlength</code> と <code>maxlength</code> の範囲の中に収まっているか外れているか、又は <code>required</code>) を強調表示できます。例えば以下のように、中の値が有効か無効かでテキストエリアの境界を異なる表示にすることができます。</p>

<pre class="brush: css notranslate">textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
   border: 2px solid lime;
}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Basic_example" name="Basic_example">基本的な例</h3>

<p>以下の例は、行数と列数と既定の内容だけを設定した、とても単純なテキストエリアを表示します。</p>

<pre class="brush: html notranslate">&lt;textarea name="textarea"
   rows="10" cols="50"&gt;ここに何か書いてください&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p>

<h3 id="Min_and_max_length" name="Min_and_max_length">最小・最大長</h3>

<p>この例は文字数の最小・最大値を、それぞれ 10 と 20 に設定しています。見てみましょう。</p>

<pre class="brush: html notranslate">&lt;textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20"&gt;ここに何か書いてください&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p>

<p>なお、 <code>minlength</code> は最小値を越えて入力された文字をユーザーが削除することを阻止しませんので、入力された値により <code>&lt;textarea&gt;</code> が無効になることがあります。また、 <code>minlength</code> の値が (例えば 3 に) 設定されていた場合であっても、 <code>&lt;textarea&gt;</code> が空欄である場合は <code>required</code> 属性が設定されていない限り有効として扱われます。</p>

<h3 id="Placeholder" name="Placeholder">プレイスホルダー</h3>

<p>この例はプレイスホルダーを設定します。ボックスに入力を開始した時に消えることを確認して下さい。</p>

<pre class="brush: html notranslate">&lt;textarea name="textarea"
   rows="5" cols="30"
   placeholder="コメントの文字列"&gt;&lt;/textarea&gt;</pre>

<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p>

<div class="note">
<p><strong>注:</strong> プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用<em>しない</em>でください。全体的な説明は、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "ラベルとプレイスホルダー")}}を参照してください。</p>
</div>

<h3 id="Disabled_and_readonly" name="Disabled_and_readonly">無効と読み取り専用</h3>

<p>この例は二つの <code>&lt;textarea&gt;</code> を示しています。 — 一つは <code>disabled</code> であり、もう一方は <code>readonly</code> です。両方を試してみて動作の違いを確認してください。 — <code>disabled</code> の要素はどのような方法でも選択できず (値の送信もされません)、 <code>readonly</code> の要素は選択可能で内容をコピーできます (そして値は送信されます)。内容が編集できないだけです。</p>

<div class="note">
<p><strong>注:</strong> Chrome など、 Firefox 以外のブラウザーでは、 <code>disabled</code> のテキストエリアのコンテンツが選択可能でコピー可能である場合もあります</p>
</div>

<pre class="brush: html notranslate">&lt;textarea name="textarea"
   rows="5" cols="30"
   disabled&gt;I am a disabled textarea&lt;/textarea&gt;
&lt;textarea name="textarea"
   rows="5" cols="30"
   readonly&gt;I am a readonly textarea&lt;/textarea&gt;
</pre>

<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</p>

<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#form_resettable">リセット可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">サブミット可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連</a> 要素</td>
  </tr>
  <tr>
   <th scope="row">許可された内容</th>
   <td>テキストのみ</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可された親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></td>
  </tr>
  <tr>
   <th scope="row">許可された ARIA ロール</th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLTextAreaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.textarea")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<p>他のフォーム関連要素:</p>

<ul>
 <li>{{ HTMLElement("form") }}</li>
 <li>{{ HTMLElement("button") }}</li>
 <li>{{ HTMLElement("datalist") }}</li>
 <li>{{ HTMLElement("legend") }}</li>
 <li>{{ HTMLElement("label") }}</li>
 <li>{{ HTMLElement("select") }}</li>
 <li>{{ HTMLElement("optgroup") }}</li>
 <li>{{ HTMLElement("option") }}</li>
 <li>{{ HTMLElement("input") }}</li>
 <li>{{ HTMLElement("keygen") }}</li>
 <li>{{ HTMLElement("fieldset") }}</li>
 <li>{{ HTMLElement("output") }}</li>
 <li>{{ HTMLElement("progress") }}</li>
 <li>{{ HTMLElement("meter") }}</li>
</ul>