如何在 HTML 中创建带有自定义按钮的表单

概述

按钮是 HTML 中的组件，单击时会执行特定操作。各种按钮执行各种操作。HTML 有一些预定义的按钮，具有一定的操作类型。在 HTML 表单中，当使用 <button> 标签时，表单标签内的简单按钮默认为提交类型。因此，当您单击表单标签内的按钮时，它将把表单提交到您所需的路径，并取决于 GET 和 POST 请求。提交位置在表单的 action 属性中定义。HTML 表单默认方法类型为 GET。

如果表单包含方法类型 GET，则单击按钮时，输入标签内写入的数据将与页面的 URL 连接。但这并不是一种安全的方式，因为在这种情况下可能会泄露用户凭据。因此，出于安全目的，在提交用户凭据时，建议使用 POST 方法类型。

语法

创建表单的语法如下：

<form action="">
</form>

创建按钮的语法如下：

<button> </button>

算法

步骤 1 − 在代码编辑器中创建 HTML 基本框架。

步骤 2 − 由于我们在按钮中使用了 Font Awesome 重置图标，因此必须将 Font Awesome CDN 链接链接到代码的 head 标签。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bS uGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

步骤 3 − 使用

标签创建 HTML 表单。现在根据您的需求继承一些输入字段。

<input type="text" name="" id="" placeholder="">

步骤 4 − 使用 button 标签在表单内创建按钮。表单内的按钮具有允许将表单提交到特定地址的属性。

<button> Submit </button>

步骤 5 − 成功创建了带有自定义按钮的表单。

示例

<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bS uGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>Custom Button in form</title>
</head>
<body>
   <h3 style="text-align: center;">Form with Custom Buttons</h3>
   <form action="" method="" style="display: flex; flex-direction: column;width: 15rem;margin: 2rem auto;">
      <input type="text" name="username" id="uname" placeholder="Username">
      <input type="text" name="Adress" id="adress" placeholder="Address">
      <input type="tel" name="phone" id="phone" placeholder="Phone">
      <input type="email" name="email" id="email" placeholder="Email">
      <div class="btns" style="display: flex; margin-top: 0.5rem;gap: 0.8rem;">
         <button style="width: 5rem;border: none; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.459);color: white; background-color: green; border-radius: 5px;padding: 0.5rem;cursor: pointer;">Submit</button>
         <button id="clearAll" type="reset" style="width: 5rem;border: none;color: white; border-radius: 5px;padding: 0.5rem;cursor: pointer; background: rgb(0, 0, 0);" onclick="clearALL()">
            <i class="fas fa-undo"></i>
         </button>
      </div>
   </form>
</body>
</html>

下图显示了一个表单，其中包含四个不同的输入字段，例如用户名、地址、电话和电子邮件。我们还创建了两个按钮，其中第一个按钮显示带有值“button”的文本，另一个按钮显示重置图标。

结论

我们还可以通过使用按钮的样式使按钮更具吸引力。动画样式属性也使用户界面 (UI) 更具吸引力。由于 button 标签具有一些属性，使其能够以各种不同的类型工作。这些属性分别是 value、disabled 和 type，它们分别定义按钮上的名称、disabled 属性使按钮禁用，这将不允许按钮发挥作用，它们的类型分别是 submit 和 reset。我们可以通过两种方式自定义按钮，一种是样式方面，另一种是功能方面。我们可以创建具有不同功能的不同按钮，以便在单击时执行。

更新于： 2023年4月11日

399 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告