轻松上手HTML：textarea元素
- 前端
- 2024-06-13
- 242热度
- 0评论
textarea元素
textarea元素和前面介绍的input元素都可以获取用户在输入框输入的文本内容，哪为什么还要提供textarea元素呢？这就涉及到输入文本内容多少的问题，input元素只能输入单行文本内容，输入再多的文字也只能在一行显示，而且没有滚动条；textarea元素就不同了，textarea元素可以输入多行文本内容，支持文本回车和在textarea的宽度内文本自动换行，当输入的文本内容行数超过textarea元素的高度时，textarea元素会自动出现纵向滚动条。
textarea元素使用textarea标签，textarea标签有两个比较重要的属性cols和rows，cols属性用于设置textarea元素输入区域的可见宽度，rows属性用于设置textarea元素输入区域的可见高度。例如下面的HTML文档展示了textarea元素及属性rows和cols的使用方法。
<html>
<head>
<title>使用textarea获取多行文本内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h5>这是每行30个字符，5行高度的输入框</h5>
<textarea cols="15" rows="5">
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
</textarea>
<h5>这是每行10个字符，3行高度的输入框</h5>
<textarea cols="10" rows="3">
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
</textarea>
</boyd>
<html>
下图是浏览器的显示效果。从浏览器的显示效果可以看出，输入框的宽度由属性cols确定，当输入框内容每行的字符数超过设置的宽度时，输入框会对输入的内容自动换行；输入框的高度由属性rows确定，当输入框内容的高度超过输入框自身高度时，输入框会自动显示纵向滚动条。
例1：设计一个用户信息登记网页，用户信息包括用户姓名、年龄、性别、邮箱、爱好（可多选）、个人简介。
<html>
<head>
<title>信息登记</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3>用户信息登记表</h3>
<hr>
<form action="/login.jsp">
<p> 姓名：<input type="text" name="username" maxlength="20" value="请输入您的姓名"/></p>
<p> 年龄：<input type="text" name="age" maxlength="3" value="请输入您的年龄"/></p>
<p>性别：<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</p>
<p>爱好：</p>
<input type="checkbox" name="fav" value="旅游" checked />旅游
<input type="checkbox" name="fav" value="体育" checked />体育
<input type="checkbox" name="fav" value="文学" />文学
<input type="checkbox" name="fav" value="娱乐" />娱乐
<input type="checkbox" name="fav" value="学习" />学习
<input type="checkbox" name="fav" value="军事" />军事
<p>个人简介：</p>
<textarea name=”brief” cols="50" rows="10">请输入个人简介</textarea>
<p><input type="submit" value="提交"/></p>
</form>
</boyd>
<html>
浏览器显示效果如下图所示。在上面的网页代码中，textarea的宽度和高度由cols和rows属性确定。但在实际应用中，textarea的宽度和高度一般由CSS来确定。
