国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > form 以获得更好的体验。

# HTML 的 <form> 标签

请查看 HTML 元素帮助手册 了解更多 HTML 元素。

HTML 的表单元素 <form> 表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。

# 属性

请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
  • accept(废弃): 一个逗号分隔的列表,包括服务器能接受的内容类型。

  • accept-charset: 服务器接受的字符编码。规范允许使用单个不区分大小写的值——"UTF-8",反应了这种编码的普遍性(历史上,可以以逗号分隔列表或空格分隔列表的形式指定多个字符编码)。

  • autocapitalize: 这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中,输入/编辑一些文本值时,此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话,那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下:

    • none :完全禁用自动首字母大写。

    • sentences :自动对每句话首字母大写。

    • words :自动对每个单词首字母大写。

    • characters :自动大写所有的字母。

  • autocomplete: 用于指示 input 元素是否能够拥有一个默认值,此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有:

    • off :浏览器可能不会自动补全条目(在疑似登录表单中,浏览器倾向于忽略该值,而提供密码自动填充功能,参见自动填充属性和登录)

    • on :浏览器可自动补全条目

  • name: 表单的名称。该值不能是空字符串,而且在其所在的表单集合中的所有表单(form)元素之中必须是独一无二的(如果有的话)。

  • rel: 控制注释和表单创建的链接类型。注释包括 external、nofollow、opener、noopener 和 noreferrer。链接类型包括 help、prev、next、search 和 license。rel 值是这些枚举值的空格分隔列表。

# 示例

<form action="/submit-form" method="POST" enctype="application/x-www-form-urlencoded">
  <fieldset>
    <legend>用户注册</legend>
    
    <!-- 文本输入 -->
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required minlength="4" placeholder="输入用户名">
    </div>
    
    <!-- 密码输入 -->
    <div>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required minlength="8">
    </div>
    
    <!-- 邮箱输入 -->
    <div>
      <label for="email">电子邮箱:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <!-- 单选按钮 -->
    <div>
      <label>性别:</label>
      <input type="radio" id="male" name="gender" value="male" checked>
      <label for="male"></label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female"></label>
    </div>
    
    <!-- 下拉选择 -->
    <div>
      <label for="country">国家:</label>
      <select id="country" name="country">
        <option value="">--请选择--</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
      </select>
    </div>
    
    <!-- 多选框 -->
    <div>
      <label for="newsletter">订阅新闻:</label>
      <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    </div>
    
    <!-- 文件上传 -->
    <div>
      <label for="avatar">上传头像:</label>
      <input type="file" id="avatar" name="avatar" accept="image/*">
    </div>
    
    <!-- 文本域 -->
    <div>
      <label for="bio">个人简介:</label>
      <textarea id="bio" name="bio" rows="4" cols="40"></textarea>
    </div>
    
    <!-- 隐藏字段 -->
    <input type="hidden" name="token" value="abc123">
    
    <!-- 按钮 -->
    <div>
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </div>
  </fieldset>
</form>

# 推荐阅读

本文 更新于: 2025-11-27 09:38:03 创建于: 2025-11-27 09:38:03