AMP轮播滑块中的AMP形式

Question

我正在尝试在多张幻灯片上添加表格。用户可以在其中填写一张幻灯片的一些详细信息，然后转到下一张以填写更多细节。

它在放大器轮播中工作。但是，当提交或字段位于另一张幻灯片上时，则无效。

这是有原因的吗？还是可以解决这个问题？

<amp-carousel height="100vh" layout="fixed-height" type="slides">
      <div>
       <form method="post" action-xhr="send-form.php">
      <div class="blue-box">
         <input type="text" name="name" required  />
         Your telephone number:<br>
         <input type="text" name="phone" required />    
      </div>

    </div>
    <div>
      <div class="red-box">
      Your email address:<br>
           <input type="text" name="email"  required />
      </div> 

    </div>
    <div>
    <div class="blue-box">
        Your message:<br>
           <textarea name="message"></textarea>
      </div>
    </div>
    <div>
      <div class="green-box">
        <input type="submit" value="" style="height:100px; width:100px; background-color:#000;"/>    
      </div>
    </form>
    </div>
  </amp-carousel>

Answer 1

您似乎正在尝试“入侵” multi page flow form。

您无法使用amp-carousel做到这一点，因为当AMP渲染轮播时，它将使用其中的所有HTML来创建幻灯片。它不会链接幻灯片，因此每张幻灯片的HTML都是独立的。因此，AMP在第一张幻灯片中看到的是以下代码：

<form method="post" action-xhr="send-form.php">
      <div class="blue-box">
         <input type="text" name="name" required  />
         Your telephone number:<br>
         <input type="text" name="phone" required />    
      </div>

    </div>

然后AMP看到关闭的</form>标签丢失了，因此将其添加到第一张幻灯片中，其余字段在表单的 outside 之外，因此您为什么不能提交因为submit字段位于最后一张幻灯片上。

以下是屏幕截图，显示了第一张幻灯片中的代码：

AMP自动关闭form元素。

因此，如果您要将整个表单添加到第一张幻灯片中，则应该可以使用。如果您确实想要multi page flow form，请改用amp-bind。