HTML 表单元素与属性详解
input 元素的基本用法
<input> 是 HTML 表单中最核心的交互控件，其行为和外观由 type 属性决定。常见的类型包括文本输入、单选按钮和提交按钮等。
常用 input 类型
| 类型 | 说明 |
|---|---|
| text | 创建单行文本输入框 |
| radio | 提供互斥选项，用户只能选择其中一项 |
| submit | 生成用于提交表单数据的按钮 |
输入字段约束属性
通过添加特定属性，可以对用户输入进行校验和控制：
| 属性 | 作用 |
|---|---|
| disabled | 禁用该输入项，不可编辑或提交 |
| max | 设定数值输入的最大允许值 |
| maxlength | 限制可输入字符总数 |
| min | 设定数值输入的最小值 |
| pattern | 使用正则表达式验证输入内容格式 |
| readonly | 设置为只读状态，内容不可修改但可提交 |
| required | 标记为必填项，留空时阻止表单提交 |
| size | 定义输入框的显示宽度（以字符数为单位） |
| step | 指定数字输入的增减步长 |
| value | 设定默认填充值 |
文本输入示例
使用 type="text" 创建姓名输入区域：
<form>
姓氏:<br>
<input type="text" name="lastName">
<br>
名字:<br>
<input type="text" name="firstName">
</form>
单选按钮实现
通过相同 name 值将多个 radio 按钮关联为一组：
<form>
<input type="radio" name="gender" value="male" checked> 男
<br>
<input type="radio" name="gender" value="female"> 女
</form>
提交按钮配置
点击提交按钮后，表单数据会被发送至服务器脚本处理：
<form action="/process.php">
名称:<br>
<input type="text" name="username" value="张三">
<br>
邮箱:<br>
<input type="text" name="email" value="zhang@example.com">
<br><br>
<input type="submit" value="确认提交">
</form>
action 属性解析
该属性指定接收并处理表单数据的目标 URL。若未声明，则默认提交到当前页面地址。
method 属性说明
定义数据传输所采用的 HTTP 方法：
<form method="GET">
<form method="POST">
GET 方法适用场景
- 适用于非敏感信息查询（如搜索）
- 提交参数会在浏览器地址栏中明文显示
- 例如：
/search?q=html&lang=zh - 注意：受 URL 长度限制，不适合大量数据
POST 方法适用场景
- 推荐用于修改服务器数据的操作
- 适合传输密码等敏感信息
- 数据不会暴露在地址栏中，安全性更高
name 属性的重要性
只有设置了 name 属性的字段才能被成功提交。以下例子中仅"名字"字段会上传：
<form action="/save">
年龄:<br>
<input type="text" value="25">
<br>
名字:<br>
<input type="text" name="userName" value="李四">
<br><br>
<input type="submit" value="发送">
</form>
使用 fieldset 分组表单内容
<fieldset> 可将相关控件归类显示，并配合 <legend> 添加标题说明：
<form action="/update">
<fieldset>
<legend>个人信息</legend>
姓:<br>
<input type="text" name="surname" value="王">
<br>
名:<br>
<input type="text" name="givenName" value="五">
<br><br>
<input type="submit" value="保存资料">
</fieldset>
</form>
form 标签完整属性列表
一个包含所有可选属性的表单结构如下：
<form
action="/api/data"
method="post"
target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="on"
novalidate
name="userForm">
<!-- 表单控件放在这里 -->
</form>
form 支持的主要属性
| 属性 | 功能描述 |
|---|---|
| accept-charset | 指定提交数据使用的字符编码，默认跟随页面编码 |
| action | 设置处理程序的路径（URL） |
| autocomplete | 控制是否启用自动填充功能（on/off） |
| enctype | 定义数据编码方式，尤其影响文件上传 |
| method | 选择 GET 或 POST 提交方式 |
| name | 为表单命名，便于 JavaScript 访问（如 document.forms.userForm） |
| novalidate | 关闭浏览器内置验证机制 |
| target | 指定响应加载的位置，如 _blank 在新窗口打开 |
