编辑“︁HTML表单属性”︁（章节）

= HTML表单属性 =

HTML表单属性是用于控制表单行为和外观的关键参数，它们可以定义数据提交方式、输入验证规则、用户交互逻辑等。表单属性通常设置在'''<form>'''标签内，但也可以用于'''<input>'''、'''<select>'''等表单控件元素。本指南将详细介绍常用表单属性及其实际应用。

== 核心表单属性 ==

=== action ===
'''action''' 属性指定表单数据提交的目标URL。如果未设置，默认提交到当前页面。

<syntaxhighlight lang="html">
<form action="/submit-data" method="post">
  <!-- 表单内容 -->
</form>
</syntaxhighlight>

=== method ===
定义HTTP请求方法：
* '''GET'''：数据附加在URL中（适合非敏感数据）
* '''POST'''：数据在请求体中发送（适合敏感数据或大数据量）

<syntaxhighlight lang="html">
<form action="/search" method="get">
  <input type="text" name="query">
  <button type="submit">搜索</button>
</form>
</syntaxhighlight>

=== enctype ===
指定表单数据的编码方式：
* '''application/x-www-form-urlencoded'''（默认）
* '''multipart/form-data'''（文件上传时必需）
* '''text/plain'''（调试用）

== 输入控件属性 ==

=== 通用属性 ===
{| class="wikitable"
|+ 常用输入控件属性
! 属性 !! 描述 !! 示例
|-
| '''name''' || 数据字段名称 || <code><nowiki><input name="username"></nowiki></code>
|-
| '''value''' || 默认值 || <code><nowiki><input value="admin"></nowiki></code>
|-
| '''required''' || 必填字段 || <code><nowiki><input required></nowiki></code>
|-
| '''placeholder''' || 提示文本 || <code><nowiki><input placeholder="请输入邮箱"></nowiki></code>
|}

=== 高级验证属性 ===
<syntaxhighlight lang="html">
<input type="email" pattern=".+@.+\..+" title="请输入有效邮箱">
<input type="number" min="1" max="100">
<input type="text" minlength="6" maxlength="20">
</syntaxhighlight>

== 实际案例 ==

=== 用户注册表单 ===
<syntaxhighlight lang="html">
<form action="/register" method="post" enctype="multipart/form-data">
  <label>用户名: <input type="text" name="username" required minlength="4"></label>
  <label>密码: <input type="password" name="pwd" required pattern="(?=.*\d)(?=.*[a-z]).{8,}"></label>
  <label>头像: <input type="file" name="avatar" accept="image/*"></label>
  <button type="submit">注册</button>
</form>
</syntaxhighlight>

=== 表单状态图 ===
<mermaid>
stateDiagram-v2
    [*] --> 表单初始化
    表单初始化 --> 数据输入: 用户开始输入
    数据输入 --> 验证: 触发验证事件
    验证 --> 有效: 通过验证
    验证 --> 无效: 验证失败
    有效 --> 提交就绪
    无效 --> 数据输入: 显示错误
    提交就绪 --> 表单提交: 用户确认
    表单提交 --> [*]
</mermaid>

== 数学公式示例 ==
表单验证评分公式示例：
<math>
Score = \frac{\sum_{i=1}^{n} (valid\_fields_i)}{total\_fields} \times 100\%
</math>

== 高级用法 ==

=== 动态属性控制 ===
使用JavaScript动态修改属性：
<syntaxhighlight lang="javascript">
document.querySelector('input[name="age"]').max = new Date().getFullYear() - 18;
</syntaxhighlight>

=== 数据列表关联 ===
<syntaxhighlight lang="html">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
</syntaxhighlight>

== 最佳实践 ==
* 始终为表单控件设置'''name'''属性
* 使用'''required'''替代自定义验证逻辑
* 移动设备优先考虑使用合适的'''input type'''
* 复杂表单考虑分步骤提交

== 参见 ==
* [[HTML表单元素]]
* [[表单验证技术]]
* [[CSS表单样式]]

本内容最后更新于：2023年11月15日

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]