📅 最后修改于: 2023-12-03 14:39:06.581000 🧑 作者: Mango
AMP 表单是一种可鉴定输入数据的 AMP 组件，它支持客户端验证，并可帮助您防止不良行为和垃圾邮件。AMP 表单还包括自定义成功/错误状态和事件, 提供了丰富的表单设计能力。
以下是如何使用 AMP 表单的一些示例代码。
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="UTF-8" />
<title>AMP 表单</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<h1>基本表单</h1>
<form method="post"
action-xhr="https://example.com/submit"
target="_blank">
<fieldset>
<label>
<span>姓名</span>
<input type="text" name="name" required>
</label>
<br>
<label>
<span>电子邮件</span>
<input type="email" name="email" required>
</label>
<br>
<button type="submit">提交</button>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="UTF-8" />
<title>AMP 表单</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<h1>表单验证</h1>
<form method="post"
action-xhr="https://example.com/submit"
target="_blank"
on="submit-error:invalid-form-validationerror">
<fieldset>
<label>
<span>校验码</span>
<input type="text" name="code" minlength="4" required>
</label>
<br>
<button type="submit">提交</button>
</fieldset>
<template type="amp-mustache">
<div class="alert alert-error" role="alert">
{{message}}
</div>
</template>
</form>
</body>
</html>
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="UTF-8" />
<title>自定义表单</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<h1>自定义表单</h1>
<form method="post"
action-xhr="https://example.com/submit"
target="_top"
on="submit-error:error-handler.submitSuccess.show,submit-success:success-handler.submitSuccess.show">
<fieldset>
<label>
<span>姓名</span>
<input type="text" name="name" required>
</label>
<br>
<label>
<span>电子邮件</span>
<input type="email" name="email" required>
</label>
<br>
<button type="submit">提交</button>
</fieldset>
<div submit-success>
<h2 class="submit-success">提交成功</h2>
<p>谢谢您提交表单！</p>
</div>
<div submit-error>
<h2 class="submit-error">提交失败</h2>
<p>{{error}}</p>
</div>
</form>
</body>
</html>
AMP 表单具有一些自定义属性，用于控制表单的操作。以下是一些常用的属性：
action-xhr这个属性指定表单数据将被提交到的 URL。为了使表单能够使用 AMP 表单的验证功能，必须将表单提交到 https://example.com/submit。此外，您还可以使用 xhr-fields 属性来设置要发送到服务器的其他字段。
target该属性定义在何处打开表单提交的结果。默认情况下，在表单提交成功后，结果将在当前窗口中显示。如果您想在新标签页中打开结果页面，请将此属性设置为 _blank。
method此属性指定将用于向服务器提交表单数据的 HTTP 方法。在 AMP 表单中，仅支持 POST 请求。
on该属性定义了一组用于处理表单提交结果的事件。可以使用 submit-success 和 submit-error 事件来提供自定义成功和失败状态页面的 HTML。
target此属性定义将提交表单结果的目标位置。默认为 _top。如果要在新窗口中打开结果页面，请将其设置为 _blank。
submit-success定义成功提交时将显示的 HTML。
submit-error定义发生错误提交时将显示的 HTML。
以上是如何使用 AMP 表单的一些示例代码和属性。通过使用 AMP 表单，您可以获得许多强大的功能和控制权，从而使您的表单更加灵活和可靠。现在，使用上述代码开始创建您自己的 AMP 表单吧！