Kiritiş · molecule
Captcha ramkasi
«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / ! xato / ⟳ «Muddati tugadi». Belgi bosilganda «fx-captcha-verify» hodisasi çiqadi — integratsiya vidjetni .fx-captcha__slot'ga çaqiradi va natijani done(token) yoki fail(matn) bilan qaytaradi. Token yaşirin inputda; tasdiqsiz forma yuborilmaydi. data-expires — tokenning amal muddati (soniya). data-mode="invisible" — körinmas tekşiruv uçun faqat xabar qatori.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | idleloading Tekşirilmoqda…verified ✓ Tasdiqlandierror ! xato matniexpired ⟳ Muddati tugadi | idle |
data-mode | checkboxinvisible körinmas tekşiruv — faqat xabar | checkbox |
data-size | normalcompact tor ustun — brend pastda | normal |
Anatomiya
- root
.fx-captchaşart - check
.fx-captcha__checkixtiyoriy - box
.fx-captcha__boxixtiyoriy - brand
.fx-captcha__brandixtiyoriy - slot
.fx-captcha__slotixtiyoriy - message
.fx-captcha__msgixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Boʻshliq / Enter | Tekşiruvni boşlaydi |
| Tab | Belgi → brend havolalari |
Belgi — role="checkbox" (aria-checked: false / mixed — tekşirilmoqda / true), ildizda aria-busy. Holat matni .fx-captcha__msg içida (aria-live). Tasdiqlangandan keyin belgi aria-disabled. Rang yolğiz emas: ✓, !, ⟳ va matn.
Naqş: WAI-ARIA APG checkbox · rol checkbox
Kod
AI uçun: qaçon işlatiladi
- SMS kod yuboriş, röyxatdan ötiş, parolni tiklaş, oçiq aloqa formasi.
- Bir xil körinişda turli captcha provayderlarini almaştiriş.
- Oddiy rozilik belgisi →
check - SMS orqali tasdiqlaş kodi →
otp - Har formaga captcha qöymang — faqat SMS yuboriş, röyxatdan ötiş, parolni tiklaş kabi suiiste'mol qilinadigan joyga.
- Rasmli «svetoforni toping» captcha'sini asosiy yöl qilmang — köriş qiyin odam uçun tösiq; körinmas tekşiruv yoki audio muqobil bölsin.
- Muddati tugagan tokenni jimgina yubormang — holat «Muddati tugadi» deb aytilsin.
npx foxui add captcha
<form class="fx-card" style="padding:var(--fx-space-6);display:grid;gap:var(--fx-space-4);max-inline-size:26rem" onsubmit="event.preventDefault()">
<label class="fx-field"><span class="fx-label">Telefon</span><input class="fx-input" type="tel" value="+998 90 123 45 67" autocomplete="tel"></label>
<div class="fx-captcha" data-fx-captcha data-name="captcha_token" data-demo data-expires="120">
<button type="button" class="fx-captcha__check"><span class="fx-captcha__box" aria-hidden="true"></span><span>Men robot emasman</span></button>
<span class="fx-captcha__brand"><span>Bot himoyasi</span><a href="#">Maxfiylik · Şartlar</a></span>
<div class="fx-captcha__slot"></div>
<p class="fx-captcha__msg" aria-live="polite"></p>
</div>
<button class="fx-btn" data-variant="primary" type="submit">SMS kod yuboriş</button>
</form>
<div style="display:grid;gap:var(--fx-space-3);margin-block-start:var(--fx-space-4)">
<div class="fx-captcha" data-fx-captcha data-state="verified"><button type="button" class="fx-captcha__check"><span class="fx-captcha__box" aria-hidden="true"></span><span>Men robot emasman</span></button><span class="fx-captcha__brand"><span>Bot himoyasi</span><a href="#">Maxfiylik · Şartlar</a></span><p class="fx-captcha__msg" aria-live="polite"></p></div>
<div class="fx-captcha" data-fx-captcha data-state="error"><button type="button" class="fx-captcha__check"><span class="fx-captcha__box" aria-hidden="true"></span><span>Men robot emasman</span></button><span class="fx-captcha__brand"><span>Bot himoyasi</span><a href="#">Maxfiylik · Şartlar</a></span><p class="fx-captcha__msg" aria-live="polite"></p></div>
<div class="fx-captcha" data-fx-captcha data-state="expired" data-size="compact"><button type="button" class="fx-captcha__check"><span class="fx-captcha__box" aria-hidden="true"></span><span>Men robot emasman</span></button><span class="fx-captcha__brand"><span>Bot himoyasi</span><a href="#">Maxfiylik · Şartlar</a></span><p class="fx-captcha__msg" aria-live="polite"></p></div>
<div class="fx-captcha" data-fx-captcha data-mode="invisible" data-state="loading"><span class="fx-captcha__brand"><span>Sahifa bot himoyasi bilan tekşirilmoqda</span></span><p class="fx-captcha__msg" aria-live="polite"></p></div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-field --fx-bg-subtle --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-duration-pulse --fx-duration-spin --fx-ease-standard --fx-fg-success --fx-font-size-sm --fx-font-size-xs --fx-font-weight-bold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-popover-width --fx-radius-badge --fx-radius-checkbox-ratio --fx-radius-circle --fx-radius-control --fx-size-control-sm --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-error --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary