captcha.pt
1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<img
class="block items-center justify-center mb-1 border-1 border-gray-200 rounded-md"
src="${cstruct}"
style="height: 82px !important"
/>
<span class="block mb-4 font-light text-xs text-gray-400"
><em
>Masukkan text yang ditampilkan di atas pada input Captcha di bawah ini</em
></span
>
<block
tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
"
tal:omit-tag=""
>
<div class="relative mb-2">
<input
type="text"
name="${name}"
value=""
id="${oid}"
placeholder="Captcha"
class="peer p-2.5 block w-full border-gray-200 rounded-md text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 focus:pt-6 focus:pb-2 [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 autofill:pt-6 autofill:pb-2 ${css_class}"
/>
<label
for="${oid}"
class="absolute top-0 start-0 p-2.5 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-gray-500 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-gray-500"
id="req-${oid}"
>Captcha
</label>
<script lang="javascript">
// Convert input to uppercase
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).on('input', function (evt) {
$(this).val(function (_, val) {
return val.toUpperCase();
});
});
});
</script>
</div>
</block>