HTML要素 ・ フォーム
<textarea>
複数行の入力欄
お問い合わせ内容など、複数行の文章を入力するための欄です。rows で表示する行数の目安を指定します。
01
サンプルコード
HTML
1<label for="message">お問い合わせ内容</label>
2<textarea id="message" name="message" rows="4" placeholder="ご自由にお書きください"></textarea>
CSS
1label {
2 display: block;
3 margin-bottom: 4px;
4}
5textarea {
6 width: 100%;
7 box-sizing: border-box;
8 padding: 8px 10px;
9 border: 1px solid #bbb;
10 border-radius: 4px;
11 font: inherit;
12 resize: vertical;
13}
02
実行結果
ブラウザでの表示
03
解説
textarea は、改行を含む長い文章を入力できる欄です。input と違って終了タグが必要で、タグの間に書いた文字が初期値になります。
幅や高さはCSSで指定するのが一般的です。width: 100% にすると、親要素の幅いっぱいに広がります。
利用者は右下のつまみで大きさを変えられます。CSSの resize: vertical で縦方向だけに制限できます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
rows / cols | 表示する行数 / 1行の文字数の目安 |
maxlength | 入力できる最大文字数 |
minlength | 入力が必要な最小文字数 |
placeholder | 入力例 |
required | 必須入力にする |
文字数の上限・下限を設ける
maxlength を付けるとそれ以上は入力できなくなり、minlength を付けると文字数が足りないときに送信時にブラウザが警告します。
HTML
1<textarea name="comment" rows="3" minlength="10" maxlength="200"></textarea>
注意点
- 01初期値を入れないときは、開始タグと終了タグの間に空白や改行を入れないでください。そのまま初期値になります。
- 02textarea にも必ず label を付けます。