HTML Academy · 课时

form 元素：action、method 与 enctype

Q: 「form 元素：action、method 与 enctype」这节课中我会学到什么？

使用 action、method 和 enctype 设置表单元素。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 action、method 和 enctype 设置表单元素。

form 元素：action、method 与 enctype 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是表单？

HTML 表单是用户向服务器提交数据的主要方式：

登录和注册
搜索查询
结账和支付
联系和反馈

每个表单都始于 <form> 元素。

form 元素

<form> 元素包含所有表单控件：

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

action 属性

action 属性指定表单数据发送到哪里：

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

method 属性

method 属性控制数据的发送方式：

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET 与 POST 的对比

GET 和 POST 具有不同的特性：

GET — 数据位于 URL 中（长度有限）、可添加书签、会被缓存、具有幂等性
POST — 数据位于请求正文中（无大小限制）、不可添加书签、不会被缓存、不具有幂等性

经验法则：如果提交不会改变服务器状态，请使用 GET；如果会改变，请使用 POST。

enctype 属性

enctype 属性控制 POST 请求中表单数据的编码方式：

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

novalidate 属性

novalidate 属性会禁用浏览器内置的验证：

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

表单上的 target 属性

target 属性控制显示响应的位置：

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

表单上的 autocomplete

autocomplete 属性控制浏览器自动填充：

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

使用 JavaScript 提交表单

阻止默认提交，并使用 JavaScript 处理：

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

同时使用 action 和 method

使用正确 action 和 method 的完整表单示例：

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

快速检查

上传文件时应该使用哪种表单方法？

回顾：form 元素

表单元素要点：

action — 接收表单数据的 URL
method="get" — 数据位于 URL 中（搜索、筛选）
method="post" — 数据位于请求正文中（敏感数据、状态变更）
enctype="multipart/form-data" — 上传文件时必需
novalidate — 禁用浏览器验证

常见问题解答

「form 元素：action、method 与 enctype」课时是免费的吗？

是的 — 「form 元素：action、method 与 enctype」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「form 元素：action、method 与 enctype」这节课中我会学到什么？

使用 action、method 和 enctype 设置表单元素。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「form 元素：action、method 与 enctype」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy