如何在 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" 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 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.