当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML 表单中的多行文本区域

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-09 08:20:20

在HTML中使用<textarea>和</textarea>定义多行文本区域。即使用<textarea>标签允许用户输入和编辑多行文本。

<textarea>元素经常用于定义大段文本内容，如书写评论、制作记事本、编辑网页内容。

<textarea>使用格式

下面是一个简单的例子用于说明<textarea>元素的具体用法。

<form action="form_example.asp" method="post">

 <label for="yourIntro">个人简介</label>

 <br>

 <textarea id="yourIntro" name="yourIntro" rows="5" cols="80">

翔宇亭IT乐园（http://www.biye5u.com）用心提供专业的IT内容。

 </textarea>

</form>

在textarea中：

id属性用于标识textarea的id值，可以用于脚本获取textarea中的值或设置textarea的样式或行为，也可以在CSS类中指定其样式。

name属性用于在表单提交后，让接收文件的程序获取该textarea中的值。

rows属性用于设置textarea中的可见行数；

cols属性用于设置textarea中一行中的字符数。

其在浏览器中的显示效果如下：

HTML textarea示例

textarea wrap属性

textarea的wrap属性用于在提交表单时，控件如何处理文本区域中的折行问题。

wrap属性有两种取值：

hard：浏览器将自动插入换行符（CR+LF）,以便每行不超过控件的宽度。若想达到此目的，textarea控件必须指定cols属性。

soft：浏览器确保textarea中输入值中的换行符都是由CR+LF构成的，但不会向内容中添加额外的换行符。也就是说，除非用户在textarea控件中真的使用了回车换行符，否则该控件不会自动添加回车换行符。

在没有指定wrap属性时，默认值是soft。

<form action="form_example.asp" method="post">

 <label for="yourIntro">个人简介</label>

 <br>

 <textarea id="yourIntro" name="yourIntro" rows="5" cols="40" wrap="hard">

翔宇亭IT乐园(http://www.biye5u.com)用心提供专业的IT内容。

 </textarea>

 <br>

 <input type="submit">

</form>



<form action="form_example.asp" method="post">

 <label for="yourIntro">个人简介</label>

 <br>

 <textarea id="yourIntro" name="yourIntro" rows="5" cols="40" wrap="soft">

翔宇亭IT乐园(http://www.biye5u.com)用心提供专业的IT内容。

 </textarea>

 <br>

 <input type="submit">

</form>

上面的代码在浏览器中显示情况如下图所示：

textarea wrap

从图中对比可以看出两者并没有区别。

但在表单提交后，后台接收的文本是有一定区别的。

textarea wrap value对比

第一行是wrap值为"hard"时的输出值。

第二行是wrap值为"soft"时的输出值。

第一行在“提”和“供”字之间有一个空白，这个空白就是在表单提交时，添加的"CR+LF"换行符。

为了在WEB中可以观察到这种换行符，我们可以使用替换功能，将"CR+LF"替换为"<br>"。

下图是在后台脚本添加替换处理后的输出对比图。

textarea wrap值处理后的对比

从对比中可以看出，在wrap值设置为"hard"时，当textarea中的内容输入到边界时，在提交表单时，浏览器添加了"CR+LF"换行符。

控制textarea控件是否可以调整大小

在大多数浏览器中，textarea控件是可以被调整大小的。textarea控件右下角有一个可拖动手柄，利用这个手柄，用户可以调整它的大小。

如果用户想禁止textarea被调整大小，可以通过CSS的resize属性来禁用它。

下面的例子演示了，禁用前和禁用后的效果：

<form action="form_example.asp" method="post">

 <label for="yourIntro">个人简介</label>

 <br>

 <textarea id="yourIntro" name="yourIntro" rows="5" cols="40">

翔宇亭IT乐园(http://www.biye5u.com)用心提供专业的IT内容。

 </textarea>

 <br>

 <input type="submit">

</form>



<form action="form_example.asp" method="post">

 <label for="yourIntro">个人简介</label>

 <br>

 <textarea id="yourIntro" name="yourIntro" rows="5" cols="40" style="resize:none;">

翔宇亭IT乐园(http://www.biye5u.com)用心提供专业的IT内容。

 </textarea>

 <br>

 <input type="submit">

</form>