HTML रेडियो बटन जो रूपांतरित करते हैं: निश्चित मार्गदर्शिका

रेडियो बटन साधारण दिखते हैं। एक क्लिक, एक विकल्प. हालाँकि, वे UX और पहुंच से समझौता करने के सबसे आसान तरीकों में से एक हैं। मूल इनपुट छिपाएँ,छोड़ें फ़ील्डसेटऔरकिंवदंती, या बहुत आक्रामक तरीके से मान्य करें और आप एक ऐसा फॉर्म भेजेंगे जो कीबो���्ड उपयोगकर्ताओं को भ्रमित करता है, स्क्रीन रीडर्स को निराश करता है, और रूपांतरणों को ख़त्म कर देता है।

यह मार्गदर्शिका आपको दिखाती है कि 2025 में रेडियो कैसे करें: चुनने में तेज, स्कैन करने में आसान, पूरी तरह से पहुंच योग्य और मापने योग्य। हम एक स्वच्छ, अर्थपूर्ण आधार रेखा से शुरुआत करेंगे, फिर आधुनिक सीएसएस पर परत लगाएंगे ताकि रेडियो कीबोर्ड या स्क्रीन-रीडर व्यवहार को त���ड़े बिना कार्ड या खंडित नियंत्रण की तरह दिख सकें।

आप व्यावहारिक सत्यापन पैटर्न देखेंगे जो परेशान नहीं करते हैं, उत्तरदायी लेआउट जो मोबाइल पर लक्ष्य को बड़ा रखते हैं, और उत्पादन स्निपेट जिन्हें आप किसी भी स्टैक में पेस्ट कर सकते हैं। हम एनालिटिक्स, ए/बी आइडिया और फॉर्मस्प्री सेटअप को भी कवर करेंगे ताकि आप तुरंत परिणाम प्राप्त कर सके���।

यह किसके लिए है: डिज़ाइनर, फ्रंट-एंड डेवलपर और विपणक जो दोनों की परवाह करते हैंअभिगम्यताऔररूपांतरण. किसी भारी ढाँचे की आवश्यकता नहीं है, बस ठोस HTML, केंद्रित CSS और थोड़ा प्रगतिशील संवर्द्धन है।

अंत तक, आपको पता चल जाएगा:

• जब रेडियो चयन, चेकबॉक्स, या टॉगल को हराता है
• एक सुलभ रेडियो समूह कैसे बनाएं (फ़ील्डसेट,लेजेंड, लेबलिंग, फोकस)
• इनपुट छुपाए बिना कस्टम "कार्ड" रेडियो को कैसे स्टाइल करें
• HTML बाधा एपीआई (और अच्छी तरह से संदेश) के साथ कैसे सत्यापित करें
• रेडियो को फॉर्मस्प्री से कैसे तारित करें और चयनों को कैसे मापें

टीएल;डीआर

• प्रयोग करेंरेडियोवास्तव मेंके लिए एकएक अच्छी तरह से परिभाषित सेट के भीतर विकल्प (आदर्श रूप से2-6 विकल्प) जो किहोना चाहिए एक बार में दृश्यमान.
• रेडियो को हमेशामें लपेटें <फ़ील्डसेट>+<किंवदंती>, उन्हें दे दोवहीनाम, और प्रत्येक विकल्प को एकबनाएं क्लिक करने योग्य<लेबल>.
• Don’t hide inputs with के साथ इनपुट न छिपाएं प्रदर्शन: कोई नहीं; उन्हें रखोफोकस करने योग्य(जैसे,अपारदर्शिता:0; स्थिति:पूर्ण; इनसेट:0) तोटैब/एरो/स्पेसकाम।
• लक्ष्य बड़े बनायें: कम से कम44×44px, एकके साथ फोकस रिंगवह साफ़ दिखाई दे रहा है.
• Validate with the के साथ सत्यापन करें HTML बाधा एपीआई(आवश्यक,रिपोर्टवैलिडिटी()), फिर संदेशों को बढ़ाएं, दूसरे तरीके से नहीं।
• यदि आपके पास कई विकल्प हैं या वे अपरिचित हैं, तोजोड़ें सहायक पाठप्रत्येक लेबल के अंतर्गत और विचार ���रेंखोजें या समूह बनाएंबजाय।
• मोबाइल पर, स्टैक इनएक कॉलम; चौड़ी स्क्रीन पर,2-3 कॉलमसीएसएस ग्रिड के माध्यम से.
• माप: ट्रैकइंप्रेशन, चयन, और सबमिट, और ए/बी परीक्षणविकल्प क्रमऔरप्रतिलिपि.
• फॉर्मस्प्री के लिए, रखेंमूल पोस्टफ़ॉलबैक के रूप में; जोड़ेंलाओकेवल प्रगतिशील वृद्धि के रूप में।

रेडियो (निर्णय वृक्ष) का उपयोग कब करें

Q1. क्या उपयोगकर्ता बिल्कुल एक विकल्प चुन रहा है?

• नहीं →प्रयोग करेंचेकबॉक्स(0-अनेक) या एटॉगल करें(बाइनरी) या कार्य पर पुनर्विचार करें।
• हाँ →Q2 पर जाएँ.

Q2. क्या विकल्पों को एक नज़र में दिखने की ज़रूरत है?

