HTML表单基础[编辑 | 编辑源代码]

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

基本结构[编辑 | 编辑源代码]

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

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

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

GET vs POST[编辑 | 编辑源代码]

方法	描述	适用场景
GET	数据附加在URL后（可见）	搜索、非敏感数据
POST	数据在HTTP请求体中（不可见）	登录、敏感数据

常见表单控件[编辑 | 编辑源代码]

文本输入[编辑 | 编辑源代码]

<input type="text" name="username" placeholder="请输入用户名">

type="text"：单行文本输入
placeholder：提示文本

密码输入[编辑 | 编辑源代码]

<input type="password" name="pwd">

单选按钮[编辑 | 编辑源代码]

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

相同name的radio为一组
value是提交的实际值

复选框[编辑 | 编辑源代码]

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动

下拉选择[编辑 | 编辑源代码]

<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
</select>

文本域[编辑 | 编辑源代码]

<textarea name="comment" rows="4" cols="50"></textarea>

表单提交[编辑 | 编辑源代码]

使用submit按钮提交表单：

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

表单验证[编辑 | 编辑源代码]

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

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

required：必填字段
pattern：正则验证

实际案例[编辑 | 编辑源代码]

登录表单示例[编辑 | 编辑源代码]

<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>

表单数据流示意图[编辑 | 编辑源代码]

高级特性[编辑 | 编辑源代码]

文件上传[编辑 | 编辑源代码]

<input type="file" name="avatar" accept="image/*">

字段分组[编辑 | 编辑源代码]

使用fieldset和legend：

<fieldset>
    <legend>个人信息</legend>
    <!-- 字段放在这里 -->
</fieldset>

隐藏字段[编辑 | 编辑源代码]

<input type="hidden" name="token" value="abc123">

数学公式示例[编辑 | 编辑源代码]

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

解析失败 (语法错误): {\displaystyle 验证码 = \frac{随机数}{哈希系数} \times 时间戳 }

总结[编辑 | 编辑源代码]

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