更新时间:2014年8月10日

textarea元素(文本文件输入领域)

<textarea>~</textarea>

textarea元素表示编辑文本文件的控件。文本文件中可以改行。该元素的内容,即<textarea>与</textarea>之间放入的文本文件为该控件的值。

属性

1、autofocus内容属性
当网页下载完毕后,光标自动指向的地方。
2、cols内容属性
r指定1行中能够表示的文字数。
3、dirname内容属性
书写方向信息的名称。
4、disabled内容属性
控制无效。
5、form内容属性
指定与该当元素建立链接的表单的id值。
6、maxlength内容属性
指定最大输入文字数。
7、name内容属性
指定控件的名称。
8、placeholder内容属性新元素
指定提示。
使用placeholder内容属性表示提示内容,即,向用户做出该在输入领域内输入什么内容的提示。
9、readonly内容属性
只读。
10、required内容属性新元素
必须。
11、rows内容属性
指定表示的行数。
12、wrap内容属性
指定自动切换的模式。

当提交表单时,使用wrap内容属性反应控件内容的改行情况,属于列举属性,其值为soft与hard。

soft为如果没有明确的改行,即使输入内容有自动换行显示,提交到服务器的值中也不会在换行处有换行信息。

hard为输入内容有自动换行的显示,即使没有明确的改行,提交到服务器的值中也会自动插入改行。

使用例

<p>指定行数和列数:

<textarea name="comment" cols="50" rows="5">尤其夜景,最值得看</textarea></p>

<p>指定最大输入文字数:

<textarea name="comment" maxlength="50">尤其夜景,最值得看</textarea></p>

<p>不能输入文字为只读时:

<textarea name="comment" readonly="readonly">尤其夜景,最值得看</textarea></p>

<p>必须填充:

<textarea name="comment" required="required"></textarea></p>

<p>指定自动切换的模式:

<textarea name="comment" wrap="soft" cols="10" rows="5">今天的川菜辣的刚好,

快变成川妹子了。</textarea></p>

显示提示内容:

<p><label for="thing">今天的新鲜事</label></p>

<textarea name="thing" placeholder="分享一下今天的新鲜事吧!"cols="50" rows="5"></textarea>

<button type="submit">投稿</button>

<p>只读:

<textarea readonly="readonly">尤其夜景,最值得看</textarea></p>

<p>必须:

<textarea name="comment" required="required"></textarea></p>

<p>wrap内容属性的值为soft时:

<textarea name="comment" wrap="soft" cols="10" rows="5">今天的川菜,

辣的刚好,快变成川妹子了。</textarea></p>

浏览器上的显示结果↓



指定行数和列数:

指定最大输入文字数:

不能输入文字为只读时:

必须填充:

指定自动切换的模式:

显示提示内容:

只读:

必须:

wrap内容属性的值为soft时:

X

浏览器支持情况

元素
textarea yes yes yes yes yes