接受使用者輸入並顯示輸出

專家模式關閉

專家模式

使用專家模式以隱藏為初學者設計的網路開發指南。

研究顯示，在電子郵件行銷上每花費一美元，就能帶來數美元的銷售額。為了讓我們的品牌留在客戶的腦海中，我們希望定期發送電子報，內容包含我們公司的資訊以及折扣乳酪自行車和配件的優惠。為了建立我們的郵寄列表，我們必須新增電子報訂閱表單。我們的產品經理希望表單如下

表單應接受使用者的全名和電子郵件地址。
兩個欄位都應為必填。
如果表單提交失敗，應向使用者顯示錯誤訊息。
如果表單提交成功，應顯示包含使用者姓名的歡迎訊息。

在非 AMP 頁面中，我們可能會使用基本的 HTML 表單元素來收集使用者的資訊。AMP 提供 <amp-form> 元件，但此元件實際上也使用元素名稱「form」。那麼，有什麼不同？

在本節中，我們將探討傳統網站表單是什麼、AMP 表單與傳統表單有何不同，以及提交 AMP 表單時伺服器的回應處理方式。

表單簡介

表單用於將資料從網站傳送到伺服器。它們包含一個或多個輸入欄位，供使用者輸入資訊。表單輸入欄位包括文字欄位、下拉式方塊、核取方塊、單選按鈕和按鈕。使用者提交表單後，他們輸入的所有資料都會傳送到伺服器進行處理，並從伺服器載入新頁面，導致整個頁面重新整理。

現在，使用者對網路表單有更高的期望。他們希望立即知道自己是否輸入了無效資料（表單驗證和表單驗證）。他們希望在不必重新整理整個頁面的情況下提交表單資料。此外，使用者希望知道他們的表單資料何時被伺服器接受以及何時發生錯誤。傳統上，開發人員必須使用 JavaScript、AJAX 和其他類似技術才能提供這些功能。

AMP 表單擴展了正常 HTML 表單的行為，提供了更簡單的方法來執行表單驗證、表單驗證、表單提交、成功和錯誤訊息等等。AMP 表單還提供了一組事件，允許開發人員在表單提交、有效、無效、已驗證等情況下對其他元件執行動作。這些事件對於在提交表單時顯示載入指示器，或顯示成功和錯誤訊息的彈出訊息非常有用。

AMP 表單還為組成表單的輸入欄位提供了更多可能性。例如，AMP 為每個輸入欄位新增了 change 和 input-debounced 事件，以便更輕鬆地追蹤使用者何時變更資訊。AMP 提供額外的 CSS 掛鉤，使樣式化表單更容易。最後，AMP 提供了一些 polyfill，以確保您的表單在所有瀏覽器中都能良好運作。

AMP 為建立表單提供了極大的多功能性。值得花一些時間瀏覽 <amp-form> 的文件，以吸收 AMP 提供的各種功能。

練習 3：建立訂閱表單

首先，讓我們為新的訂閱表單新增標題。將以下程式碼片段新增到 <amp-youtube> 元件下方

<h2 class="main-heading">Subscribe to our Newsletter</h2>

使用 <amp-form> 的文件，在新的標題下方新增一個符合以下規格的表單

表單應

包含使用者姓名和電子郵件的文字輸入欄位。
包含一個標示為「訂閱」的按鈕（<input> 類型為 submit）。
將表單回應發佈到 /submit-form。注意：我們在 Glitch 範本中提供的伺服器已編程為在此端點監聽。伺服器與您的網站位於相同的基本 URL 上執行。因此，如果您的網站位於 https://hungry-modem.glitch.me/，則伺服器會在 https://hungry-modem.glitch.me/submit-form（或作為相對 URL 的 /submit-form）監聽表單提交。
兩個輸入欄位都應為必填。

建議的樣式指南

給予 <form> 元素一個 main-form 類別。
將姓名輸入欄位包在一個具有 input 類別的 <div> 中。
將電子郵件輸入欄位包在一個具有 input 類別的 <div> 中。
給予按鈕一個 btn 類別。

選用樣式指南（將表單放在卡片內；請參閱以下螢幕截圖）

將表單包在一個具有 subscribe-card 類別的 <div> 中。
將 subscribe-card <div> 包在另一個具有 subscribe-card-container 類別的 <div> 中。

注意：處理我們 POST 請求所需的伺服器超出本課程範圍。使用 Glitch 範本 (server.js) 中已提供的伺服器，以便您的表單可以像典型表單一樣提交資料。

完成後，您的頁面應如下所示

訂閱表單

解答

<h2 class="main-heading">Subscribe to our Newsletter</h2>
<div class="subscribe-card-container">
    <div class="subscribe-card">
        <form method="post" action-xhr="/submit-form" target="_top" class="main-form">
            <div class="input">
                <input type="text" name="name" id="form-name" required>
                <label for="form-name">Name:</label>
            </div>
            <div class="input">
                <input type="email" name="email" id="form-email" required>
                <label for="form-email">Email:</label>
            </div>
            <input type="submit" value="Subscribe" class="btn">
        </form>
    </div>
