写在前面
最近笔者用到 Ant Design 的 Form 组件来进行表单开发，在使用过程中对于控件中设置 htmlType 属性为 "reset"、"submit" 等值有一些疑问，通过理解原生 HTML 表单的运作方式，解答了我的疑问，可见基础知识非常重要。本文只对原生表单做简单介绍，然后对其做一个“创建注册表单”的简单应用。
如果想要了解更多关于表单的信息，可以查看 MDN，相关链接放到参考资料中。
理解 HTML 表单
HTML 表单由一系列交互元素组成，包括文本输入框、密码输入框、单选按钮、复选框、下拉菜单等。通过这些元素，用户可以输入和选择各种类型的数据，并将其提交到服务器进行处理。
原生表单控件
在 HTML 中，表单元素可以使用各种原生控件，包括但不限于 input 和 button。让我们来了解一下它们的基本用法和属性。
input
input 元素是表单中最常用的控件之一，它可以用于接受用户输入各种类型的数据。以下是一些常见的 input 类型及其用途：
- text：（默认值）用于接受单行文本输入。
- password：用于接受密码输入，输入的内容会被隐藏。
- email：用于接受电子邮件地址输入，并进行简单的格式验证。
- checkbox：用于接受布尔值（true/false）输入，通常用于多选框。
- radio：用于在一组选项中选择一个，通常用于单选按钮。
想了解 input 元素的更多类型和属性，请查阅 。
button
button 元素用于在表单中创建按钮，让用户执行特定的操作。根据其 type 属性的不同取值，button 元素具有不同的行为：
- submit：（默认值）将表单数据提交给服务器，触发表单的提交动作。
- reset：重置表单中的所有控件为初始值。
- button：没有默认行为，但可以通过 js 来定义点击按钮时的操作。
以下是一个示例，展示了如何使用 button 元素以及其不同的 type 属性：
<button>提交</button>
<button type="reset">重置</button>
<button type="button">点击我</button>
想了解 button 元素的更多类型和属性，请查阅 。
特别注意：
form 中的 button 元素 type 属性的默认值是 "submit"，也就是会触发表单的提交动作，如果需要将其设置为普通按钮，将 type 指定为 "button" 即可。
创建注册表单
创建一个简单的用户注册表单，包括姓名、邮箱和密码字段。以下是表单的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<h1>欢迎加入我们！</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" value="默认姓名" required>
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<br>
<button>注册</button>
<button type="reset">重置</button>
<button type="button">一个普通按钮</button>
</form>
</body>
</html>
效果如下：
主要看一下这几个操作按钮：
<button>注册</button>：这是一个提交按钮，用户点击后将会提交表单数据给服务器。<button type="reset">重置</button>：这是一个重置按钮，用户点击后将会重置表单中的所有输入框为初始值。<button type="button">一个普通按钮</button>：这是一个普通的按钮，没有与表单相关的行为，只是一个点击后触发自定义操作的按钮。