likes
comments
collection
share

HTML 原生表单的简单应用

作者站长头像
站长
· 阅读数 31

写在前面

最近笔者用到 Ant Design 的 Form 组件来进行表单开发，在使用过程中对于控件中设置 htmlType 属性为 "reset"、"submit" 等值有一些疑问，通过理解原生 HTML 表单的运作方式，解答了我的疑问，可见基础知识非常重要。本文只对原生表单做简单介绍，然后对其做一个“创建注册表单”的简单应用。

如果想要了解更多关于表单的信息，可以查看 MDN，相关链接放到参考资料中。

理解 HTML 表单

HTML 表单由一系列交互元素组成，包括文本输入框、密码输入框、单选按钮、复选框、下拉菜单等。通过这些元素，用户可以输入和选择各种类型的数据，并将其提交到服务器进行处理。

原生表单控件

在 HTML 中，表单元素可以使用各种原生控件，包括但不限于 input 和 button。让我们来了解一下它们的基本用法和属性。

input

input 元素是表单中最常用的控件之一，它可以用于接受用户输入各种类型的数据。以下是一些常见的 input 类型及其用途：

  • text：（默认值）用于接受单行文本输入。
  • password：用于接受密码输入，输入的内容会被隐藏。
  • email：用于接受电子邮件地址输入，并进行简单的格式验证。
  • checkbox：用于接受布尔值（true/false）输入，通常用于多选框。
  • radio：用于在一组选项中选择一个，通常用于单选按钮。

想了解 input 元素的更多类型和属性，请查阅 MDN 文档。

button

button 元素用于在表单中创建按钮，让用户执行特定的操作。根据其 type 属性的不同取值，button 元素具有不同的行为：

  • submit：（默认值）将表单数据提交给服务器，触发表单的提交动作。
  • reset：重置表单中的所有控件为初始值。
  • button：没有默认行为，但可以通过 js 来定义点击按钮时的操作。

以下是一个示例，展示了如何使用 button 元素以及其不同的 type 属性：

<button>提交</button>
<button type="reset">重置</button>
<button type="button">点击我</button>

想了解 button 元素的更多类型和属性，请查阅 MDN 文档。

特别注意：

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>

效果如下：

HTML 原生表单的简单应用

主要看一下这几个操作按钮：

  1. <button>注册</button>：这是一个提交按钮，用户点击后将会提交表单数据给服务器。
  2. <button type="reset">重置</button>：这是一个重置按钮，用户点击后将会重置表单中的所有输入框为初始值。
  3. <button type="button">一个普通按钮</button>：这是一个普通的按钮，没有与表单相关的行为，只是一个点击后触发自定义操作的按钮。

参考资料

转载自:https://juejin.cn/post/7366516491607605274
评论
请登录