HTML 中的表單和按鈕

HTML 表單和按鈕是與網站使用者互動的強大工具。最常見的情況是，它們為使用者提供控制元件來操作使用者介面 (UI) 或在需要時輸入資料。

在本文中，我們將介紹表單和按鈕的基礎知識。需要了解的內容還有很多——很多輸入型別和表單功能都沒有提及——但本文將為您在大多數情況下提供堅實的基礎。您可以根據需要在職業生涯中不斷學習，瞭解高階或專業用途。

預備知識	基本的 HTML 熟悉程度，如基本 HTML 語法中所述。文字級語義，例如標題和段落以及列表。結構化 HTML。
學習成果	瞭解表單和按鈕是使用者與網站互動的主要工具，以及連結。不同的按鈕型別。常見的 `<input>` 型別。常見的屬性，例如 `name` 和 `value`。 `<form>` 元素和表單提交的基礎知識。使用標籤和正確語義使表單易於訪問。其他控制型別：`<textarea>`、`<select>` 和 `<option>`。客戶端驗證基礎知識。

與使用者互動

到目前為止，在本課程中，您已經看到使用者與 Web 互動的幾種方式

連結可用於導航到內容的不同部分，無論是在同一頁面還是不同頁面。
<video> 和 <audio> 元素通常具有播放/暫停、快進、快退等控制元件，允許使用者根據自己的意願消費媒體內容。

然而，這些功能往往促進單向互動，使用者被動地消費內容。這很好，但網路是一種雙向體驗。網站使用者設定他們希望體驗內容和服務的方式。他們訂出租車並請求回電。他們提供反饋並提出投訴。他們購買產品並將其送到家中。

要提供這種雙向體驗，您需要使用按鈕和表單。

按鈕通常使用 HTML <button> 元素建立（它們有時也使用 <input> 元素建立，其 type 屬性設定為 button 或 submit 之類的值）。這些按鈕是通用用途的——您可以將它們連線起來以觸發您想要的任何功能，僅受您的想象力和編碼技能的限制。

表單使用 <form>、<label>、<input> 和 <select> 等元素建立。表單元素可以建立比簡單按鈕更復雜的控制元件——例如，一個包含多個選項的下拉選單，允許您選擇使用者介面的不同主題。

然而，至關重要的是，當用戶需要向網站伺服器提交資訊時，它們也可以用於建立表單供使用者填寫。想想電子商務網站——當您想搜尋要購買的產品時，您可以使用表單輸入搜尋詞。當您想支付一些商品並完成配送時，您可以使用表單輸入您的郵寄地址，並使用另一個表單輸入您的信用卡詳細資訊。

在本文中，我們將主要關注這種更傳統的表單元素使用方式。請注意，按鈕也常用於表單內部，以將輸入的資料提交到伺服器。

有了這些重要的理論知識，讓我們繼續探索程式碼，看看按鈕和表單是如何實現的。

按鈕

如上所述，按鈕在 Web 上有幾個主要用途。首先，它們用於觸發功能，這在建立 UI 控制元件時很有用。最簡單的按鈕使用以下程式碼實現

html

<button>Press me</button>

它呈現如下

<button></button> 標籤之間出現的文字呈現在按鈕內部，並且瀏覽器會給它一些基本樣式，因此它預設會看起來和行為都像一個按鈕。到目前為止，一切順利。然而，這裡有一個問題——我們孤獨的按鈕本身不會做任何有用的事情。要使它做一些有用的事情，您需要將它放在一個表單中（我們稍後會介紹），或者新增一些 JavaScript。

例如，如果您將以下 JavaScript 應用於上述按鈕

<button>Press me</button>

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  btn.textContent = "YOU CLICKED ME!! ❤️";
  setTimeout(() => {
    btn.textContent = "Press me";
  }, 1000);
});

它會給你以下輸出——嘗試點選它

您現在不需要理解 JavaScript 的工作原理。您將在本課程的後面部分學習更多關於它的知識。

在下一節中，您將看到按鈕的第二個主要用途的演示——提交表單。

表單的結構

一個基本表單包含三件事

一個 <form> 元素，它封裝了所有其他表單內容。<form></form> 標籤內的任何表單控制元件都屬於同一表單，並且它們的資料在表單提交時會被包含在內。
一個或多個由 <label> 元素和表單控制元件元素（通常是 <input> 元素，但也有其他型別，例如 <select>）組成的對
- 表單控制元件元素允許使用者選擇或輸入一些資料，這些資料將在表單提交時傳送到伺服器。
- <label> 元素提供了一個與表單控制元件相關聯的標識標籤，描述了應該輸入到其中的資料。
一個 <button> 元素，用於提交表單。

