编辑“︁HTML表单基础”︁（章节）

= HTML表单基础 =

'''HTML表单'''是网页中用于收集用户输入的重要工具，广泛应用于登录、注册、搜索、调查问卷等场景。表单由各种输入控件（如文本框、单选按钮、复选框等）组成，用户填写后可将数据提交到服务器进行处理。

== 基本结构 ==
HTML表单使用<code><nowiki><form></nowiki></code>标签定义，其基本结构如下：

<syntaxhighlight lang="html">
<form action="/submit" method="post">
    <!-- 表单控件放在这里 -->
</form>
</syntaxhighlight>

* '''action'''：指定表单数据提交的URL。
* '''method'''：定义数据提交方式（GET或POST）。

=== GET vs POST ===
{| class="wikitable"
|-
! 方法 !! 描述 !! 适用场景
|-
| GET || 数据附加在URL后（可见） || 搜索、非敏感数据
|-
| POST || 数据在HTTP请求体中（不可见） || 登录、敏感数据
|}

== 常见表单控件 ==

=== 文本输入 ===
<syntaxhighlight lang="html">
<input type="text" name="username" placeholder="请输入用户名">
</syntaxhighlight>

* <code>type="text"</code>：单行文本输入
* <code>placeholder</code>：提示文本

=== 密码输入 ===
<syntaxhighlight lang="html">
<input type="password" name="pwd">
</syntaxhighlight>

=== 单选按钮 ===
<syntaxhighlight lang="html">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</syntaxhighlight>

* 相同<code>name</code>的radio为一组
* <code>value</code>是提交的实际值

=== 复选框 ===
<syntaxhighlight lang="html">
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
</syntaxhighlight>

=== 下拉选择 ===
<syntaxhighlight lang="html">
<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>
</syntaxhighlight>

=== 文本域 ===
<syntaxhighlight lang="html">
<textarea name="comment" rows="4" cols="50"></textarea>
</syntaxhighlight>

== 表单提交 ==
使用<code>submit</code>按钮提交表单：

<syntaxhighlight lang="html">
<input type="submit" value="提交">
<!-- 或 -->
<button type="submit">提交</button>
</syntaxhighlight>

== 表单验证 ==
HTML5引入了客户端验证功能：

<syntaxhighlight lang="html">
<input type="email" required>
<input type="number" min="1" max="100">
<input pattern="[A-Za-z]{3}">
</syntaxhighlight>

* <code>required</code>：必填字段
* <code>pattern</code>：正则验证

== 实际案例 ==
=== 登录表单示例 ===
<syntaxhighlight lang="html">
<form action="/login" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="pwd">密码:</label>
    <input type="password" id="pwd" name="pwd" required>
    
    <button type="submit">登录</button>
</form>
</syntaxhighlight>

=== 表单数据流示意图 ===
<mermaid>
sequenceDiagram
    用户->>浏览器: 填写表单
    浏览器->>服务器: 提交数据(POST/GET)
    服务器->>数据库: 存储/查询
    数据库-->>服务器: 返回结果
    服务器-->>浏览器: 返回响应
    浏览器->>用户: 显示结果
</mermaid>

== 高级特性 ==
=== 文件上传 ===
<syntaxhighlight lang="html">
<input type="file" name="avatar" accept="image/*">
</syntaxhighlight>

=== 字段分组 ===
使用<code>fieldset</code>和<code>legend</code>：

<syntaxhighlight lang="html">
<fieldset>
    <legend>个人信息</legend>
    <!-- 字段放在这里 -->
</fieldset>
</syntaxhighlight>

=== 隐藏字段 ===
<syntaxhighlight lang="html">
<input type="hidden" name="token" value="abc123">
</syntaxhighlight>

== 数学公式示例 ==
表单验证可能涉及数学计算，例如验证码验证：

<math>
验证码 = \frac{随机数}{哈希系数} \times 时间戳
</math>

== 总结 ==
HTML表单是网页交互的核心组件，掌握其基本结构和常用控件是web开发的必备技能。随着HTML5的发展，表单功能变得更加强大，包括内置验证、新输入类型等特性，大大提升了用户体验和开发效率。

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