amp-form

通常のformタグは使用できませんが、ごにょっとすることでformタグが使用できるようになります。
ただ、やっぱり複雑な事はできませんので、本当に基本的な簡単なformの構築のみが可能となります。

プラグインの読み込み

amp-formを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<form action="./amp_testwwww.html" method="get" target="_top" >
  <input type="text" value="" name="text" required>
  <input type="text" value="" name="text2" required>
  <input type="submit" value="Subscribe" name="hoge">
</form>

普通のタグとそんな変わらないですね。
ええやんいけるやん！
form要素のプロパティを先行して紹介しますね。

action	通常のフォームと同じく飛び先を指定します。
action-xhr	この指定をする時は画面遷移ではなく、Ajax形式での通信が行われます。
method	通常のフォームと同じく　POST または GET を指定します。
target	_blank または _top を指定します。

それでも未だ許可されていないフォームタグ

改善されるかもしれませんが、2017/08現在では以下のタグが使用不可となっています。

<input type=button>
<input type=file>
<input type=image>
<input type=password>

イベントについて

amp-formで使用できるイベントは以下の通りです。

submit	成功失敗にかかわらず動作します。
submit-success	成功時に動作します。
submit-error	失敗時に動作します。

成功/エラーレスポンスレンダリング

action-xhrを使用していた場合、成功時失敗時で要素を表示したい時があるかと思います。
以下の例のように記述しておけば勝手にやってくれます。

<div  submit-success> 
  <template  type = "amp-mustache">
    成功用表示領域
  </template> 
</div> 
<div  submit-error> 
  <template  type = "amp-mustache">
    エラー用表示領域
  </template> 
</div>