讓我們看一個包含上述三項的基本示例。這個表單可以用來詢問使用者的姓名和電子郵件，以讓他們註冊時事通訊（別擔心——它沒有連線到任何伺服器，所以目前不會做任何事情）。

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>First form</title>
  </head>
  <body>
    <form action="./submit_page" method="get">
      <h2>Subscribe to our newsletter</h2>
      <p>
        <label for="name">Name (required):</label>
        <input type="text" name="name" id="name" required />
      </p>
      <p>
        <label for="email">Email (required):</label>
        <input type="email" name="email" id="email" required />
      </p>
      <p>
        <button>Sign me up!</button>
      </p>
    </form>
  </body>
</html>

它呈現如下

如果您立即點選“註冊我！”，您會看到一個驗證錯誤，因為沒有輸入資料。如果您填寫了姓名和電子郵件地址，然後點選“註冊我！”，您會看到一個 404 錯誤訊息。

我們稍後會解釋原因。在繼續之前，使用您的程式碼編輯器將前面的 HTML 程式碼列表複製到一個新的 HTML 檔案中，並在新的瀏覽器選項卡中開啟它。

`<form>` 元素

正如我們之前所說，<form> 元素充當表單的外部包裝器，將其中所有表單控制元件組合在一起。當 <button> 被按下時，所有由表單控制元件表示的資料都將提交到伺服器。<form> 元素可以接受許多屬性，但我們示例中包含的兩個最重要的屬性如下

action: 包含要將提交的表單資料傳送到並進行處理的頁面的路徑。稍後，在您提交表單後，您會在 URL 中看到 /submit_page。您還會收到 404 錯誤響應，因為該頁面實際上不存在，但目前這沒關係。
method: 指定要用於將表單資料傳送到伺服器的資料傳輸方法。現在不要太擔心這個；get 值會導致資料作為引數附加到 URL 的末尾傳送。

檢查提交的資料

轉到單獨選項卡中的示例，嘗試輸入“Bob”作為姓名和“bob@bob.com”作為電子郵件地址。
按下 <button>。

action 和 method 屬性導致表單資料按照以下方式在 URL 中提交

/some/url/submit_page?name=Bob&email=bob%40bob.com

構建表單

您可以在 <form> 元素中包含任何您喜歡的 HTML 元素，以構建表單元素本身，並提供可使用 CSS 進行樣式設計的容器等。

在我們的示例中，我們包含了一個標題元素 (<h2>) 來描述表單的目的。

我們還將每個輸入/標籤對和提交按鈕放在一個單獨的 <p> 中，這樣每個都將出現在單獨的行上。這些元素預設都是行內元素，這意味著如果我們不這樣做，它們都會在同一行上。

這是表單結構的一種常見模式。有些人使用 <p> 元素來分隔他們的表單元素，有些人使用 <div>、<section>，甚至 <li> 元素。只要使用的元素具有語義意義，這並沒有太大關係。例如，將表單元素組分成單獨的段落或內容部分，甚至列表中的專案，是說得通的。將它們表示為 blockquote、aside 或 address 則意義不大。

有一個專門用於將表單元素組合在一起的元素，稱為 <fieldset>。這在某些情況下很有用，例如在複雜表單中，以及將多個複選框和單選按鈕組合在一起時。我們稍後會看幾個 <fieldset> 示例。

`<input>` 元素

<input> 元素表示輸入到表單中的不同資料項。讓我們研究一下我們基本表單中的一個示例

html

<input type="text" name="name" id="name" required />

屬性如下

type: 指定要建立的表單控制元件的型別。有許多不同型別的表單控制元件，從不同型別的簡單文字欄位到單選按鈕、複選框等等。text 型別呈現一個基本的文字欄位，可以接受任何值。
name: 指定資料項的名稱。當表單提交時，資料以名稱/值對的形式傳送。在每種情況下，名稱都等於此 name 屬性值，而值等於文字欄位中輸入的文字。
id: 指定一個可用於標識元素的 ID。在這種情況下，它用於將表單控制元件與其 <label> 相關聯。
required: 指定在提交表單之前必須在表單元素中輸入一個值。這隻應在您需要的輸入上設定，而不是在可選欄位上設定。

