HTML表单知识点汇总
小白友好版 – 通俗易懂的表单知识大全
1. 表单是什么？
表单就像网站上的信息收集表，是用户与网站互动的主要方式。
常见用途：登录、注册、搜索框、联系方式、订单信息等。
基本结构：
<form action="/submit" method="POST">
<!-- 这里放各种表单控件 -->
</form>
核心属性：
action：表单提交的目标地址（服务器端处理程序）method：数据提交方式，主要是GET和POSTautocomplete：是否启用浏览器自动填充功能
2. 输入控件
输入控件是表单中让用户输入信息的各种”小工具”。
常用输入类型：
<input type="text">：单行文本框（用户名、姓名）<input type="password">：密码框（输入内容会变成小圆点）<input type="email">：邮箱输入框（自带格式验证）<input type="number">：数字输入框（只能输入数字）<input type="date">：日期选择器<input type="checkbox">：复选框（多选）<input type="radio">：单选按钮（一组中只能选一个）<input type="file">：文件上传<input type="submit">：提交按钮<input type="reset">：重置按钮
重要提示： 每个输入控件都应该有 name 属性，服务器通过这个属性名来获取数据。
3. 其他表单元素
下拉选择框：
<select> 创建下拉菜单，<option> 定义选项：
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
多行文本框：
<textarea> 用于多行文本输入（如留言、评论）：
<textarea name="message" rows="4" cols="50"></textarea>
标签元素：
<label> 为输入控件提供文字说明：
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
使用 for 属性与输入控件的 id 关联，点击标签文字就能聚焦到输入框。
4. 表单分组
字段集和标题：
<fieldset> 将相关控件分组，<legend> 为分组添加标题：
<fieldset>
<legend>支付信息</legend>
<!-- 银行卡信息控件 -->
</fieldset>
分组的作用：
- 提高表单可读性
- 增强表单可访问性
- 方便CSS样式设置
5. 表单验证
验证确保用户输入的数据格式正确，HTML5提供了多种验证方式。
常用验证属性：
required：必填字段（不能为空）minlength/maxlength：输入内容的最小/最大长度min/max：数值的最小/最大值pattern：使用正则表达式自定义验证规则title：验证失败时显示的提示信息
<input type="text" required minlength="3" maxlength="20">
<input type="number" min="18" max="100" title="年龄必须在18-100之间">
注意： 前端验证不能替代后端验证，因为用户可能禁用JavaScript。
6. 表单提交
提交方式：
GET：表单数据附加在URL后面（地址栏可见）POST：表单数据包含在请求体中（不可见）
何时使用哪种方式？
- GET：获取数据（如搜索），数据量小，非敏感信息
- POST：提交数据（如注册、登录），数据量大，敏感信息
提交按钮：
点击提交按钮后，表单数据会发送到 action 指定的地址：
<input type="submit" value="提交">
<button type="submit">提交</button>