html多行文本框代码怎么写

HTML多行文本框是通过<textarea>标签实现的，它允许用户输入多行文本，在网页设计中，多行文本框常用于收集用户的长篇输入，如评论、反馈或详细描述等。

基本语法

创建一个基础的多行文本框非常简单，你只需要在HTML文档中使用<textarea>标签即可，以下是一个基本示例：

<textarea rows="4" cols="50">
在这里输入文本...
</textarea>

在这个例子中，rows属性定义了文本框显示的行数，而cols属性定义了文本框显示的列数，你可以根据需要调整这些值。

添加提示文本

有时，你可能想要在文本框中显示一些提示文本，指导用户应该输入什么内容，这可以通过在<textarea>标签内部放置文本来实现，当用户聚焦到该文本框时，提示文本会消失，让用户输入自己的内容。

<textarea rows="4" cols="50">
请输入您的评论...
</textarea>

表单提交

通常，多行文本框会作为表单的一部分来使用，以便收集并提交用户输入的数据，要实现这一点，你需要将<textarea>标签放在<form>标签内，并使用一个提交按钮。

<form action="/submit_comment" method="post">
  <textarea name="user_comment" rows="4" cols="50">
    请输入您的评论...
  </textarea>
  <input type="submit" value="提交">
</form>

在上面的代码中，action属性定义了表单数据提交到的服务器端点，method属性定义了数据提交的方式（这里是POST方法）。name属性是必需的，以便服务器能够识别提交的数据。

样式和验证

你可以使用CSS来美化你的多行文本框，使其与网站的整体风格相匹配，为了确保用户输入了有效的信息，你可以使用JavaScript或jQuery进行客户端验证。

<style>
  textarea {
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid ccc;
    border-radius: 4px;
    background-color: f8f8f8;
    font-size: 16px;
    resize: none;
  }
</style>
<script>
  function validateTextarea(form) {
    var text = form.user_comment.value;
    if (text == "") {
      alert("评论不能为空");
      return false;
    }
    return true;
  }
</script>
<form action="/submit_comment" method="post" onsubmit="return validateTextarea(this)">
  <textarea name="user_comment" rows="4" cols="50">
    请输入您的评论...
  </textarea>
  <input type="submit" value="提交">
</form>

在上面的代码中，我们首先通过CSS给文本框添加了一些样式，然后通过JavaScript函数validateTextarea在表单提交之前进行了简单的非空验证。

相关问题与解答

Q1: 如何禁用HTML多行文本框？

A1: 你可以通过在<textarea>标签中添加disabled属性来禁用文本框，如下所示：

<textarea rows="4" cols="50" disabled>
已禁用的文本框
</textarea>

Q2: 如何设置多行文本框为只读？

A2: 要设置多行文本框为只读，你可以使用readonly属性，这样用户可以看到文本框的内容但不能修改它：

<textarea rows="4" cols="50" readonly>
只读文本框
</textarea>