您應該知道，某些輸入型別通常不會從欄位中輸入的文字獲取其值。例如，<input type="color"> 渲染一個顏色選擇器小部件，您可以從中選擇一種顏色，而 <input type="radio"> 渲染一個單選按鈕控制元件，可以被選中或不選中。

對於單選按鈕，您通常需要提供一個 value 屬性，其中包含如果選擇該單選按鈕則會提交的值。請注意，您可以在 text 和 color 等輸入型別上指定 value 屬性——效果是該值在表單欄位首次渲染時預先填充。

`required` 和 `value` 屬性的使用

再次，轉到您在單獨選項卡中載入的示例，嘗試在兩個欄位都未輸入任何值的情況下提交表單。您會看到“姓名”欄位旁邊彈出一個錯誤訊息，提示“請填寫此欄位”（不同瀏覽器可能有所不同）。這就是 required 屬性和瀏覽器預設的客戶端表單驗證在起作用。
現在嘗試在第一個欄位中輸入一個有效的姓名，但在第二個欄位中輸入一個無效的電子郵件地址（例如“aaaa”）。這次您會看到“電子郵件”欄位旁邊彈出一個錯誤訊息，提示“請輸入電子郵件地址”。
嘗試編輯表單，在第一個輸入中包含 value="Bob"。當您重新載入程式碼時，您會看到第一個欄位預設輸入了“Bob”這個值。

專用文字欄位輸入

上面的第二個練習提出了一個有趣的問題。第二個輸入欄位特別期望一個電子郵件地址，並以此驗證輸入的值。如果您再次查看錶單程式碼，您會明白為什麼——第二個 <input> 的 type 為 email。有幾種專用的文字欄位輸入型別旨在處理特定型別的資料——<input type="number">、<input type="password">、<input type="tel"> 等。

點選上面的一些連結，瞭解這些輸入型別的作用。檢視我們的 <input> 參考，看看您是否能找到更多專用的文字欄位輸入型別。

`<label>` 元素

正如我們上面所說，<label> 元素提供與表單控制元件相關聯的標識標籤，描述應輸入到其中的資料。您可以在 <label> 元素中放置任何您喜歡的文字內容，但它們應該準確描述相關表單控制元件期望的資料。關聯是透過給表單控制元件一個 id 屬性，然後給 <label> 元素一個 for 屬性，其值與控制元件的 id 相同來建立的。

例如

html

<label for="name">Name (required):</label>
<input type="text" name="name" id="name" required />

<label> 元素很重要，原因有幾個，最值得注意的是

當視障使用者使用螢幕閱讀器幫助他們閱讀和與網頁內容互動時，當遇到每個控制元件時，螢幕閱讀器將讀出相關的標籤文字。這使使用者更容易理解每個控制元件中應該輸入什麼內容。
它們使您能夠透過單擊表單元素的標籤文字以及控制元件來聚焦表單元素。這對於手機使用者特別有用，在觸控式螢幕上用手指準確選擇表單元素可能很困難。在這種情況下，增大點選區域很有用。

顯式和隱式表單標籤

您上面看到的表單標籤樣式稱為顯式表單標籤——控制元件和標籤之間的關聯是透過 id 和 for 屬性明確建立的。您還可以透過將控制元件巢狀在標籤內部來實現在隱式表單標籤，如下所示

html

<label>
  Name (required):
  <input type="text" name="name" required />
</label>

巢狀在控制元件和標籤之間建立了隱式關聯，您不再需要 id 和 for 屬性。

這兩種方法都可以，但我們建議使用顯式標籤方法。這是因為顯式關聯通常更容易識別和理解，尤其是在您的 HTML 程式碼變得更復雜時。此外，螢幕閱讀器（和其他輔助技術）並不總是正確處理隱式標籤。

您可以在 HTML Inputs and Labels: A Love Story, csstricks.com (2021) 中閱讀更多關於表單標籤最佳實踐的資訊。

`<button>` 元素

當 <button> 元素包含在 <form> 元素內部時，其預設行為是提交表單，前提是沒有無效資料導致客戶端表單驗證阻止提交。您在上面使用我們的基本表單示例時已經看到了這種行為。

可以透過 <button> 元素的 type 屬性指定其他按鈕行為

