如何使用 HTML、CSS 和 JavaScript 建立簡單的聯絡表單

聯絡表單是網站的重要組成部分，使用者可以透過它聯絡您詢問、回饋或要求。

在本教學中，我們將引導您完成為您的網站建立基本 Web 表單所需的步驟。這包括建立項目、實施表單驗證以及自訂其外觀，以便在我們的說明結束時實現功能齊全且視覺上吸引人的聯絡表單。

設定項目

在開始編碼之前，請確保您的開發環境已設定完畢。開啟您喜歡的文字編輯器或推薦的整合開發環境(IDE) 之一，例如Visual Studio Code 或Sublime Text.

為了保持井井有條的感覺，建議您建立一個專用的專案資料夾，將所有 HTML 和 CSS 檔案存放在一個集中位置。這將使您能夠根據需要輕鬆找到和存取這些文件。

為了正確組織您的網頁內容，建議您為不同類型的資源建立一個包含不同資料夾的目錄結構。具體來說，在專案的根目錄中，建立兩個單獨的檔案-一個名為“index.html”，它將作為網頁的主入口點，另一個名為“style.css”，其中包含定義您網站的視覺外觀。此外，請確保這兩個檔案之間存在適當的連結機制，以便可以將必要的樣式套用至 HTML 內容。要實現此目的，請插入一個

建立 HTML 結構

任何聯絡表單的基本組成部分都在於其 HTML 架構。若要建立聯絡表單所需的 HTML 元件，請依照下列步驟操作。

 <main>
     <h1>Welcome to my Form</h1>
     <form id="form">
       <div class="input__container">
         <label for="name">Name</label>
           <!-- The 'required' prop ensures a filled field before submission -->
         <input type="text" id="name" name="name" required />
       </div>
       <div class="input__container">
         <label for="email">Email</label>
         <input type="email" id="email" name="email" required />
       </div>
       <div class="input__container">
         <label for="message">Message</label>
         <textarea id="message" name="message" rows="4" required></textarea>
       </div>
       <button>Submit</button>
     </form>
</main>

提供的 HTML 程式碼會產生表單元件，該元件在其結構中包含多個輸入元素，旨在接受使用者輸入的聯絡表單資料。

目前，我們的聯絡表單外觀如下:

設定聯絡表單的樣式

使用誘人且直覺的聯絡表單可以顯著改善整體使用者體驗。提供的 CSS 程式碼採用了 Flexbox 以及 CSS 方塊模型屬性（例如填滿和邊距），以便為聯絡表單建立吸引人的視覺呈現。

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-size: 62.5%;
}

body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

main {
 width: 40rem;
 box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}

h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}

form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}

.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}

.input__container label { font-size: 1.6rem; }

.input__container input,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1px solid #555;
 resize: none;
}

button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
} 

您的聯絡表格現在如下所示:

實作表單驗證

確保用戶提供的數據準確且全面至關重要。實現此目的的可靠方法包括在客戶端使用 JavaScript 來驗證表單。若要啟動此流程，請在 HTML 文件的末尾新增一個腳本標記，將其導向至所需的表單元素。

 <script>
 "use strict";
    const form = document.getElementById("form");
</script> 

若要新增事件偵聽器來處理表單提交，您可以使用JavaScript 或jQuery，如下所示:javascript//使用普通JavaScriptdocument.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {//在此處處理表單提交});//使用jQuery$(’#myForm’).on(‘submit’, function(e) {e.preventDefault();//阻止預設的表單提交行為//在此處理表單提交});

 form.addEventListener("submit", function (event) { }); 

為了避免提交表單時發生自動頁面重新整理並選擇保留「電子郵件」欄位中目前選定的值，請按照下列步驟操作:

 form.addEventListener("submit", function (event) {
    // Prevent page reload on submit
    event.preventDefault();
     // Selecting the email value filled by the user
    const email = document.getElementById("email").value;
}); 

最終，利用正規表示式模式來驗證輸入的電子郵件地址並根據其真實性顯示適當的回應。

 form.addEventListener("submit", function (event) {
    // Preventing page reload on submit
    event.preventDefault();

     // Selecting the email value filled by the user
    const email = document.getElementById("email").value;

    // Checking for valid email using a simple regex pattern
    const emailPattern = /^[^\s@]\+@[^\s@]\+\.[^\s@]\+$/;

    if (!emailPattern.test(email)) {
      alert("Wrong email format");
      return;
    }

    // If everything passes, show success message
    alert("Form submitted successfully");
}); 

此舉旨在避免典型錯誤並保證用戶僅提供可接受的信息，從而確保提交過程的準確性。

最終聯絡表的測試和故障排除

為了使一個項目被認為完全實現，它必須經過嚴格的測試以確認其功能。為此，您應該在表單欄位中輸入適當的數據，啟動提交，並評估是否達到預期結果。

您的瀏覽器不支援影片標籤。

自訂您的聯絡表

恭喜您成功為您的網站建立基本聯絡表單！您在設定專案、建立 HTML 結構、設計 CSS 樣式、實作 JavaScript 表單驗證和進行嚴格測試方面的熟練程度值得稱讚。

精心設計的聯絡表單可以促進網站訪客和網站所有者之間的溝通，從而顯著改善使用者體驗。強烈建議您根據您的獨特需求個性化並擴展其功能。