一个 <form> 收集用户输入并提交到服务器。关键属性是 action(发送到哪里)和 method(如何发送)。
html
Email
Password
Sign up
当用户点击提交按钮(或按下 Enter)时,浏览器收集所有具有 name 的控件,对其进行编码,并向 action 发送请求。
<form method="get" action="/search"> <!-- data in the URL: /search?q=html -->
<form method="post" action="/login"> <!-- data in the request body -->
name 属性至关重要<input value="hi" /> <!-- ❌ no name → NOT submitted -->
<input name="message" value="hi" /> <!-- ✅ submitted as message=hi -->
只有命名的控件才会被发送。服务器通过它们的 name 来读取它们。
form.addEventListener("submit", (e) => {
e.preventDefault(); // stop the full-page reload to handle it with fetch/AJAX
const data = new FormData(form); // easy way to read all fields
});
表单是用户向服务器发送数据的核心方式。
理解 action/method、name 的作用、GET-vs-POST 语义和用于 JS 处理的 preventDefault 是任何带有输入的 Web 应用的基础。