<button type="submit"> 明確宣告一個按鈕應表現為提交按鈕。您實際上並不需要宣告此項，除非出於某種原因您在 <form> 中包含其他按鈕，並且您希望明確哪個是提交按鈕。這種情況非常罕見。
<button type="reset"> 建立一個重置按鈕——這會立即刪除表單中的所有資料，將其重置為初始狀態。不要使用重置按鈕——它們在 Web 早期很受歡迎，但通常弊大於利。大多數人都經歷過填寫長表單，卻不小心點選了重置按鈕而不是提交按鈕，這意味著他們不得不重新開始。
<button type="button"> 建立一個與 <form> 元素之外的按鈕行為相同的按鈕。正如我們之前看到的，它們預設什麼也不做，需要 JavaScript 才能賦予它們功能。

注意：您還可以使用具有相同 type 值（例如 <input type="submit">、<input type="reset"> 和 <input type="button">）的 <input> 元素來建立上述按鈕型別。但是，與它們的 <button> 對應項相比，這些按鈕有許多缺點。您應該改用 <button>。

關於可訪問性的旁註

我們已經討論了表單標籤對於可訪問性的重要性，但我們也想就使用正確語義元素建立表單（例如，使用 <button> 提交表單，而不是使用程式設計為 <button> 的 <div>）的一般重要性發表一些評論。完全可以使用 CSS 和 JavaScript 的組合來使幾乎任何 HTML 元素看起來和行為都像表單元素。開發人員通常出於設計原因這樣做——某些表單控制元件很難設定樣式。

但是，當您這樣做時，您會讓自己和使用者的生活變得更艱難。瀏覽器預設提供了一些 <button> 和表單控制元件功能，無需 JavaScript 或其他額外程式碼，以使表單對所有使用者更具可用性。

例如

語義元素可被螢幕閱讀器等輔助技術理解，這些技術將它們的含義傳達給無法看到它們的使用者。
表單控制元件和按鈕預設情況下可使用鍵盤訪問。在前面的示例中，嘗試使用 Tab 和 Shift + Tab（稱為“tabbing”）在表單元素之間向前和向後移動。
還要注意，在表單元素之間切換時，聚焦的元素會用藍色輪廓（稱為焦點輪廓）突出顯示。這對於鍵盤使用者瞭解他們在表單中的當前位置是一個重要功能。

如果您不使用正確的語義元素來實現表單，您將不得不重新實現所有這些功能，否則您的表單元素將不會按使用者預期的方式執行，因此會顯得有問題。這一切都累積起來。

其他控制型別

您可以使用許多其他控制型別在表單中收集資料。讓我們看一個稍微複雜一點的示例，然後我們將對其進行探索和解釋。

注意：在此示例中，我們假設使用者已經註冊並登入，因此無需收集姓名和電子郵件等詳細資訊。

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Second form</title>
  </head>
  <body>
    <form action="./payment_page" method="get">
      <h2>Register for the meetup</h2>
      <fieldset>
        <legend>Choose hotel room type:</legend>
        <div>
          <input
            type="radio"
            id="hotelChoice1"
            name="hotel"
            value="economy"
            checked />
          <label for="hotelChoice1">Economy (+$0)</label>

          <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
          <label for="hotelChoice2">Superior (+$50)</label>

          <input
            type="radio"
            id="hotelChoice3"
            name="hotel"
            value="penthouse"
            disabled />
          <label for="hotelChoice3">Penthouse (+$150)</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Choose classes to attend:</legend>
        <div>
          <input type="checkbox" id="yoga" name="yoga" />
          <label for="yoga">Yoga (+$10)</label>

          <input type="checkbox" id="coffee" name="coffee" />
          <label for="coffee">Coffee roasting (+$20)</label>

          <input type="checkbox" id="balloon" name="balloon" />
          <label for="balloon">Balloon animal art (+$5)</label>
        </div>
      </fieldset>
      <p>
        <label for="transport">How are you getting here:</label>
        <select name="transport" id="transport">
          <option value="">--Please choose an option--</option>
          <option value="plane">Plane</option>
          <option value="bike">Bike</option>
          <option value="walk">Walk</option>
          <option value="bus">Bus</option>
          <option value="train">Train</option>
          <option value="jetPack">Jet pack</option>
        </select>
      </p>
      <p>
        <label for="comments">Any other comments:</label>
        <textarea id="comments" name="comments" rows="5" cols="33"></textarea>
      </p>
      <p>
        <button>Continue to payment</button>
      </p>
    </form>
  </body>
</html>

