Amphtml: "form" attribute for input tags not supported

Created on 12 Jul 2018 · 12Comments · Source: ampproject/amphtml

To whom it may concern:

I like to add attribute - "form" in input tag, but there will be an error occur. I wonder is this an issue or just for some reasons to prohibit it ?

<form id="my_form" action="xxxx" target="_top" ></form>
<input type="text" form="my_form" />

Paul

amp-form Developer When Possible DevX Feature Request components

Source

meistudioli

All 12 comments

Hi Paul. 👋 I think it's because the amp-form extension relies on query selectors to find associated <input> tags to implement its special logic. It's feasible to support the form attribute but would more expensive to find associated inputs that are not descendants of the form.

For prioritization, is there a use case that's blocked by this?

Relevant WHATWG: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

/to @cvializ /cc @aghassemi

choumx on 12 Jul 2018

👍1

Hi, @choumx :

Here comes my sample code

<aside class="direct-buy" [class]="'direct-buy' + ((directBuy.on) ? ' direct-buy--on' : '')">
    <h3 class="direct-buy__h3">direct buy</h3>

    <form id="direct-buy-xhr"
        method="post"
        action-xhr="<?php echo $host; ?>WS_yauc_specs_amp.php"
        target="_top"
        on="submit-success:AMP.setState(
            {
                directBuy: event.response.directBuy
            }
        )"
    >
        <input type="hidden" name="action" value="fetch" />
        <input type="hidden" name="merchandiseId" [value]="directBuy.merchandiseId" />
        <div submit-success template="template-direct-buy"></div>
    </form>
</aside>

<template id="template-direct-buy" type="amp-mustache">
    <div class="direct-buy-wrap">
        <p class="direct-buy-title">選擇商品規格</p>
        <form id="direct-buy-gate" class="direct-buy__main" action="https://blog.lalacube.com/mei/yahoo_auction_direct_buy_amp.php" method="get" target="_top">
            <div class="direct-buy__infos">
                <figure class="direct-buy__figure">
                    <amp-img class="cover" layout="fill" src="{{thumbnail}}" [src]="directBuy.vision"></amp-img>
                </figure>
                <div class="direct-buy__items">
                    <p class="direct-buy__title">{{title}}</p>
                    <div class="direct-buy__price buynow">
                        <em class="direct-buy__price__em">$ {{price}}</em>
                    </div>
                </div>
            </div>
            {{#hasSpec}}
                <div class="direct-buy__contract overscrolling">
                    {{#specs}}
                        <div class="direct-buy__set">
                            <h4>{{title}}</h4>
                            <div class="direct-buy__set__ens">
                                {{#hits}}
                                    <div class="spec-unit">
                                        <input id="{{id}}" type="radio" name="{{name}}" value="{{value}}" role="button" tabindex="0"
                                            on="tap:AMP.setState(
                                                {
                                                    directBuy: {
                                                        spec{{idx}}: 1,
                                                        vision: '{{vision}}'
                                                    }
                                                }
                                            )" />
                                        <label for="{{id}}" class="spec-unit__label">{{title}}</label>
                                    </div>
                                {{/hits}}
                            </div>
                        </div>
                    {{/specs}}
                </div>
            {{/hasSpec}}
            <div class="direct-buy__set">
                <h4>數量</h4>
                <div class="direct-buy__set__ens">
                    <input class="direct-buy__count" type="number" name="quantity" value="1" pattern="[0-9]*"
                        [value]="directBuy.qty"
                        on="change:AMP.setState(
                            {
                                directBuy: {
                                    qty: (+event.value > 0) ? ((+event.value <= directBuy.max) ? +event.value : directBuy.max) : directBuy.qty
                                }
                            }
                        )"
                    />
                    <a class="direct-buy__quantity"
                        on="tap:AMP.setState(
                            {
                                directBuy: {
                                    qty: (directBuy.qty - 1 < 1) ? 1 : (directBuy.qty - 1)
                                }
                            }
                        )">
                    -</a>
                    <a class="direct-buy__quantity"
                        on="tap:AMP.setState(
                            {
                                directBuy: {
                                    qty: (directBuy.qty + 1 <= directBuy.max) ? (directBuy.qty + 1) : directBuy.qty
                                }
                            }
                        )">
                    +</a>
                </div>
            </div>
            {{#params}}
                <input type="hidden" name="{{name}}" value="{{value}}" />
            {{/params}}
            <input type="hidden" name="_crumb" value="AUTHDATA(crumb)" data-amp-replace="AUTHDATA" />
            <input type="submit" value="confirm" />
        </form>
    </div>
    <a class="direct-buy__overlay stuff" on="tap:AMP.setState({directBuy:{on:false}})">close</a>
</template>

I use amp-form to fetch data and generate layout with template and there will be form nest occur. So I try to add attribute - "form" to avoid nest.

Paul

meistudioli on 12 Jul 2018

You must use <amp-form>, and your <template> tags must be direct children of amp-form, not inside a <div> placed inside the form. Yeah, a less-than-smart restriction IMO. I've already requested that this template tag restriction be removed so messages can be positioned on the page for a better UX, but so far nothing from the AMP team. Good luck!

88kbbq on 13 Jul 2018

@88kbbq We actually support referencing non-descendant templates via template="<id>" attribute.

Using submit-success and submit-error special marker attributes, publishers can mark any direct child element of form and include a tag inside it, or a template="id_of_other_template" attribute, to render the response in it.

Find the sample code here by searching for "template=" here: https://www.ampproject.org/docs/reference/components/amp-form#success/error-response-rendering

choumx on 13 Jul 2018

👍1

@choumx even though the template tags are outside the form tree, the message is still rendered within the form

cvializ on 16 Jul 2018

Ah, re-read the FR. You could use amp-bind to render an amp-list outside of the form subtree with on="submit-success:AMP.setState({myListSrc: event.response})". Not the most elegant solution though.

choumx on 16 Jul 2018

@choumx :

Do you mean we can also do something like the following code ?

<form id="my_form" on="submit-success:AMP.setState({myListSrc: event.response})" action="xxxx" target="_top" ></form>
<amp-list width="auto" height="100" layout="fixed-heigh" [src]="myListSrc">
    <template type="amp-mustache">
    ...
    ...
    </template>
</amp-list>

meistudioli on 17 Jul 2018

Yes that's what I meant.

choumx on 17 Jul 2018

👍1

Looks great! I'll take a try. Thanks a lot.

meistudioli on 17 Jul 2018

This issue hasn't been updated in awhile. @cvializ Do you have any updates?