HTML的textarea标签
HTML的textarea标签技术文档
什么是textarea标签？
textarea标签是HTML中一种用于创建多行文本输入框的标签。它允许用户在此输入框内输入多行文本数据。
textarea标签的语法
<textarea rows="行数" cols="列数" name="名称">
默认文本内容
</textarea>
rows属性
rows属性用于设置输入框的行数。
cols属性
cols属性用于设置输入框的列数。
name属性
name属性表示输入框的名称，在表单提交时将会提交该输入框的名称及输入的值。
同时也可以添加其他的属性来实现不同的功能或效果，如：
- placeholder：规定输入框中用于提示用户的占位符文本。
- readonly：设置为只读输入框。
- disabled：设置为禁用输入框。
textarea标签的使用
基本使用：
<textarea rows="5" cols="50"></textarea>
通过上面代码创建的textarea输入框行数为5，列数为50。
添加默认值：
<textarea rows="5" cols="50">请填写内容……</textarea>
通过上面代码，在输入框中默认显示“请填写内容……”这段文本提示用户输入内容。
通过添加其他属性实现不同的效果：
<textarea rows="10" cols="50" placeholder="请输入内容……" readonly></textarea>
通过上面代码创建的textarea输入框行数为10，列数为50，同时添加了占位符提示文本和只读属性。
textarea标签的实例
创建一个表单卡片，包括标题，正文，和提交按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单卡片</title>
<style>
.card {
width: 400px;
height: 400px;
margin: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.title {
text-align: center;
font-size: 30px;
}
.submit{
width: 100%;
height: 50px;
margin-top: 20px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
.submit:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="card">
<div class="title">表单</div>
<form>
<label for="title">标题</label>
<br>
<input type="text" id="title" name="title">
<br>
<label for="content">正文</label>
<br>
<textarea rows="10" cols="50" id="content" name="content"></textarea>
<br>
<input type="submit" value="提交" class="submit">
</form>
</div>
</body>
</html>
通过上面的代码可以创建一个表单卡片，包括标题，正文，和提交按钮。其中正文使用了textarea标签来创建多行文本输入框。
可以通过修改该文本框的属性实现不同的效果，如设置只读，禁用，或者添加其他属性，如行数，列数，占位符提示文本等。同时，可以结合其他标签一起使用，用于表单或卡片等场景，实现更丰富多样的效果。