AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

接受用户输入并显示输出

专家模式已关闭

专家模式

使用专家模式来隐藏为初学者准备的 Web 开发指导。

构建新闻邮件订阅表单

研究表明，在电子邮件营销上花费的每一美元都会带来更多的销售额。为了让我们的品牌留在客户的脑海中，我们希望定期发送新闻邮件，其中包含有关我们公司的信息以及折扣奶酪自行车和配件的优惠信息。为了建立我们的邮件列表，我们必须添加新闻邮件订阅表单。我们的产品经理希望表单如下所示

  • 表单应接受用户的全名和电子邮件地址。

  • 两个字段都应为必填项。

  • 如果表单提交失败，应向用户显示错误。

  • 如果表单提交成功，则应显示包含用户姓名的欢迎消息。

在非 AMP 页面中，我们可能会使用基本的 HTML 表单元素来收集用户的信息。AMP 提供了一个 <amp-form> 组件，但此组件实际上也使用元素名称“form”。那么，有什么区别呢？

在本节中，我们将探讨传统网站表单是什么、AMP 表单与传统表单的不同之处以及在提交 AMP 表单时如何处理来自服务器的响应。

表单简介

表单用于将数据从网站发送到服务器。它们包含一个或多个用户可以在其中输入信息的输入。表单输入包括文本字段、组合框、复选框、单选按钮和按钮。用户提交表单后，他们输入的所有数据都会被发送到服务器进行处理，并且从服务器加载一个新页面，从而导致页面完全刷新。

如今，用户对 Web 表单的期望更高。他们希望立即知道他们是否输入了无效数据（表单验证和表单验证）。他们希望在无需刷新整个页面的情况下提交表单数据。此外，用户希望知道他们的表单数据何时被服务器接受以及何时发生错误。传统上，开发人员不得不使用 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> 的文档，在您新的标题下方添加一个符合以下规范的表单

表单应

  • 包含用户姓名和电子邮件的文本输入。

  • 包含一个标记为“订阅”的按钮（类型为 submit 的 <input>）。

  • 将表单响应发布到 /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 模板视为网站的“疯狂填词”。疯狂填词是缺少某些单词的故事，这些单词必须由读者提供。例如，给定短语“有很多 {adjective} 方法可以选择 {noun} 来阅读”，读者可以选择单词“有用的”和“杂志”，并将短语变成“有很多有用的方法可以选择杂志来阅读”。（通常，结果会更愚蠢，但我们将在此处努力保持专业性。）

类似地，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> 文档！

练习 4：确认新闻邮件订阅

现在是时候为我们的订阅表单添加成功和错误处理了。使用 <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>

上一章 下一章