CODING FACTORY

HTML 教程 / 使用 textarea、select、option 和 button

HTML
创建时间 2026-11-03 最后修改 2026-11-03

使用 textarea 输入多行文本，使用 select 配合 option 创建预设的选择列表，使用 button 执行显式操作。这些元素在保留值和提交表单方面有不同的方式。

使用 textarea 输入多行文本

textarea 的初始值被设置在其开始标签和结束标签之间，而不是在属性 value 中。初始内容是可编辑的实际值；placeholder 只是空字段中的提示，输入后便会消失。

<label for="message">您的消息</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows 和 cols 会影响初始显示的大小；CSS 可以将控件调整到可用宽度。若要传送其内容，则需要 name。标签之间的文本将成为实际的初始值。如果您只想显示一个示例，请使用 placeholder 作为额外提示并保留标签。若读者可以编辑更长的回复，请使用 textarea 替代单行输入。

使用 select 和 option 提供选择项

<label for="topic">主题</label>
<select id="topic" name="topic">
  <option value="order">订单</option>
  <option value="delivery">配送</option>
  <option value="other">其他</option>
</select>

屏幕显示“订单”，但传递的值是 order。id="topic" 将控件与其标签连接，而 name="topic" 指定传递的数据。选择 value 值，这些值与服务器期望的相符。没有交互时，默认选择第一项。如果用户必须主动选择，则从 <option value="">请选择主题</option> 开始，并将 required 添加到 select。如果有合理的默认值，则实际的第一项可能更合适。

在一个表单中一起测试控件

将此文档保存为 controls.html。第一个空选项和属性 required 表示在提交之前必须选择一个真实的主题。此比较练习中包含了重置按钮。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>表单控件练习</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>练习使用联系字段</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">主题</label>
      <select id="topic-choice" name="topic" required>
        <option value="">请选择主题</option>
        <option value="order">订单</option>
        <option value="delivery">配送</option>
      </select></p>
    <p><label for="message-text">消息</label>
      <textarea id="message-text" name="message" rows="4">测试问题</textarea></p>
    <button type="submit">检查输入值</button>
    <button type="reset">恢复原始值</button>
  </form>
</body>
</html>
  1. 在不选择主题的情况下发送，以测试必选项。
  2. 选择“配送”，修改消息并发送。发送的值为 delivery，而可见标签为“配送”。
  3. 再次修改然后重置。主题将回到第一个选项，消息将恢复到其原始文本。

没有初始文本的控件在重置后显示为空；有初始值的控件会恢复到该值。请重新打开文件以比较其初始状态。

MDN上的textarea参考 · MDN上的select参考 · MDN上的button参考

明确指定每个按钮的类型

在表单内，button 默认用于提交。对于其他脚本驱动的操作，请使用type="button"，以免表单被意外提交。观察名称和值在表单结构中以及GET和POST方式下的传输情况。

<form method="get">
  <label for="note">注意</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">发送</button>
  <button type="reset">重置</button>
</form>

该表单使用 GET 方法并发送到当前 URL。在通过 HTTP 或 HTTPS 提供的页面上，提交后可以在 URL 中看到值。在本地打开的 file:// 文件中，处理方式取决于浏览器；这并不证明服务器端已成功处理。重置会将控件恢复到其初始值；它并不总是将其清空。如果 textarea 原本包含文本，重置会恢复该文本。重置按钮可能会删除某人的工作，因此在实际表单中，只有在它有明确用途和明确放置位置时，才应加入它。 请参见 MDN HTML 元素参考，了解各个属性。

type="button" 的按钮不会执行默认提交操作，但也不会自动获得其他功能。如果没有连接的脚本，点击该按钮不会产生任何效果。将 HTML 的内置提交和重置操作与需要脚本的操作区分开。

HTML
同分类其他文章