它呈現如下

我們建議您在學習接下來的幾節時，在單獨的瀏覽器選項卡中開啟此示例，在這些節中，我們將依次檢視每種控制型別。為此，請使用您的程式碼編輯器將程式碼複製到一個 HTML 檔案中，並在瀏覽器選項卡中開啟它。

在繼續之前，請在本地副本中嘗試不同的表單控制元件並選擇一些值。嘗試提交表單，看看 URL 中提交的資料是什麼樣的。

單選按鈕

“選擇酒店房型”按鈕是使用 <input type="radio"> 控制元件實現的。這些控制元件呈現為一組按鈕控制元件，其中每次只能選擇一個——您不能同時選擇多個。它們以老式收音機上的按鈕命名，在那裡您按下一個按鈕，之前選擇的按鈕就會再次彈出。

我們的示例程式碼看起來像這樣

html

<fieldset>
  <legend>Choose hotel room type:</legend>
  <div>
    <input
      type="radio"
      id="hotelChoice1"
      name="hotel"
      value="economy"
      checked />
    <label for="hotelChoice1">Economy (+$0)</label>

    <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
    <label for="hotelChoice2">Superior (+$50)</label>

    <input
      type="radio"
      id="hotelChoice3"
      name="hotel"
      value="penthouse"
      disabled />
    <label for="hotelChoice3">Penthouse (+$150)</label>
  </div>
</fieldset>

radio 輸入型別的工作方式與 text 輸入型別大致相同，但有一些區別

每組單選按鈕的 name 屬性必須包含相同的值，才能將它們作為一組關聯起來。如果它們包含不同的值，它們將有效地是獨立的集合，提交時具有不同的值。
您必須包含一個 value 屬性，其中包含每個單選按鈕要提交的值。提交的值將是名稱/值對，但名稱始終相同，例如 hotel=economy 或 hotel=superior。
每個單選按鈕的 <label> 應該描述該特定的值選擇，而不是您選擇的總體值。提供總體值選擇描述的首選方法是將它們包裝在 <fieldset> 中，該元素將 <legend> 元素作為子元素，其中包含描述。

注意：除了構造和標記表單之外，欄位集還有其他用途，例如停用一整套控制元件作為一個單一單元。

值得注意的是，我們已將 checked 屬性應用於第一個單選按鈕——這使得它在頁面首次載入時被選中。這意味著始終會選擇一個選項，並且您無法在不選擇另一個單選按鈕的情況下取消選擇一個單選按鈕。

嘗試從第一個單選按鈕中刪除 checked 屬性，儲存，然後重新載入，檢視其效果。在繼續之前將其放回。

停用表單控制元件

在單選按鈕示例中，您會注意到第三個單選按鈕設定了 disabled 屬性。這會導致渲染的控制元件變灰且無法選擇。這在許多情況下都很有用，例如某個選項通常可用，但現在不可用。例如，產品可能缺貨，或者像我們示例中的情況一樣，頂層公寓都已預訂滿！

您可以在任何表單控制元件（包括 <button> 元素）上設定 disabled 屬性。<fieldset> 元素也可以接受 disabled 屬性——這會導致欄位集內的每個表單控制元件都被停用。

嘗試在兩個 <fieldset> 元素上設定 disabled 屬性，儲存，然後重新載入，以檢視其效果。在繼續之前再次刪除它們。

複選框

我們的“要參加的課程”選擇器是使用 <input type="checkbox"> 控制元件實現的。這些控制元件呈現為一組開/關狀態的複選框。與單選按鈕不同，您可以同時選擇多個。

html

<fieldset>
  <legend>Choose classes to attend:</legend>
  <div>
    <input type="checkbox" id="yoga" name="yoga" />
    <label for="yoga">Yoga (+$10)</label>

    <input type="checkbox" id="coffee" name="coffee" />
    <label for="coffee">Coffee roasting (+$20)</label>

    <input type="checkbox" id="balloon" name="balloon" />
    <label for="balloon">Balloon animal art (+$5)</label>
  </div>
</fieldset>

從程式碼片段中可以看出，單選按鈕和複選框的實現方式非常相似（它們也可以接受 checked 屬性，以便在頁面載入時預先選中）。它們的行為也相當相似，不同之處在於單選按鈕允許您從多個專案中選擇零個或一個專案，而複選框允許您從多個專案中選擇零個或多個專案。

