AMPでフォームが使えるようになってた

ampページでformとinputbox、buttonといったフォーム関連のタグが使えるようになっていました。

amp-form – Accelerated Mobile Pages Project

このドキュメントではinputタグの利用にもamp-formエクステンションが必要となっていますが、フォームを使用していないinputタグを使っているページはvalidになっていたのでよくわからないところがあります。

javascriptは効かないのでinputタグがそのまま通ってしまうと、不完全な状態のページがキャッシュされることになるので注意が必要かもしれません。

formをAMPに対応させる方法

formをAMPに対応させるには下のスクリプトが必要になります。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

form属性

target:必須 値は_blankか_top

action:method=GETなら必須、method=POSTでは不可

method=GETaction必須、action-xhrオプション(こちらが優先される)

method=POSTaction-xhr必須、action不可

actionで使えるURLはhttpsのみ

AMPに対応するinputフィールド

2016年11月1日現在のAMPで使えるフィールドと使えないフィールドのリスト。

AMPで使えないフィールド

フィールドと属性使用可
<input type=button>×
<input type=file>×
<input type=image>×
<input type=password>×

AMPで使えるinputフィールド

フィールドと属性使用可
上記以外のinput type
textarea
select
option
fieldset
label

<button></button>は使える

スポンサーリンク
336
336

シェアする

フォローする