AMPエラー HTML タグに必須属性がありません。- formとJavaScript

2020.09.162021.10.24

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。

カスタムHTMLを使うとよくAMPエラーになりますね。

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。

今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。

特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。

こちらが参考リンクです。

ドキュメント：

Allows you to create forms to submit input fields in an AMP document.

フォームはサーバーへのデータ送信のためのHTML要素なので、method, action, target を指定する必要があるようです。

うーん。ただ、スクリプトの起動ボタンとしては大げさだったかな。

シンプルにリンクで解決してみます。

<a href="javascript:random();">ランダムな暗証番号を作る</a><br />

このようにhref属性でjavascriptを呼び出すことができます。

リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 (JavaScript プログラミング)

コード全体はこちら

<span id="ransuu">表示場所</span>

<script type="text/javascript">
function random() {
var result = "";
for (i=0; i<5; i++) {
var num = Math.floor( Math.random() * 10000) ;
result += ("0000"+num).slice(-4) + "    "; 
}
document.getElementById("ransuu").innerHTML = result; 

}
</script>

目で見てわかる、こんな暗証番号がよく使われている【危険な暗証番号のパターン】

暗証番号に誕生日や生年を使用する人が多いことは、研究でも明らかです。特徴的な数字や2桁の繰り返しパターンも頻繁に使用されており、セキュリティリスクが高いです。安全性を高めるには、ランダムな数字を選ぶことが推奨されます。4桁の時点で何回も挑戦できたら、いずれはわかってしまうよね。まぁ、4桁のPINコードを採用するシステムでは、何度か失敗したら次の試行まで時間が空けられることも多いので、そうそう総当たり攻撃はできないはずですが。11人に1人が誕生日を暗証番号にしている？暗証番号に...

0-1. タグ「a」の属性「href」の URL プロトコル「javascript」が無効です。

しかし、これもだめ……

そもそもAMPページでは独自のjavascriptと使えないんですね。

高速化の主な仕組みの1つに、AMPに対応したWebページのHTMLを事前にGoogleでキャッシュ(Google AMP Cache)しておくところにあります。
（中略）
また、AMP対応のJavaScript以外を許容しない、外部リソースのサイズをあらかじめ固定しておくなど、様々な制約を設けて読み込みや描画の負荷を減らすことも高速化・データ量削減に繋がっています。
https://bulan.co/swings/amp-builds/