主要區別（除了 type 值！）在於每個複選框都有不同的 name 值，並且它們通常不給定 value 屬性。從行為上看，這意味著它們表示不同的資料值，而一組單選按鈕只表示一個。提交時，如果複選框被選中，則每個值都會以 on 值提交——yoga=on、balloon=on 等。

注意：透過給複選框一個 value 屬性，可以更改提交的複選框的值，例如：<input type="checkbox" id="yoga" name="yoga" value="yes" /> 將導致在選中時提交 yoga=yes。但是，這樣做意義不大。如果選中，複選框要麼提交一個單一值，要麼根本不提交。傳送到伺服器的值是什麼並不重要。

下拉選單

下拉選單，例如我們示例中的“您如何到達這裡”選擇控制元件，不是使用 <input> 型別實現的，而是使用 <select> 和 <option> 元素實現的

html

<label for="transport">How are you getting here:</label>
<select name="transport" id="transport">
  <option value="">--Please choose an option--</option>
  <option value="plane">Plane</option>
  <option value="bike">Bike</option>
  <option value="walk">Walk</option>
  <option value="bus">Bus</option>
  <option value="train">Train</option>
  <option value="jetPack">Jet pack</option>
</select>

<select> 元素包含所有不同的值選擇。在此處設定 id 屬性以將控制元件與其標籤關聯，以及設定 name 屬性以設定要提交的資料項的名稱。

資料項的每個可能值都由一個 <option> 元素表示，巢狀在 <select> 元素內部。每個 <option> 元素都可以帶一個 value 屬性，該屬性指定如果從下拉列表中選擇該選項，則要提交的值。如果您不指定 value，則使用 <option></option> 標籤內的文字作為值。

注意：如果您希望在頁面載入時選擇某個特定選項，可以將 selected 屬性新增到相關的 <option> 元素。

多行文字輸入欄位

多行文字輸入欄位使用 <textarea> 元素建立

html

<label for="comments">Any other comments:</label>
<textarea id="comments" name="comments" rows="5" cols="33"></textarea>

它們的行為方式與 <input type="text"> 元素相同，只是它們允許多行文字輸入。rows 屬性指定文字區域預設的高度行數，而 cols 屬性指定文字區域預設的寬度列數。如果未指定，則使用的值為 cols="20" 和 rows="2"。

大多數瀏覽器都會在文字區域的一個角落渲染一個拖動手柄，可用於調整其大小。嘗試使用它來調整我們演示中文字區域的大小。

表單驗證

早些時候，我們查看了瀏覽器提供的一些基本客戶端表單驗證。required 屬性用於指定在提交表單之前必須填寫欄位；它還會檢查是否為特定值型別（如電子郵件地址、URL、數字等）輸入了正確的值型別。驗證很重要，原因主要有兩個

確保資料以正確的格式提交，以免在您的應用程式中引起錯誤。
確保資料不會引起安全問題。壞人知道如何以特定格式提交資料，以便在不安全的應用程式上，它可以執行刪除資料庫或控制系統的命令。

表單驗證是一個巨大的主題，超出了本文的範圍，因此我們暫時將其留在這裡。請記住，有兩種型別的表單驗證

客戶端驗證，發生在瀏覽器中，使用表單驗證屬性（如 required）和 JavaScript 組合實現。客戶端驗證對於在使用者輸入錯誤資料時立即提供提示很有用，但在阻止惡意資料透過方面效果不佳。關閉 JavaScript 或修改客戶端程式碼以使驗證不再有效太容易了。
伺服器端驗證，發生在伺服器上，使用伺服器正在使用的任何語言實現。格式錯誤的訊息可能會意外或故意傳送到伺服器。傳統觀點是確保您的伺服器不信任客戶端傳送的任何內容，以避免因格式錯誤的訊息引起的錯誤或安全問題。伺服器端驗證非常適合阻止惡意訊息，因為篡改伺服器上執行的程式碼更困難。伺服器端驗證在向用戶提供有關不正確資料的提示方面效果不佳，因為資料必須傳送到伺服器進行驗證，然後結果必須傳送回客戶端，使用者才能收到通知。

簡而言之，不要在客戶端驗證或伺服器端驗證之間做出選擇——您需要兩者。您需要客戶端驗證來向用戶提供有關其輸入的反饋，並需要伺服器端驗證來確保訊息的格式您的伺服器可以安全處理。如果您想開始學習更多關於驗證的知識，一個好的起點是客戶端表單驗證。