• हाँ →प्रयोग करेंरेडियो(स्कैनिंग और त्वरित चयन के लिए सर्वोत्तम)।
• नहीं (स्थान तंग है / कई विकल्प हैं)→ एकपर विचार करें चुनें(ड्रॉप डाउन)। यदि विकल्प महत्वपूर्ण हैं और तुलना से लाभ होता है, तो रेडियो को प्राथमिकता दें और लेआउट को फिर से डिज़ाइन करें।

Q3. कितने विकल्प?

• 2-6→ रेडियो आदर्श हैं.
• 7-10→ रेडियो अभी भी ग्रुपिंग याके साथ काम कर सकते हैं दो-स्तंभग्रिड; अन्यथा चयन या खोजने योग्य सूची का उपयोग करें।
• >10→ एकका प्रयोग करें खोज के साथ चयन करेंया एककदमयह पहले सेट को संक्षिप्त करता है।

Q4. क्या विकल्प परस्पर अनन्य अवस्थाएँ हैं?

• हाँ →रेडियो.
• नहीं / संयोजन का कोई मतलब नहीं →चेकबॉक्स.

Q5. क्या चयन से विभिन्न अनुवर्ती प्रश्न उत्पन्न होंगे?

• हाँ →रेडियो अभी भी ठीक हैं. फ़ॉलो-अप दिखाएंसशर्त, लेकिन छिपे हुए फ़ील्ड रखेंटैब क्रम से बाहरऔर एसआर प्रवाह प्रकट होने तक।
• नहीं →सरल रेडियो समूह.

Q6. परिचित बनाम वर्णनात्मक?

• परिचित लेबल(उदाहरण के लिए, "छोटा / मध्यम / बड़ा") → छोटे लेबल पर्याप्त हैं।
• अपरिचित या उच्च दांव(उदाहरण के लिए, "तकनीकी एसईओ बनाम सामग्री एसईओ") → जोड़ेंमाइक्रोकॉपी(एक-पंक्ति विवरण) प्रत्येक लेबल के अंतर्गत।

Q7. मोबाइल-प्रथम?

• हाँ (हमेशा)→ उपयोग करेंएक-स्तंभ स्टैकपर्याप्त रिक्ति और 16-18px टेक्स्ट के साथ।को बढ़ावा दें सबसे से चुने गएशीर्ष की ओर विकल्प.

व्यावहारिक उदाहरण

• आपका स्वरूप: "कौन सी सेवा?" → रेडियो एक चयन को मात देता है क्योंकि उपयोगकर्ताओं को विकल्पों की साथ-साथ तुलना करनी चाहिए। संक्षिप्त सबटेक्स्ट के साथ 3 कार्ड (लिंक बिल्डिंग, एसईओ, वेब डेव) रखें।
• शिपिंग गति: 3-4 परस्पर अनन्य गति → रेडियो (सबटेक्स्ट में मूल्य डेल्टा के साथ)।
• न्यूज़लेटर आवृत्ति: दैनिक/साप्ताहिक/मासिक → रेडियो।
• रुचियाँ (एकाधिक चुन सकते हैं)→ रेडियो नहीं; चेकबॉक्स का उपयोग करें.

एक उचित रेडियो समूह की शारीरिक रचना

सिमेंटिक बेसलाइन को कॉपी-पेस्ट करें (अभी तक कोई फैंसी सीएसएस नहीं)

<फ़ील्डसेट आईडी='सेवा-समूह'>
<किंवदंती>आपको किस सेवा की आवश्यकता है?
एक विकल्प चुनें जो आपके लक्ष्य से सबसे मेल खाता हो।



<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" आईडी = "एसवीसी-लिंक" मूल्य = "लिंक-बिल्डिंग" आवश्यक>
लिंक बिल्डिंग


<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" आईडी = "svc-seo" मान = "seo">
खोज इंजन अनुकूलन


<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" आईडी = "एसवीसी-वेब" मूल्य = "वेब-देव">
वेब डिज़ाइन/विकास




जारी रखने के लिए कृपया एक सेवा चुनें.



<बटन प्रकार='सबमिट'>जारी रखें

प्रत्येक भाग क्यों मायने रखता है

• <फ़ील्डसेट>+<किंवदंती>समूह को स्क्रीन रीडर के लिए एक नाम देता है और सभी के लिए संदर्भ सेट करता है।
• वहीनामइनपुट को परस्पर अनन्य बनाता है।
• क्लिक करने योग्य<लेबल>प्रत्येक इनपुट के आसपासआपको एक बड़ा टैप/क्लिक क्षेत्र (44px+) देता है।
• आवश्यकपहले रेडियो परब्राउज़र को समूह को मूल रूप से सत्यापित करने देता है।
• सहायक पाठ(सेवा-संकेत) औरत्रुटि पाठ(सर्विस-एरर) अलग-अलग हैं इसलिए आप चीजों को इधर-उधर किए बिना त्रुटियों को दिखा/छिपा सकते हैं।
• किसी ARIA भूमिका की आवश्यकता नहीं.देशी रेडियो पहले से ही सही शब्दार्थ को उजागर करते हैं।

प्रयोज्यता के लिए न्यूनतम सीएसएस (देशी लुक, बड़े लक्ष्य, स्पष्ट फोकस)

/* लेआउट और रिक्ति */
.फ़ील्ड लेबल {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
गैप: .6रेम;
पैडिंग: .65रेम .8रेम;      /* बड़ा टैप लक्ष्य */
सीमा-त्रिज्या: .6rem;
कर्सर: सूचक;
}

