HTML 多行文本框的设置
在 HTML 中，我们可以使用 <textarea> 标签来创建一个多行文本框。<textarea> 标签允许用户输入多行文本，并且可以通过 JavaScript 对文本内容进行操作，下面我们详细介绍如何使用 <textarea> 标签创建一个多行文本框，并对其进行样式和功能设置。
基本用法
1、创建一个多行文本框
要创建一个多行文本框，只需在 HTML 代码中添加一个 <textarea> 标签即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多行文本框示例</title> </head> <body> <textarea rows="4" cols="50"></textarea> </body> </html>
在这个例子中，我们创建了一个具有 4 行和 50 列的多行文本框，用户可以在这个文本框中输入多行文本。
2、设置文本框的默认值
我们可以使用 placeholder 属性为文本框设置一个提示性的占位符，当用户没有输入任何内容时，占位符会显示在文本框中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>带占位符的多行文本框示例</title> </head> <body> <textarea rows="4" cols="50" placeholder="请输入文本"></textarea> </body> </html>
3、设置文本框的高度和宽度
我们可以使用 rows 和 cols 属性分别设置文本框的行数和列数。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义高度和宽度的多行文本框示例</title> </head> <body> <textarea rows="5" cols="60"></textarea> </body> </html>
高级用法
1、设置文本框的边框、背景颜色等样式
我们可以使用内联样式或者 CSS 类来设置文本框的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置样式的多行文本框示例</title>
<style>
textarea {
border: 1px solid ccc;
background-color: f9f9f9;
}
</style>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
</body>
</html>
2、通过 JavaScript 获取和修改文本框的内容
我们可以使用 JavaScript 的 getElementById()、querySelector() 等方法获取文本框元素，然后通过 value 属性获取或修改文本框的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取和修改多行文本框内容示例</title>
<script>
function getText() {
var textArea = document.getElementById("myTextarea");
var content = textArea.value;
alert("文本框内容：" + content);
}
</script>
</head>
<body onload="getText()">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/215033.html
微信扫一扫