AMP: Building Accelerated Mobile Pages

A caveat with the submit-success approach

There is a drawback with this setup. Earlier, we mentioned that the submit-success attribute--which is key to displaying the search form response--can only be used on direct child elements of the form element. This makes it trickier to design the page markup if the form inputs are not right beside the results, as is the case in our page (the form is in the header, but the results are displayed in the body of the page). So, in the final markup for this example, we had to do the following:

1. Place the form tag outside the header tag.
2. Remove the main content tag, so that the submit-success div remained as a direct child of the form element.
3. Add a main-content style to the submit-success (and every other ...