textarea要素
使用例
<textarea>ABC</textarea>
| コード |
表示例 |
<textarea>A
B</textarea>
|
|
<textarea>A B</textarea>
(文字参照で表記) |
|
属性
| 属性 |
作用 |
| cols |
コントロールの幅 (平均的な文字幅による)。既定値は20 |
| rows |
コントロールの可視領域の行数 |
| disabled |
|
| readonly |
|
| name |
|
属性 - textarea 要素 - HTML: HyperText Markup Language | MDN
cols
| |
cols属性による指定
cols="**" |
CSSのwidth属性による指定
style="width: **em" |
| 3文字分の幅 |
|
|
| 5文字分の幅 |
|
|
rows
| |
rows属性による指定
rows="**" |
CSSのheight属性による指定
style="height: **em" |
| 2行 |
|
|
| 4行 |
|
|
wrap
テキストが表示領域の幅を超えた場合について制御できます。指定値は3つあり、画面への表示とformからの送信への影響が異なります。
表示領域の幅を超えた場合
| |
画面への表示 |
formからの送信 |
| soft (既定) |
改行する |
改行しない |
| hard |
改行する ※1 |
| off |
改行しない |
wrap attribute | wrap property (Internet Explorer) | MSDN
※1 Firefoxでは、cols属性も指定されていなければ送信データは改行されません。wrap - textarea 要素 - HTML | MDN
| wrap="soft" |
wrap="hard" |
wrap="off" |
wrap="hard"
cols="5" |
|
|
|
|
|
[送信]をクリックすると、それを受信した結果が下のフレームに表示されます。
placeholder
入力すべき値を示唆できます。
placeholder内での改行
placeholderの値にキャリッジリターン (\r) またはラインフィード (\n) が含まれる場合、そこで改行して表示されるはずです。しかし実際にはブラウザによって挙動が異なり、Firefoxなどでは改行されません。html - Insert line break inside placeholder attribute of a textarea? - Stack Overflow
| コード |
表示例 |
placeholder="A
B"
|
|
placeholder="A B"
文字参照で表記 |
|