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

htmlweb developmentfront end technology更新于 2024/3/19 16:12:17

概述

按钮是 HTML 中的组件，点击后会执行特定操作。不同的按钮会执行不同的操作。HTML 中有一些预定义的按钮，每个按钮都具有特定的操作类型。在 HTML 表单中，当默认使用 <button> 标签时，表单标签内的按钮类型为 Submit。因此，当您点击表单标签内的按钮时，它会根据 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>

步骤 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>

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

结论

我们还可以通过为按钮添加样式来使按钮更具吸引力。动画样式属性也使用户界面 (UI) 更具吸引力。按钮标签具有一些属性，使其能够以各种不同的类型工作。这些属性包括 value、disabled 和 type，它们定义了按钮的名称。disabled 属性使按钮处于禁用状态，这意味着按钮无法正常工作。它们的类型分别是 submit 和 reset。我们可以通过两种方式自定义按钮:一种是样式，另一种是功能。我们可以创建不同的按钮，并在点击时赋予它们不同的功能。