<!doctype html>
<
html
amp>
<
head
>
<
title
>Google AMP amp-bind-recaptcha</
title
>
<
meta
charset
=
"utf-8"
>
<
script
async
src
=
</
script
>
<
link
rel
=
"canonical"
href
=
<
meta
name
=
"viewport"
content
=
"width=device-width,minimum-scale=1,initial-scale=1"
>
<
script
async
custom-element
=
"amp-bind"
src
=
</
script
>
<
script
async
custom-element
=
"amp-form"
src
=
</
script
>
<
style
amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</
style
>
<
noscript
>
<
style
amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</
style
>
</
noscript
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
header
>
Type text in the TextBox and Verify
captcha. <
br
>If you don't know the
captcha answer then <
br
>you can
refresh it for new recaptcha
</
header
>
<
amp-state
id
=
"captcha"
>
<
script
type
=
"application/json"
>
{
"state1": {
"result": "9",
"condition": "+",
"captchaCorrect": "5"
},
"state2": {
"result": "3",
"condition": "-",
"captchaCorrect": "7"
},
"state3": {
"result": "12",
"condition": "*",
"captchaCorrect": "3"
}
}
</
script
>
</
amp-state
>
method
=
"get"
target
=
"_top"
>
<
input
name
=
"s"
placeholder
=
"Type Your Name ..."
type
=
"text"
on
=
"input-debounced:AMP.setState({state: 'state1'})"
required>
<
input
[disabled]="!state" disabled
type
=
"text"
name [pattern]="captcha[state].captchaCorrect"
title
=
"AMP recaptcha input"
required>
<
span
="captcha[state].condition">+</
span
>
<
span
>4</
span
>
<
span
>=</
span
>
<
span
="captcha[state].result">10</
span
>
<
span
on
=
"tap:AMP.setState({state: (state == 'state1' ? 'state2' : state == 'state2' ? 'state3': 'state1')})"
role
=
"button"
tabindex
=
"0"
>
<
amp-img
src
=
width
=
"24"
height
=
"24"
>
</
amp-img
>
<
input
type
=
"submit"
value
=
"Submit"
>
</
span
>
</
form
>
</
body
>
</
html
>