/* कीबोर्ड फोकस: इनपुट फोकस होने पर पूरे लेबल को हाइलाइट करें */
.फ़ील्ड लेबल:है(इनपुट:फ़ोकस-विज़िबल) {
रूपरेखा: 3px ठोस #3b82f6;
रूपरेखा-ऑफ़सेट: 2px;
}

/* चयनित स्थिति (वैकल्पिक, मूल बिंदु अभी भी दिखता है) */
.फ़ील्ड लेबल:है(इनपुट:चेक किया गया) {
पृष्ठभूमि: #f1f5ff;
}

/* त्रुटि पाठ */
.त्रुटि {रंग: #b91c1c; मार्जिन-टॉप: .5rem; फ़ॉन्ट-आकार: .9rem; }

युक्ति::है()वास्तविक इनपुट को छिपाए बिना आपको "पूरे कार्ड पर फोकस रिंग" देता है। यदि कोई पुराना ब्राउज़र इसका समर्थन नहीं करता है, तब भी उपयोगकर्ताओं को रेडियो पर ही मूल फोकस रिंग मिलती है।

सौम्य, सुलभ सत्यापन (पहले ब्राउज़र का उपयोग करता है)

ब्राउज़र को "आपको एक चुनना होगा" भाग को संभालने दें, फिर यदि आवश्यक हो तो अपनी इनलाइन त्रुटि दिखाएं।

स्थिरांक प्रपत्र = document.getElementById('उद्धरण-प्रपत्र');
स्थिरांक समूह = document.getElementById('सेवा-समूह');
स्थिरांक त्रुटि = document.getEementById('सेवा-त्रुटि');

form.addEventListener('submit', (e) => {
// ट्रिगर मूल सत्यापन यूआई (काम करता है क्योंकि पहले रेडियो में 'आवश्यक' है)
यदि (!form.reportValidity()) {
// वैकल्पिक: एक अनुकूल इनलाइन त्रुटि भी सामने आती है
error.hidden = false;
Group.setAttribute('aria-invalid', 'true');
e.preventDefault();
} else {
. error.hidden = true;
.
जिस व्यवहार की आपको अपेक्षा करनी चाहिए (और परीक्षण करें):
कीबोर्ड:

समूह में प्रवेश करने के लिए एक बार टैब करें; उपयोग

• तीर कुंजीहिलना डुलना;अंतरिक्षचयन करता है.स्क्रीन रीडर:किंवदंती को समूह लेबल के रूप में पढ़ा जाता है; प्रत्येक विकल्प की घोषणा "चयनित/चयनित नहीं" स्थिति के साथ की जाती है।
• स्पर्श करें:लेबल को टैप करने से रेडियो चालू हो जाता है (लेबल रैपिंग के लिए धन्यवाद)।
• कस्टम-स्टाइल वाले "कार्ड" रेडियो (पहुंच-क्ष���ता को तोड़े बिना)HTML को कॉपी-पेस्ट करें

Custom-Styled “Card” Radios (without breaking accessibility)

Copy-paste HTML

<फ़ील्डसेट>
<लीजेंड>एक योजना चुनें
एक विकल्प चुनें। आप कभी भी बदल सकते हैं.



<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "योजना" मूल्य = "स्टार्टर" आवश्यक>
स्टार्टर
छोटी साइटों के लिए अच्छा


<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "योजना" मूल्य = "विकास">
विकास
सर्वाधिक लोकप्रिय


<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "योजना" मूल्य = "प्रो">
प्रो
उन्नत सुविधाएं



जारी रखने के लिए एक का चयन करें।

न्यूनतम, मजबूत सीएसएस

:रूट{
--ब्रांड:#0b5cff; --रिंग: आरजीबीए(11,92,255,.35);
--बॉर्डर:#e5e7eb; --बीजी:#एफएफ; --म्यूटेड:#6बी7280;
--त्रिज्या:14px;
}

/* ग्रिड */
.कार्ड-समूह{
प्रदर्शन:ग्रिड; गैप:16px;
ग्रिड-टेम्पलेट-कॉलम: दोहराएँ(3, न्यूनतम अधिकतम(0,1fr));
}
@मीडिया (अधिकतम-चौड़ाई:900px){ .कार्ड-समूह{ ग्रिड-टेम्पलेट-कॉलम:1fr 1fr; } }
@मीडिया (अधिकतम-चौड़ाई:640px){ .कार्ड-समूह{ग्रिड-टेम्पलेट-कॉलम:1fr; } }

/* कार्ड लेबल */
.कार्ड{
स्थिति:रिश्तेदार;
प्रदर्शन:ग्रिड; स्थान-वस्तुएँ:केंद्र; पाठ-संरेखण:केंद्र;
गैप: 6px; पैडिंग:18पीएक्स;
बॉर्डर:1px सॉलिड var(--बॉर्डर); सीमा-त्रिज्या:var(--त्रिज्या);
पृष्ठभूमि:var(--bg);
कर्सर: सूचक; उपयोग��र्ता-चयन: कोई नहीं;
संक्रमण: बॉक्स-छाया .15s, सीमा-रंग .15s, परिवर्तन .02s;
}
.कार्ड: होवर {बॉक्स-छाया: 0 8px 20px rgba(0,0,0,.06); }

/* मूल इनपुट को फोकस योग्य रखें: कोई डिस्प्ले नहीं: कोई नहीं */
.कार्ड इनपुट{
स्थिति: पूर्ण; इनसेट:0; अपारदर्शिता:0;
}

/* पूरे कार्ड पर कीबोर्ड फोकस रिंग */
.कार्ड:है(इनपुट:फोकस-विज़िबल){
बॉक्स-छाया:0 0 0 3px var(--रिंग);
बॉर्डर-रंग: var(--ब्रांड);
}

/* चयनित राज्य */
.कार्ड:है(इनपुट:चेक किया गया){
बॉर्डर-रंग: var(--ब्रांड);
बॉक्स-छाया:0 0 0 3px var(--रिंग);
}

/* सामग्री */
.कार्ड-शीर्षक { फ़ॉन्ट-वजन:700; रंग:#111; }
.कार्ड-उप{फ़ॉन्ट-आकार:14px; रंग:var(--म्यूटेड); }

/* त्रुटि पाठ */
.त्रुटि{ रंग:#b91c1c; मार्जिन-टॉप:.5रेम; फ़ॉन्ट-आकार:.9rem; }

व्यवहार नोट्स (यह पैटर्न क्यों काम करता है)

• नहींप्रदर्शन: कोई नहींइनपुट पर → कीबोर्ड उपयोगकर्ता टैब इन कर सकते हैं;तीर कुंजीस्थानांतरण चयन;अंतरिक्षचयन करता है.
• पूरा कार्ड क्लिक करने योग्य है क्योंकि इनपुटके अंदर है लेबल.
• :है()आइये स्टाइल करेंफोकसऔरचेक किया गयाARIA हैक के बिना मूल कार्ड पर स्थितियाँ।
• रिस्पॉन्सिव ग्रिडदेता है 1-3 कॉलमखुद ब खुद; स्पर्श लक्ष्य बड़े रहें.

वैकल्पिक: सौम्य सत्यापन (मूल पहले)

स्थिरांक प्रपत्र = document.getElementById('योजना');
स्थिरांक त्रुटि = document.getElementById('योजना-त्रुटि');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) {// पहले रेडियो पर 'आवश्यक' का उपयोग करता है
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

सत्यापन रणनीतियाँ जो परेशान नहीं करतीं

महान सत्यापन तब तक अदृश्य है जब तक इसक��� आवश्यकता न हो। यहां एक रेडियो-विशिष्ट दृष्टिकोण है जो उपयोगकर्ताओं के लिए तेज़, सुलभ और सुखदायक है।

सिद्धांत

• पहले मूलनिवासी.HTML को यह संभालने दें कि "एक को अवश्य चुना जाना चाहिए।"
• त्रुटियों को टाले��.जारी रखने का प्रयास करने से पहले उपयोगकर्ताओं पर चिल्लाएं नहीं।
• समस्या की ओर इंगित करें.त्रुटियों की घोषणा करें, चतुराई से फोकस बढ़ाएं और कॉपी को छोटा रखें।
• परिवर्तन पर स्पष्ट.जैसे ही कोई वैध विकल्प चुन लिया जाए, त्रुटि हटा दें।

बेसलाइन (केवल मूल)

केवल HTML हीके साथ नियम लागू कर सकता है आवश्यकसमूह में एक रेडियो पर.

<किंवदंती>आपको किस सेवा की आवश्यकता है?
एक विकल्प चुनें।


<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "लिंक" आवश्यक>
लिंक बिल्डिंग

<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "seo">
खोज इंजन अनुकूलन

<लेबल>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "वेब">
वेब डिज़ाइन/विकास

यह आपको पहले से ही देता है: कीबोर्ड तीर, चयन करने के लिए स्थान, और ब्राउज़र-स्तरीय सत्यापन।

अनुकूल इनलाइन त्रुटियाँ (प्रगतिशील वृद्धि)

ब्राउज़र का पॉपअप बंद करें और इनलाइन मैसेजिंग को संभालें ताकि यह आपके डिज़ाइन से मेल खाए।

HTML (त्रुटि क्षेत्र जोड़ें)

कृपया एक विकल्प चुनें।


<बटन प्रकार='सबमिट'>जारी रखें

सीएसएस (सरल शैली)

.त्रुटि {रंग:#b91c1c; मार्जिन-टॉप:.5रेम; फ़ॉन्ट-आकार:.9rem; }

जेएस (त्रुट��यों को टालें, ठीक से घोषणा करें)

स्थिरांक प्रपत्र = document.getElementById('उद्धरण');
स्थिरांक समूह = document.getElementById('svc');
const err = document.getElementById('svc-err');
स्थिरांक रेडियो = form.querySelectorAll('input[name='service']');

चलो प्रयास किया = गलत; // उपयोगकर्ता द्वारा जारी रखने का प्रयास करने के बाद ही त्रुटियां दिखाएं

फ़ंक्शन में चयन() {
है वापसी [...रेडियो].some(r => r.checked);
}

फ़ंक्शन showError(msg='कृपया एक विकल्प चुनें।') {
err.textContent = संदेश;
ग़लती.छिपा हुआ = ग़लत;
समूह.सेटएट्रिब्यूट('एरिया-अमान्य', 'सही');
//वर्णन में त्रुटि जोड़ें ताकि एसआर इसकी अगली घोषणा करें
समूह.सेटएट्रिब्यूट('एरिया-वर्णितबी', 'एसवीसी-संकेत एसवीसी-इर्र');
}

फ़ंक्शन क्लियरएरर() {
ग़लती.छिपा हुआ = सत्य;
Group.removeAttribute('aria-invalid');
समूह.सेटएट्रिब्यूट('एरिया-वर्णितबी', 'एसवीसी-संकेत');
}

form.addEventListener('submit', (e) => {
प्रयास = सत्य;
यद�� (!hasSelection()) {
e.preventDefault();
showError();
// समूह को दृश्य में लाएं और पहले रेडियो पर ध्यान केंद्रित करें
Radios[0].focus();
Group.scrollIntoView({ व्यवहार: 'सुचारू', ब्लॉक: 'केंद्र' });
} अन्यथा {
क्लियरएरर();
}
});

// जल्दी परेशान मत हो; एक बार जब वे कुछ चुन लें तो स्पष्ट हो जाएं
Radios.forEach(r => {
r.addEventListener('change', () => {
यदि (प्रयास किया गया) ClearError();
});
});

यह क्यों काम करता है

• कोई ब्राउज़र टूलटिप बुलबुले नहीं; उपयोगकर्ताओं को त्रुटियाँ दिखाई देती हैंइनलाइनसमूह के बगल में.
• स्क्रीन प��ठकसुनते हैं किंवदंती, फिरत्रुटि, धन्यवादaria-वर्णितद्वारा.
• त्रुटियाँ केवलदिखाई देती हैं के बादएक सबमिट प्रयास (या ठीक करने के लिए लौटने पर)।

सौम्य प्रति-चरण सत्यापन (बहु-चरण फ़ॉर्म)

यदि आप "अगला" बटन से गेट करते हैं, तो बस उस चरण को मान्य करें।

document.getElementById('nextBtn').addEventListener('click', () => {
if (!hasSelection()) {
showError();
} else {
ClearError();
// अगले चरण पर आगे बढ़ें...
}
});

बाधा एपीआई के साथ कस्टम संदेश (वैकल्पिक)

यदि आप ब्राउज़र के वैधता मॉडल को रखना पसंद करते हैं, तोपर एक कस्टम संदेश सेट करें प्रथमसमूह में रेडियो.

कॉन्स्ट फ़र्स्टरेडियो = रेडियो[0];
form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('कृपया एक विकल्प चुनें।');
// ट्रिगर मूल UI; या form.reportValidity() को कॉल करें
e.preventDefault();
form.reportValidity();
} else {
फर्स्टरेडियो.सेटकस्टमवैलिडिटी('');
जब आप मूल "बबल" और अपना स्वयं का टेक्स्ट चाहते हैं तो इसका उपयोग करें, अन्यथा सुसंगत यूआई के लिए उपरोक्त इनलाइन विधि पर टिके रहें।
त्रुटि सारांश (लंबे फॉर्म के लिए)

यदि आपका फॉर्म लंबा है, तो

जोड़ें शीर्ष सारांश

जो समस्या क्षेत्र से जुड़ता है।

योग.छिपा हुआ = असत्य;
sum.querySelector('a').focus(); // एसआर अलर्ट की घोषणा करते हैं
}
सर्वर-साइड और नेटवर्क फ़ॉलबैक
क्लाइंट-साइड सत्यापन UX में सुधार करता है, लेकिन

सदैव

सर्वर पर (या अपनी सबमिशन सेवा द्वारा) भी मान्य करें। यदि सबमिशन विफल हो जाता है, तो पृष्ठ को इस प्रकार वापस लौटाएँ:always validate on the server (or by your submission service) too. If submission fails, return the page with:

• पिछलाचयन जारी रहा, और
• The वही इनलाइन त्रुटिसमूह के बगल में.

फॉर्मस्प्री इंटीग्रेशन (प्रगतिशील संवर्धन)

जावास्क्रिप्ट विफल होने पर भी रेडियो को कार्यशील बनाएं, फिर बेहतर धन्यवाद और बेहतर विश्लेषण के लिए इसे बेहतर बनाएं।

मूल HTML (हमेशा काम करता है)

<रूप
आईडी='उद्धरण'
कार्रवाई = "https://formspree.io/f/your_form_id"
विधि='पोस्ट'
>
<फ़ील्डसेट>
<किंवदंती>आपको किस सेवा की आवश्यकता है?
एक विकल्प चुनें।


<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "लिंक-बिल्डिंग" आवश्यक>
लिंक बिल्डिंग
उच्च-गुणवत्ता वाले बैकलिंक अर्जित करें।


<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "seo">
खोज इंजन अनुकूलन
रैंकिंग और ट्रैफ़िक बढ़ाएं।


<लेबल वर्ग='कार्ड'>
<इनपुट प्रकार = "रेडियो" नाम = "सेवा" मान = "वेब-देव">
वेब डिज़ाइन/विकास
तेज, मोबाइल-प्रथम साइटें।



<लेबल>
पूरा नाम
<इनपुट प्रकार = "पाठ" नाम = "नाम" स्वत: पूर्ण = "नाम" आवश्यक>


<लेबल>
ईमेल
<इनपुट प्रकार = "ईमेल" नाम = "ईमेल" स्वत: पूर्ण = "ईमेल" आवश्यक>



<इनपुट प्रकार='छिपा हुआ' नाम='_विषय' मूल्य='संपर्क फ़ॉर्म से नई लीड'>


<इनपुट प्रकार = "टे���्स्ट" नाम = "कंपनी" टैबइंडेक्स = "-1" स्वत: पूर्ण = "बंद" शैली = "स्थिति: पूर्ण; बाएं: -9999पीएक्स" एरिया-हिडन = "सही">

<बटन प्रकार='सबमिट करें'>मेरा निःशुल्क प्रस्ताव प्राप्त करें


धन्यवाद! हम शीघ्र ही संपर्क करेंगे।

यह आपको क्या देता है:

• जेएस ऑफ के साथ काम करता है (एसईओ, विश्वसनीयता के लिए अच्छा)।
• ब्राउज़र हैंडल करता है "एक को चुना जाना चाहिए" (|| आवश्यकपहले रेडियो पर)।फॉर्मस्प्री प्राप्त करता है
• सेवा,नाम,ईमेल, और_विषय.जेएस एन्हांसमेंट (अच्छा यूएक्स, बेहतर ट्रैकिंग)

सबमिट को रोकें, सत्यापित करें,

के साथ भेजें लाओ, और एक इनलाइन धन्यवाद (या रीडायरेक्ट) दिखाएं।<स्क्रिप्ट>

(कार्य() संदर्भ
. फ़ंक्शन एपेंडमेटा(एफडी){
. कास्ट यूआरएल = नया यूआरएल(स्थान.एचआरएफ);
});
fd.append('page_url', location.href);
if (document.referrer) fd.append('referrer', document.referrer);

}
form.addEventListener('submit', async (e) => {
// Keep native fallback if JS fails
e.preventDefault();
// Use native validity (includes radio required)
if (!form.reportValidity()) return;
const fd = new FormData(form);
// Don’t send honeypot if filled (treat as spam)
if (fd.get('company')) return; // silently drop bots
appendMeta(fd);

submitBtn.disabled = true;
const original = submitBtn.textContent;
submitBtn.textContent = 'Submitting…';

okMsg.hidden = true; errMsg.hidden = true;
try{

const res = await fetch(form.action, {
method: 'POST',
body: fd,
headers: { 'Accept': 'application/json' }

});
if(res.ok){
form.reset(); okMsg.hidden = false; // वैकल्पिक: अग्नि विश्लेषण
    okMsg.hidden = true; errMsg.hidden = true;

    try{
      const res = await fetch(form.action, {
        method: 'POST',
        body: fd,
        headers: { 'Accept': 'application/json' }
      });

      if(res.ok){
        form.reset();
        okMsg.hidden = false;

        // Optional: fire analytics
यदि (window.gtag) gtag('event','generate_lead',{method:'formspree', service: fd.get('service')});

//वैकल्पिक: सफलता के बाद पुनर्निर्देशित करें
// सेटटाइमआउट(()=> लोकेशन.href = '/धन्यवाद/', 1200);
}अन्यथा {
errMsg.hidden = गलत;
}
} पकड़ो {
errMsg.hidden = गलत;
} अंततः {
सबमिटबीटीएन.अक्षम = गलत;
सबमिटBtn.textContent = मूल;
}
});
})();

नोट्स

• सेटस्वीकार करें: एप्लिकेशन/जेएसओएनइसलिए फॉर्मस्प्री JSON लौटाता है और आप सफलता/असफलता का निर्णय स्पष्ट रूप से कर सकते हैं।
• प्रयोग करेंform.reportValidity()इसलिए ब्राउज़र आपके भेजने से पहले रेडियो चयन और ईमेल प्रारूप लागू करता है।
• मूल निवासी रखेंकार्रवाई/विधिइसलिए फॉर्म अभी भी JS के बिना काम करता है।

रूपांतरणों को नुकसान पहुंचाए बिना स्पैम नियंत्रण

• हनीपॉट(ऊपर शामिल) शून्य घर्षण के साथ कई बॉट्स को पकड़ता है।
• समय: एक छिपा हुआ जोड़ेंप्रारंभ_पर_|| जब पेज लोड होता है; सबमिशन को 2 सेकंड से भी अधिक तेजी से अनदेखा करें।सामग्री संकेत
• : यदि आप बार-बार जंक मान देखते हैं, तो उन्हें अपने फॉर्मस्प्री नियमों या पोस्ट-प्रोसेसिंग में फ़िल्टर करें।<इनपुट प्रकार = "छिपा हुआ" नाम = "started_at" id = "started_at">

<स्क्रिप्ट>
document.getElementById('started_at').value = Date.now();

// भेजने से पहले सबमिट हैंडलर में:

स्थिरांक प्रारंभ = संख्या(fd.get('started_at'));
यदि (Date.now() - प्रारंभ <2000) वापसी; // एक बॉट जैसा दिखता है
विषय पंक्तियाँ जो रेडियो विकल्प को दर्शाती हैं (स्वच्छ इनबॉक्स)

आप दर्जी कर सकते हैं

_विषयचयनित रेडियो से:स्थिरांक सेवा = fd.get('सेवा'); // जैसे, "एसईओ"

fd.set('_subject', `संपर्क फ़ॉर्म से नई ${सेवा} लीड`);
बचने के लिए सामान्य नुकसान

Common pitfalls to avoid

• के साथ रेडियो छिपाना प्रदर्शन: कोई नहीं.प्रयोग करेंअपारदर्शिता:0; स्थिति: पूर्ण; इनसेट:0लेबल के अंदर ताकि कीबोर्ड अभी भी काम करें।भूल जाना
• फ़ील्डसेट/किंवदंती.स्क्रीन रीडर संदर्भ के लिए उन पर भरोसा करते हैं।जल्दी अति-सत्यापन।
• सबमिट/नेक्स्ट के बाद त्रुटियाँ दिखाएँ, फिर जैसे ही उपयोगकर्ता समूह को ठीक कर दे, साफ़ कर दें।संदर्भ को कैप्चर नहीं करना.
• जोड़ेंपेज_यूआरएल,सन्दर्भदाता, और UTM फ़ील्ड, आप बाद में स्वयं को धन्यवाद देंगे।अंतर्राष्ट्रीयकरण और समावेशिता

भाषा, लेबल और स्वर

पेज का उपयोग करें

• लैंग(और प्रति-लोकेल पेज स्विच करें): … लेबल छोटे और
• रखें वर्णनात्मक, संस्कृति-विशिष्ट शब्दजाल से बचें।पसंद करें
• तटस्थधारणाओं पर वाक्यांश ("एक योजना चुनें") ("आपका बजट क्या है?")।स्थानीयकरण
• त्रुटियाँऔरसहायक पाठhelper textद्वारा कुंजीबद्ध एक सरल शब्दकोश के साथ document.documentElement.lang.स्थिरांक i18n = {

en: { चुनें: 'कृपया एक विकल्प चुनें।' },
तों: {चुनें: 'एलिगे एक विकल्प, पोर एहसान।' },
ar: { चुनें: 'يُرجى اختيار خيار واحد.' }
};
स्थिरांक t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('choose');
लंबे लेबल और मल्टीलाइन विकल्प

चलो लेबल

• लपेटो; महत्वपूर्ण शब्दों को कभी भी छोटा न करें।टेक्स्ट रैप होने पर भी हिट क्षेत्र को बड़ा रखें:
• पर पैडिंग का उपयोग करें लेबल, सिर्फ इनपुट नहीं।.कार्ड {इनलाइन-आकार: 100%; पैडिंग: 16px; }

.कार्ड .कार्ड-शीर्षक {फ़ॉन्ट-वजन: 700; लाइन-ऊंचाई: 1.25; }
.कार्ड .कार्ड-उप {फ़ॉन्ट-आकार: 14px; लाइन-ऊंचाई: 1.4; }
दाएं से बाएं (आरटीएल) समर्थन

सीएसएस का प्रयोग करें

तार्किक गुणऔर:dir()इसलिए आपको अलग-अलग शैलियों की आवश्यकता नहीं है।/* रिक्ति जो आरटीएल में स्वचालित रूप से फ़्लिप होती है */

.कार्ड {पैडिंग-इनलाइन: 16पीएक्स; पैडिंग-ब्लॉक: 16px; }
/* फोकस रिंग जो दिशा का सम्मान करती है */

.कार्ड:है(इनपुट:फोकस-विज़िबल) {
रूपरेखा: 3px ठोस var(--रिंग);
रूपरेखा-ऑफ़सेट: 2px;
}
/* वैकल्पिक: दिशा-विशिष्ट बदलाव */

:dir(rtl) .card-group {दिशा: rtl; }
ARIA से परे पहुंच

सुनिश्चित करें

• कंट्रास्ट ≥ 4.5:1लेबल और फोकस स्थिति के लिए।लक्ष्य स्पर्श करें ≥
• 44×44 पिक्सल(फ़ॉन्ट आकार के बजाय पैडिंग)।केवल रंग के आधार पर स्थिति का संचार न करें; उपयोग
• सीमाएँ, चिह्न, या पाठ.परीक्षण चेकलिस्ट (प्रिंट-अनुकूल)

शब्दार्थ

• : रेडियो अंदर हैंफ़ील्डसेटएक दृश्य के साथकिंवदंती.कीबोर्ड
• : टैब समूह में प्रवेश करता है;तीरकदम;अंतरिक्षचयन करता है.स्क्रीन रीडर्स
• : किंवदंती की घोषणा; प्रत्येक विकल्प चयनित/चयनित नहीं कहता है।फोकस
• :पर दिखाई देने वाली अंगूठी पूरा कार्डwhole card(और मूल इनपुट पर)।
• हिट क्षेत्र: संपूर्ण लेबल क्लिक करने योग्य है; मोबाइल पर काम करता है.
• मान्यता: सबमिट/अगला तक कोई त्रुटि नहीं; परिवर्तन पर त्रुटियाँ स्पष्ट हो जाती हैं।
• प्रतिलिपि: विकल्प छोटे हैं; सहायक पाठ मतभेदों को स्पष्ट करता है।
• लेआउट: फ़ोन पर 1 कॉलम; डेस्कटॉप पर 2-3; कोई अतिप्रवाह क्लिपिंग नहीं.
• i18n: त्रुटियाँ/लेबल स्थानीयकृत; लंबा पाठ सुंदर ढंग से लपेटा गया है; आरटीएल ठीक है.
• एनालिटिक्स: इंप्रेशन के लिए इवेंट, चयन करें, सबमिट करें।
• प्रदर्शन: कोई भारी यूआई कार्य नहीं; न्यूनत��� सीएसएस; कोई लेआउट परिवर्तन नहीं.

प्रदर्शन एवं रखरखाव

• एहसानदेशी इनपुट+ प्रकाश सीएसएस; रेडियो को divs से बदलने से बचें।
• सीएसएस मॉड्यूलर रखें (रंग, त्रिज्या, रिंग के लिए कस्टम गुण)।
• बचेंप्रदर्शन: कोई नहींइनपुट पर; उपयोगअपारदर्शिता:0; स्थिति: पूर्ण; इनसेट:0इसलिए पहुंच बरकरार रहती है.
• गैर-महत���वपूर्ण जेएस को स्थगित करें; जब संभव हो तो संवर्द्धन को ~2-5 केबी से कम रखें।
• प्रयोग करेंकंटेनर प्रश्न(उपलब्ध होने पर) एम्बेडेड प्रपत्रों के लिए जटिल मीडिया ब्रेकप्वाइंट के बजाय।

@कंटेनर (न्यूनतम-चौड़ाई: 680px) {
.कार्ड-समूह {ग्रिड-टेम्पलेट-कॉलम: 1fr 1fr 1fr; }
}

विश्लेषण एवं प्रयोग

इरादे और घर्षण बिंदुओं को ट्रैक करें:

// जब रेडियो समूह दृश्यमान हो जाए तो फायर करें
gtag?.('इवेंट','form_step_view', {चरण: 1, प्रपत्र: 'संपर्क' });

// चयन पर आग
document.querySelectorAll('input[name='service']').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', {group: 'service', value: r.value });
});
});

//सफल सबमिट पर फायर
gtag?.('इवेंट','जेनरेट_लीड', {फॉर्म: 'संपर्क', सेवा: फॉर्म.सर्विस.वैल्यू });

ए/बी परीक्षण:

• विकल्प क्रम(सबसे पहले चुना गया)
• सीटीए कॉपी("मेरा निःशुल्क प्रस्ताव प्राप्त करें" बनाम "मेरा उद्धरण प्राप्त करें")
• सहायक पाठउपस्थिति

विरोधी पैटर्न (ये न करें)

• Hiding inputs with के साथ इनपुट छिपाना प्रदर्शन: कोई नहीं(कीबोर्ड और एसआर को तोड़ता है)।
• गुमफ़ील्डसेट/किंवदंती.
• छोटे हिट क्षेत्र (केवल छोटा बिंदु क्लिक करने योग्य)।
• केवल रंग चयन स्थिति; अदृश्य फोकस.
• मान्य किया जा रहा हैपहलेउपयोगकर्ता आगे बढ़ने का प्रयास करता है.
• रेडियो में 10-20 विकल्प पैक करना; इसके बजाय खोजने योग्य चयन का उपयोग करें।

अंतिम चेकलिस्ट

• फ़ील्डसेट+किंवदंतीवर्तमान
• वहीनाम, अद्वितीयमूल्यएस
• लेबल रैप इनपुट; संपूर्ण कार्ड क्लिक करने योग्य
• फोकस रिंग स्पष्ट रूप से दिखाई दे रही है
• आवश्यकपहले रेडियो पर; सौम्य इनलाइन त्रुटियाँ
• 1-3 कॉलम ग्रिड उत्तरदायी, बड़े स्पर्श लक्ष्य
• स्थानीयकृत तार; तार्किक गुणों के माध्यम से आरटीएल सुरक्षित
• देखने/चयन/सबमिट करने पर विश्लेषण
• सर्वर-साइड सत्यापन क्लाइंट नियमों को प्रतिबिंबित करता है

संसाधन

विवरण एवं लेखन पैटर्न

• HTML मानक -<इनपुट प्रकार='रेडियो'>: मूल शब्दार्थ,द्वारा समूहीकरण नाम, रूप व्यवहार.
• WAI-ARIA संलेखन अभ्यास 1.2 - रेडियो समूह: अपेक्षित कीबोर्ड व्यवहार (समूह में टैब,स्थानांतरित करने के लिए तीर,चयन करने के लिए स्थान), लेबलिंग पैटर्न।
• डब्ल्यूसीएजी 2.2रेडियो के लिए आवश्यक चीज़ें:
  • 2.1.1कीबोर्ड(कीबोर्ड के माध्यम से संचालित होने वाली हर चीज़)
  • 2.4.7फोकस दृश्यमान(स्पष्ट रूप से दिखाई देने वाला फोकस)
  • 2.5.5लक्ष्य आकार(≥44×44px अनुशंसित)
  • 1.4.3कंट्रास्ट (न्यूनतम)

संदर्भ मार्गदर्शिकाएँ

• एमडीएन: रेडियो इनपुट,लेबल,फ़ील्डसेट/किंवदंती, फॉर्म सत्यापन (बाधा सत्यापन एपीआई)।
• GOV.UK डिज़��इन सिस्टम - रेडियो: शब्दों और त्रुटियों पर उत्कृष्ट, युद्ध-परीक्षित मार्गदर्शन।
• समावेशी घटक (हेडन पिकरिंग): व्यावहारिक a11y पैटर्न और समालोचना।

Check out our recent blog on पर हमारा हालिया ब्लॉग देखें Ahrefs पर अतिथि पोस्ट के अवसर कैसे देखें (चरण-दर-चरण मार्गदर्शिका)

परीक्षण एवं टूलींग

• कुल्हाड़ी DevTools(ब्राउज़र एक्सटेंशन) - स्वचालित ए11वाई जांच।
• अभिगम्यता अंतर्दृष्टि- त्वरित निर्देशित परीक्षण।
• प्रकाशस्तंभ- प्रदर्��न + पहुंच संकेत।
• WebAIM कंट्रास्ट चेकर- रंग कंट्रास्ट सत्यापित करें।
• स्क्रीन रीडर्सवास्तविक व्यवहार की जाँच करने के लिए:
  • एनवीडीए(विंडोज़),जबड़े(विंडोज़),वॉयसओवर(मैकओएस/आईओएस),टॉकबैक(एंड्रॉइड)।
• मैनुअल कीबोर्ड पास: समूह में टैब करें → तीर चलते हैं → स्थान का चयन होता है → फोकस रिंग स्पष्ट रहती है।

हमारा देखेंनोशंस मार्केटिंग की समीक्षा

अक्सर पूछे जाने वाले प्रश्न (संक्षिप्त एवं व्यावहारिक)