在 JavaScript 中提交表單

使用 JavaScript 提交 HTML 表單時，通常會處理表單的 submit 事件、檢查使用者輸入的值，並讓瀏覽器將有效資料傳送至表單的 action。以下範例會建立表單、讀取欄位，並使用用戶端驗證阻止未填完整的表單送出。伺服器在使用提交的資料前，仍須自行驗證。

建立 HTML 表單

為每個控制項設定 name，它會成為提交表單資料中的鍵。使用標籤為每個欄位提供可存取的名稱。action 指定接收表單資料的 URL，method 則決定瀏覽器傳送資料的方式。POST 請求會將表單資料放在請求本文中；資料如何處理或儲存由伺服器決定。

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

這段標記是靜態的網頁範例。表單有效且使用者按下送出按鈕時，瀏覽器會將具名控制項提交至 /signup。按鈕上顯示的「Sign up」標籤維持英文。

存取表單

使用 document.getElementById() 或 document.querySelector()，透過表單的 ID 選取表單。以下瀏覽器程式碼假設上方的標記已在頁面中；後續的 submit 處理常式也會使用同一個 form 參照。

const form = document.getElementById("signup-form");

結果是表單元素。如果指令碼在表單解析完成前執行，請將它放在表單之後，或等到文件準備就緒再執行。

使用 JavaScript 取得表單欄位的值

表單的 elements 集合可讓你依據控制項的 name 取得控制項。每個控制項目前輸入的文字都可透過單數形式的 .value 屬性讀取。以上方的表單為例，可用以下程式碼讀取姓名和電子郵件：

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

HTML 中的 name 屬性必須與 form.elements 使用的鍵相符。修剪文字可移除前後空白，再檢查欄位值。

使用 JavaScript 驗證表單欄位資料

以下輔助函式會檢查兩個欄位字串是否都包含文字，並回傳布林值，供頁面處理常式搭配從表單讀取的欄位值使用。範例物件提供姓名和電子郵件地址，程式會印出這些值的檢查結果：

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

瀏覽器會先檢查 required 和 type="email"，再派送表單的 submit 事件。若姓名欄位空白或電子郵件格式錯誤，瀏覽器會在此階段拒絕提交：監聽器不會執行，也不會呼叫 preventDefault()，而是由瀏覽器顯示自己的驗證訊息。只有空白字元的姓名會通過 required，因此下方的監聽器會收到它；修剪後的字串會變成空字串，自訂檢查會呼叫 preventDefault() 阻止提交，並由頁面顯示自己的訊息。

在頁面處理常式中，可為選取的表單新增監聽器，並以目前的欄位值執行相同檢查：

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

檢查通過時，處理常式會保留瀏覽器原本的表單提交流程；檢查未通過時，event.preventDefault() 會阻止瀏覽器送出這次表單提交，而訊息會說明需要修正的內容。這是為了向使用者提供回饋的用戶端驗證，不是安全防線：即使沒有載入此頁面或其 JavaScript，請求仍可直接送出，因此端點仍須執行伺服器端驗證。

如果其他程式碼需要觸發提交，請優先使用 form.requestSubmit()：它會遵循正常的驗證和 submit 事件流程。呼叫 form.submit() 則會直接提交，不會執行限制條件驗證，也不會派送 submit 事件，因此這類監聽器不會執行。