</div>

記得在 <head> 中包含 <amp-form> 腳本

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

使用範本提供回饋

此時，我們的訂閱表單會提交使用者的姓名和電子郵件，但使用者不知道他們的資訊是否被接受，也不知道伺服器是否發生錯誤。我們希望給使用者一些視覺回饋，讓他們知道提交表單後發生了什麼事！

<amp-form> 提供 submit-success 和 submit-error 屬性。這些屬性可以放在元素上，例如 <div> 標籤，這些標籤是 <form> 元素的直接子元素。當表單提交且伺服器成功回應時，會顯示標記為 submit-success 的元素中的內容。同樣地，當表單提交且伺服器傳回錯誤時，會顯示標記為 submit-error 的元素中的內容。

AMP 對標記為 submit-success 和 submit-error 的元素內容的處理方式，與我們迄今看到和使用的其他元件的內容不同。這是因為這些元素包含範本。範本是一種將動態資料（通常從伺服器產生）轉換為插入到頁面中的 HTML 片段的方法。

AMP 頁面中最常用的範本類型是 <amp-mustache>。這基於 Mustache.js 語法。您可以將 mustache 範本視為網站的「瘋狂填詞」。瘋狂填詞是故事，其中缺少某些單字，必須由讀者提供。例如，給定短語「有很多 {形容詞} 方法可以選擇一本 {名詞} 來閱讀」，讀者可以選擇單字「實用」和「雜誌」，並將短語變成「有很多實用的方法可以選擇一本雜誌來閱讀。」（通常，結果會更滑稽，但我們在這裡會盡力保持專業。）

同樣地，mustache 範本描述了 HTML 內容，其中缺少部分，需要用來自伺服器的資訊填寫。範本以 HTML 撰寫，遺失的部分由 {{ }} mustache 大括號標識。當資料從伺服器到達且範本由 AMP 評估時，mustache 變數會替換為來自伺服器的資訊。產生的 HTML 會在定義範本的位置顯示在螢幕上。

例如，給定以下資料

{
    "name": "Bob",
    "job": "builder"
}

以及以下範本

<template type="amp-mustache">
    <p>{{name}} is an excellent {{job}}!</p>
</template>

將產生以下 HTML

<p>Bob is an excellent builder!</p>

Mustache 變數可以取代的不僅僅是文字。您也可以在屬性的值中使用 mustache 變數。這在定義影像的 URL 時很有用。例如，給定以下資料

{
    "description": "Picture of a tiger",
    "url": "tiger.jpg",
    "width": 200,
    "height": 200
}

以及以下範本

<template type="amp-mustache">
    <amp-img alt="{{description}}"
        src="images/{{url}}"
        width="{{width}}"
        height="{{height}}"
        layout="responsive">
    </amp-img>
</template>

結果將如下所示

<amp-img alt="Picture of a tiger"
  src="images/tiger.jpg"
  width="200"
  height="200"
  layout="responsive">
</amp-img>

注意：Mustache 範本具有廣泛的其他功能。您可以迭代值集合以顯示資料列表或表格之類的東西。您可以僅在定義特定變數時（或僅在未定義時）顯示內容。您也可以顯示未轉義的 HTML 內容。若要瞭解更多資訊，請閱讀 <amp-mustache> 文件！

現在是時候為我們的訂閱表單新增成功和錯誤處理了。使用 <amp-mustache> 和成功/錯誤回應呈現文件，將符合以下要求的成功和錯誤訊息新增到您的訂閱表單

成功訊息應感謝使用者訂閱，並顯示其姓名。提示：範本中要使用的伺服器回應屬性為 {{name}}。
錯誤訊息應僅告知使用者提交回應時發生錯誤

建議的樣式指南

將兩個訊息都包在一個具有 form-submit-response 類別的段落元素中

完成後，結果應如下所示

成功訂閱訊息

解答

<div class="subscribe-card-container">
    <div class="subscribe-card">
        <form method="post" class="main-form" action-xhr="/submit-form" target="_top">
            <div class="input">
                <input type="text" name="name" id="form-name" required>
                <label for="form-name">Name:</label>
            </div>
            <div class="input">
                <input type="email" name="email" id="form-email" required>
                <label for="form-email">Email:</label>
            </div>
            <input type="submit" value="Subscribe" class="btn">
            <div submit-success>
                <template type="amp-mustache">
                    <p class="form-submit-response">
                        Success! Thanks {{name}} for subscribing!
                    </p>
                </template>
            </div>
            <div submit-error>
                <template type="amp-mustache">
                    <p class="form-submit-response">
                        Oops! Sorry, there was an error.
                    </p>
                </template>
            </div>
        </form>
    </div>
</div>

記得在 <head> 中包含 <amp-mustache> 函式庫

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>