个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 AMP 表单，但无法弄清楚如何在使用一些附加元素提交表单后显示相同的 html。
一般来说，我的标记比较复杂，但这里有简单的示例来说明我需要做什么:
<form method="post" action-xhr="https://example.com/subscribe" target="_top" id="form1">
<ul>
<li>
<h2>Title 1</h2>
<input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
<!-- Show this only on submit-success and there are used
some variables from amp-mustache -->
<div>Some Html {{Votes}}</div>
</li>
<li>
<h2>Title 2</h2>
<input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
<!-- Show this only on submit-success and there are used
some variables from amp-mustache -->
<div>Some Html {{Votes}}</div>
</li>
...
</ul>
</form>
我知道我可以使用这样的东西，但不想重复标记(正如我提到的，它比提供的示例更复杂):
<form method="post" action-xhr="https://example.com/subscribe" target="_top" id="form1">
<ul>
<li>
<h2>Title 1</h2>
<input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
</li>
<li>
<h2>Title 2</h2>
<input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
</li>
...
</ul>
<div submit-success>
<template type="amp-mustache">
<ul>
<li>
<h2>Title 1</h2>
<input type="radio" value="1" name="answer" id="1" class="relative" on="change:form1.submit">
<div>Some Html {{Votes}}</div>
</li>
<li>
<h2>Title 2</h2>
<input type="radio" value="2" name="answer" id="2" class="relative" on="change:form1.submit">
<div>Some Html {{Votes}}</div>
</li>
...
</ul>
</template>
</div>
</form>
最佳答案
目前 amp-form 仅支持一个 submit-success 元素作为表单的直接子元素。如果您想改变这一点，您可以打开 GitHub issue on ampproject/amphtml请求放宽该要求以允许多个 submit-success 元素。
您还可以使用实验性的amp-bind延伸与使用Actions and Events in AMP设置成功消息的文本以及表单提交的结果。但是，使用实验性 AMP 功能时会产生一些影响和后果。要了解这些，请参阅 Experimental Features 上的文档.
像这样的事情应该可以解决问题:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Form submit example</title>
<link rel="canonical" href="https://www.example.com/form.amp.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<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>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<p>Cast your vote</p>
<form
method="post"
action-xhr="https://www.example.com/subscribe"
target="_top"
on="submit-success:AMP.setState({formResponse: event.response}),title1Result.show,title2Result.show"
id="form1"
>
<fieldset>
<ul>
<li>
<h2>Title 1</h2>
<input type="radio" value="1" name="answer" id="1" on="change:form1.submit">
<div id="title1Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>
</li>
<li>
<h2>Title 2</h2>
<input type="radio" value="2" name="answer" id="2" on="change:form1.submit">
<div id="title2Result" hidden>Some Html <span [text]="formResponse.votes"></span></div>
</li>
</ul>
</fieldset>
</form>
</body>
</html>关于amp-html - AMP 表单 - 在表单提交后显示相同的 html 并添加一些附加元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43918898/
26
4
0
我正在关注 this关于在自己的网站中集成 Paypal 的教程。 例如，在页面中的第 3 步的第 20 行，我发现了这个: if (!isset($_POST["txn_id"]) &
amp-story 是否与 amp-access(或 amp-subscription)一起使用？ 这里是 amp-access 的示例代码 { "authorization": "
我在一个主题中有几个非 AMP 页面。我的非 AMP 页面将在文章正文中包含指向同一主题中其他非 AMP 页面的链接。页面的 AMP 版本应该链接到同一主题中的其他 AMP 页面，还是文章中的所有链接
这是我正在尝试做的事情: 使用 google API 对邮政编码或城市和州进行地理定位。地址参数的值来自表单字段。 将地理线插入同一表单中的隐藏字段 提交表格。 我已经尝试使用 AMP-LIST 和
搜索控制台添加了一系列“引用的 AMP 网址不是 AMP”问题。 如果我使用 AMP Test我得到: 但是，当我 checkin https://validator.ampproject.org/时
更具体地说，您可以在未通过 AMP 验证的页面上使用 AMP 标记和代码吗？ 用例:我想使我的网站完全使用 AMP，为此，我需要使用类似 on='tap:' 的东西对于我的下拉菜单和 用于跟踪，但我网
更具体地说，您可以在未通过 AMP 验证的页面上使用 AMP 标记和代码吗？ 用例:我想使我的网站完全使用 AMP，为此，我需要使用类似 on='tap:' 的东西对于我的下拉菜单和 用于跟踪，但我网
如何使用 amp-list、amp-mustache、amp-form 和 amp-bind 实现自动建议？ 想要为页内搜索实现自动建议 研究过这个Google example 希望autosugge
我想知道如何根据用户选择的选项获取文本内容并将其设置为amp-state。例如，如果用户选择“红色”选项。我想将“胭脂”设置为 amp-state 而不是“红色”。我知道我可以通过 setState
示例:- Open Iframe in Lightbox 我还尝试从顶部操纵 iFrame 的位置 75% 或 600px，但它也不起作用。 AMP iFr
我有一个名为 currentItem 的状态，其中包含 url、标题、描述...当我按下按钮时，currentItem 应保存在名为 myItems 的其他状态中。它将包含一个项目对象列表。 现在的问
我是 Azure SQL 数据库的新手(之前没有数据库经验)，目前正在尝试从 microsoft learn 获得学位。我被困在这节课中，似乎无法弄清楚，但我认为这很容易。问题: PS /home/s
我正在尝试测试新的 amp-script 功能有多强大。但是，我收到此错误: Experiment "amp-script" is not enabled. log.js:187 "E
我在 AMP 结合 amp-state 和 amp-position-observe 时遇到问题。 { "visible": "n"
有 3 种方法可以将 AMP 与 PWA 结合起来(如 here 中所述): 具有 PWA 功能的 AMP 页面 AMP 作为 PWA 的入口点 AMP 作为 PWA 的数据源 在第一种和第三种方法中
我在 AMP 结合 amp-state 和 amp-position-observe 时遇到问题。 { "visible": "n"
我有一个 amp 故事，我需要从动态生成的 url 创建一个包含全屏视频的页面。在下面的第 2 页中，我直接使用 amp-video 组件呈现全屏，在第 3 页中，我使用 amp-list 提供视频
查看 AMP 规范，鉴于自定义样式元素依赖于 CSS 变量，这意味着当前的浏览器支持范围很窄。见:Can I use reference 我猜非自定义样式有一个“优雅的回退”，因为不理解 CSS 变量
我是 AMP 的新手。我有一个响应式网站，我需要在其主页上实现 AMP。是否可以使其与 AMP 兼容而不影响桌面 View ？或者我需要为 AMP 重写单独的代码？ 最佳答案 您可以使用@media来
我在实现 amp-iframe 时在控制台中收到以下验证错误: Overflow element must be defined for resizable frames 有什么解决办法吗？ 最佳答
我是一名优秀的程序员,十分优秀！