Consider allowing input[type=button] and input[type=image]

[westonruter]

I'm coming across some WordPress themes that are using input[type=button] and input[type=image]. Are there specific reasons for why are not allowed in AMP?

amphtml/validator/validator-main.protoascii

Lines 4509 to 4517 in a81762b

	attrs: {
	name: "type"
	blacklisted_value_regex: "(^|\\s)(" # Values are space separated.
	"button|"
	"file|"
	"image|"
	"password|"
	")(\\s|$)"
	}

I'm wanting to know if either AMP should allow them or otherwise if the WordPress AMP plugin should try to convert them to <button> and <button><amp-img></amp-img></button> respectively.

[westonruter]

/cc @ampproject/wg-security-privacy per @honeybadgerdontcare in Slack.

[westonruter]

Per @Gregable in the Slack thread:

My memory may be completely corrupt here, but I vaguely recall something about wanting to avoid someone creating a document which looked like a Google login page to be used for Phishing.

It seems that with the dynamic elements that AMP supports these days, that this ship sailed long ago.
Therefore, if my memory is correct, then this can be relaxed in the validator.

The type=password is what makes me think of this, but I really could be wrong.

[dvoytenko]

The issue with <input type="image">, AFAIR, that we can't control its loading time it jumps the layout once loaded. And at this point we can't even apply layout rules to it. Is there a discernable difference between using <input type=image src="..."> vs <input type=submit><amp-img src="..."></input>?

[westonruter]

An input[type=image] can have a width/height, so that would prevent layout shifting.

The only thing that input[type=image] doesn't support is loading=lazy, so that would prevent deferring of the image loading.

Is there a discernable difference between using <input type=image src="..."> vs <input type=submit><amp-img src="..."></input>?

With styling it doesn't appear so.

<code>input[type=image]</code> 👉
<input type="image" src="https://amp.dev/static/img/favicon.png" width="50" height="50">

<button style="border: none; padding: 0; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; -moz-appearance: none;"><amp-img src="https://amp.dev/static/img/favicon.png" width="50" height="50"></amp-img></button>
👈 <code>button &gt; amp-img</code>

So transforming input[type=image] to button > amp-img seems like a viable option if it remains invalid AMP.

[Gregable]

Sounds like the conclusion is:

• Add button / file to the supported list.
• Modify the AMP transformers to rewrite images found in <input src> using the same logic as <img src>.
• After the above has been released, create a new validator rule for <input type=image> that also requires src, width, and height.

It doesn't sound like there is demand for type=password, so for simplicity perhaps continue to disallow it until there is a use case.

cc @ssantosms to be aware of the image rewrite.

cc @ampproject/wg-amp4email for thoughts on which of these should apply to the email spec.

@lannka for thoughts on which of these should apply to the ads spec.

@choumx for thoughts on which of these should apply to the actions spec.

[dvoytenko]

• After the above has been released, create a new validator rule for <input type=image> that also requires src, width, and `height.

Yep. Exactly. As long as we rewrite the src, we can allow <input type=image> with the required width and height values.

[Gregable]

One other FYI. In addition to not supporting loading=lazy, we also lose support for srcset (at least I didn't find any reference to <input srcset>). The AMP cache applies this automagically to images. The cache and transformers will need to simply rewrite src only. I think this is a reasonable tradeoff.

[Gregable]

The cache transforms were filed internally at Google as b/148083520.

[dvoytenko]

@Gregable, is there no srcset in <input type=image>?

[Gregable]

I didn't test it, but quick reference checks didn't see a reference to it, such as here, here, or here.

[dvoytenko]

I suppose it doesn't make me like <input type=image> anymore than I already didn't like it. But I just checked, it's not deprecated, so let's do.