textareaの概要
| 複数行のテキスト入力 HTMLタグ | ||
|
<textarea>テキスト</textarea> 概要 textareaタグは、複数行のテキストを入力できるフォーム要素を作成するためのHTMLタグです。主にコメント欄やメモ入力欄などに使用されます。 |
||
|
textareaタグで使用できる主な属性一覧
| 属性 | 説明 | 使用例 |
|---|---|---|
rows |
表示する行数を指定 | <textarea rows="5"></textarea> |
cols |
表示する列数（文字数の目安）を指定 | <textarea cols="40"></textarea> |
placeholder |
入力欄に表示するガイドテキスト | <textarea placeholder="ここに入力してください"></textarea> |
maxlength |
入力可能な最大文字数を制限 | <textarea maxlength="200"></textarea> |
required |
必須入力項目にする | <textarea required></textarea> |
readonly |
編集不可にする（コピーは可能） | <textarea readonly>変更できません</textarea> |
disabled |
無効化して入力不可にする | <textarea disabled>無効</textarea> |
wrap |
テキストの折り返し方法を指定（softまたはhard） |
<textarea wrap="soft"></textarea> |
autofocus |
ページ読み込み時にフォーカスを当てる | <textarea autofocus></textarea> |
textareaタグの基本的な使い方
以下の例では、基本的なtextareaフィールドを作成しています。
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>実行例：
注意事項
- デフォルトではスクロールバーが表示されるが、CSSで調整可能。
- テキストの自動改行（折り返し）を制御するには
wrap属性を使用する。 - 入力制限を設ける場合は、
maxlengthを設定する。 - フォーム送信時、
disabled属性が設定されている場合、データは送信されない。
よくある質問
- Q: textareaタグとinputタグの違いは？
- A:
textareaは複数行の入力が可能ですが、input（type="text"）は1行のみです。 - Q: textareaのサイズを変更できないようにするには？
- A: CSSの
resize: none;を適用すると、ユーザーがサイズを変更できなくなります。 - Q: textareaのデフォルト値を設定するには？
- A:
<textarea>デフォルトテキスト</textarea>のように、タグの中に直接記述します。 - Q: wrap=”soft” と wrap=”hard” の違いは？
- A:
softは改行を保持せず、hardは改行を保持したまま送信します。 - Q: textareaの最大入力文字数を制限できますか？
- A:
maxlength属性を設定すると、指定した文字数を超えないように制限できます。
まとめ
textareaタグは、複数行のテキスト入力を可能にするフォーム要素。- CSSでサイズやスタイルをカスタマイズできる。
- JavaScriptと組み合わせることで、入力内容の動的操作が可能。
- 入力制限を設定するには、
maxlength属性を使用する。