HTML要素辞書 by Sentaro

<textarea>

複数行のテキスト入力欄を作成するためのフォーム要素です。

info

概要

<textarea> 要素は、ユーザーが複数行のテキスト（コメントやメッセージなど）を入力できるテキスト入力欄を作成します。
$\text{input type="text"}$ とは異なり、初期値は開始タグと終了タグの間に記述します。

play_circle

HTML (Source)

<textarea name="comment" rows="4" cols="50" placeholder="ご意見をお聞かせください..."> 初期値として入力されているテキストです。 </textarea>

Preview (Result)

list

属性名	説明
name	フォーム送信時にデータを識別するための名前。必須属性です。
rows	表示するテキストエリアの行数（高さ）を指定します。デフォルトは 2 行です。
cols	表示するテキストエリアの列数（幅）を指定します。文字幅（平均的な文字幅）に基づきます。
maxlength	ユーザーが入力できる最大文字数を指定します。
placeholder	入力がない場合に表示される薄い色のヒントテキスト。
required	送信時に値が必須であることを指定します（真偽属性）。
readonly	ユーザーによる編集を禁止しますが、フォームデータとしては送信されます（真偽属性）。
disabled	テキストエリアを無効化し、ユーザー入力もフォーム送信も行われません（真偽属性）。
wrap	フォーム送信時の折り返し方法を指定します。`soft`（デフォルト）、`hard`。

code

1. 行数・列数を指定した基本的な入力欄

<textarea name="message" rows="5" cols="40" placeholder="メッセージを入力 (5行 x 40文字幅)"></textarea>

2. 最大文字数と必須入力を設定した入力欄

<label for="feedback">フィードバック (200文字まで):</label>
<textarea id="feedback" name="feedback" maxlength="200" required></textarea>

3. 初期値を設定し、リサイズを禁止する (CSSも使用)

<textarea name="comment" style="resize: none;">
 このテキストは初期表示されます。
</textarea>

lightbulb

format_align_justify

値の指定方法
$\text{input}$ 要素と異なり、$\text{textarea}$ の初期値は属性ではなく、開始タグと終了タグの間に記述します。間にスペースや改行も含まれるため注意が必要です。

<!-- 正しい記述例 -->
<textarea>初期値</textarea>

<!-- 意図しない改行やスペースに注意 -->
<textarea>
 初期値
</textarea>  <-- これは改行やスペースを含む値になる

accessibility_new

アクセシビリティ
$\text{textarea}$ は、必ず $\text{label}$ 要素を用いて、その入力欄が何のためのものであるかを明確にする必要があります。$\text{for}$ 属性と $\text{id}$ 属性を関連付けましょう。