# HTML form 参考

URL: https://caijiao.org/reference/html/form
Source: docs/reference/html/form.md
Description: HTML form Reference，整理 action、method、input、label、button、FormData、表单校验、可运行演示和常见错误。

`<form>` 用于组织用户输入，并把字段提交给服务端或交给 JavaScript 处理。现代前端项目中，表单经常配合 `FormData`、fetch 和浏览器内置校验使用。

## 语法

```html
<form action="/api/contact" method="post">
  <label>
    邮箱
    <input name="email" type="email" required>
  </label>
  <button type="submit">提交</button>
</form>
```

## 常用属性

| 属性 | 说明 |
| --- | --- |
| `action` | 表单提交地址 |
| `method` | 提交方法，常见为 `get` 或 `post` |
| `enctype` | 请求体编码，文件上传常用 `multipart/form-data` |
| `target` | 提交后打开位置 |
| `novalidate` | 禁用浏览器内置校验 |

## 可运行演示

[在线代码演示](/reference/html/demos/form-contact.html)

## 常见错误

- 按钮没有写 `type`，默认 `submit`，可能意外提交表单。
- 表单控件缺少 `name`，提交或创建 `FormData` 时拿不到字段。
- 文件上传时忘记使用 `FormData`，或者手动设置错误的 `Content-Type`。
- 只靠前端校验，服务端没有再次校验输入。

## 相关内容

- [HTML Reference](/reference/html/)
- [FormData 参考](/reference/web-api/formdata)
- [HTML 表单元素](/html/05-forms/01-form-elements)
- [Fetch 如何上传文件](/how-to/javascript/upload-file-fetch)
- [MDN form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form)