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>