登录CSS-HTML Form 表单交互深度指南
前言
虽然现代前端框架（Vue/React）已经极大简化了表单处理，但理解原生 Form 表单 的事件流、控件属性和 API，依然是处理复杂业务逻辑（如埋点、自定义验证、无刷新提交）的基础。
一、 Form 表单的核心机制
<form> 是所有输入控件的容器。它不仅负责数据的收集，还管理着数据的提交 (Submit) 与 重置 (Reset) 周期。
1. 关键属性
-
action：数据提交的目标 URL。 -
method：HTTP 请求方式（GET拼接到 URL，POST放入请求体）。
2. 提交与拦截
当表单内存在 type="submit" 的按钮时，点击会触发 submit 事件。
const form = document.querySelector("#myForm");
form.addEventListener("submit", (event) => {
// 1. 阻止浏览器默认的跳转刷新行为
event.preventDefault();
// 2. 自定义验证逻辑
if (inputValue === "") {
alert("内容不能为空");
return;
}
// 3. 执行异步提交（如使用 Fetch/Axios）
console.log("表单已提交");
});
3. 重置行为
form.reset() 不仅仅是清空。它会将所有字段恢复为页面加载时的初始值（例如 <input value="default"> 会恢复为 "default" 而非空）。
二、 输入控件的“通用武器库”
无论 input、select 还是 textarea，它们都共享以下核心属性和方法：
1. 公共属性与方法
-
disabled：禁用控件，数据不会被提交。 -
readOnly：只读，数据会随表单提交。 -
form：只读属性，返回当前控件所属的表单对象引用。 -
focus()/blur()：手动控制焦点的获取与失去。
2. 三大核心事件
| 事件 | 触发时机 |
|---|---|
focus |
控件获得焦点时。 |
blur |
控件失去焦点时（常用于输入后的实时验证）。 |
change |
内容改变且失去焦点时触发（注意：与 input 事件实时触发不同）。 |
三、 文本输入：Input vs Textarea
1. 单行文本框 <input type="text">
-
placeholder：提示文本。 -
maxlength：硬性限制用户输入的字符长度。
2. 多行文本框 <textarea>
-
rows/cols：控制显示的行数和宽度。 -
wrap换行控制：-
soft（默认）：提交时不带换行符。 -
hard：提交的数据中包含换行符（必须配合cols使用）。
-
四、 选择框：Select 与 Option
<select> 元素在 JavaScript 中拥有更丰富的集合操作。
1. Select 关键操作
-
multiple：是否允许多选（按住 Ctrl/Command 键）。 -
options：返回包含所有<option>元素的 HTMLCollection。 -
remove(index)：移除指定索引的选项。
2. Option 选项详情
每一个 Option 对象都有：
-
index：在下拉列表中的位置。 -
selected：布尔值，通过设置为true可实现代码控制选中。 -
text：用户看到的文字。 -
value：提交给后端的值。
五、 面试模拟题
Q1：submit 事件和按钮的 click 事件有什么区别？
参考回答：
submit 事件是绑定在 form 元素上的。如果用户在输入框中按“回车键”，或者点击了 type="submit" 的按钮，都会触发 form 的 submit 事件。相比点击事件，监听 submit 能更全面地捕获提交动作。
Q2：如何通过原生 JS 获取表单内的所有数据？
参考回答：
现代浏览器推荐使用 FormData 对象：
const formData = new FormData(formElement);
// 获取特定字段
const username = formData.get('username');
// 转化为对象
const data = Object.fromEntries(formData.entries());
Q3：disabled 和 readOnly 在表单提交时有什么区别？
参考回答：
- 设置了
disabled的控件，其值在表单提交时会被忽略，且用户无法交互。 - 设置了
readOnly的控件，用户无法修改值，但其值在提交时会被包含在表单数据中。
