ปุ่มตัวเลือก HTML ที่แปลงได้: คู่มือฉบับสมบูรณ์

ปุ่มวิทยุดูเรียบง่าย คลิกเดียว หนึ่งทางเลือก อย่างไรก็ตาม สิ่งเหล่านี้ยังเป็นหนึ่งในวิธีที่ง่ายที่สุดในการประนีประนอม UX และการเข้าถึง ซ่อนอินพุตดั้งเดิม ข้ามชุดสนามและตำนานหรือตรวจสอบความถูกต้องมากเกินไป และคุณจะจัดส่งแบบฟอร์มที่สร้างความสับสนให้กับผู้ใช้แป้นพิมพ์ ทำให้โปรแกรมอ่านหน้าจอหงุดหงิด และทำให้ Conversion ตก

คู่มือนี้จะแสดงวิธีการใช้งานวิทยุที่เหมาะสมในปี 2025: เลือกได้รวดเร็ว สแกนง่าย เข้าถึงได้เต็มที่ และวัดผลได้ เราจะเริ่มต้นด้วยพื้นฐานที่ชัดเจนและมีความหมาย จากนั้นเลเยอร์บน CSS สมัยใหม่ เพื่อให้วิทยุสามารถดูเหมือนการ์ดหรือส่วนควบคุมแบบแบ่งส่วนได้โดยไม่ทำลายการทำงานของแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอ

คุณจะเห็นรูปแบบการตรวจสอบที่ใช้งานได้จริงซึ่งไม่จู้จี้จุกจิก เค้าโครงแบบตอบสนองที่ทำให้เป้าหมายใหญ่บนมือถือ และตัวอย่างการใช้งานจริงที่คุณสามารถวางลงในสแต็กใดก็ได้ นอกจากนี้เรายังครอบคลุมถึงการวิเคราะห์ แนวคิด A/B และการตั้งค่า Formspree เพื่อให้คุณสามารถบันทึกผลลัพธ์ได้ทันที

เหมาะสำหรับใคร: นักออกแบบ นักพัฒนาส่วนหน้า และนักการตลาดที่ใส่ใจทั้งสองอย่างการเข้าถึงและการแปลง. ไม่จำเป็นต้องมีเฟรมเวิร์กที่หนักหน่วง แค่ HTML ที่แข็งแกร่ง, CSS ที่เน้น และกา��ปรับปรุงแบบก้าวหน้าเล็กน้อย

ในตอนท้าย คุณจะรู้ว่า:

• เมื่อวิทยุบีทเลือก ช่องทำเครื่องหมาย หรือสลับ
• วิธีสร้างกลุ่มวิทยุที่สามารถเข้าถึงได้ (fieldset,legend, labeling, focus)
• วิธีจัดสไตล์วิทยุ "การ์ด" แบบกำหนดเองโดยไม่ต้องซ่อนอินพุต
• วิธีตรวจสอบกับ HTML Constraint API (และส่งข้อความอย่างดี)
• วิธีเชื่อมต่อวิทยุเข้ากับ Formspree และวัดค่าที่เลือก

TL;DR

• ใช้วิทยุอย่างแน่นอนหนึ่งตัวเลือกภายในชุดที่กำหนดไว้อย่างดี (นึกคิด2–6 ตัวเลือก) ที่ควรเป็นมองเห็นได้ทันที.
• ล้อมวิทยุด้วยเสมอ <ฟิลด์เซ็ต>+<ตำนาน>ให้พวกเขาเหมือนกันชื่อและทำให้แต่ละตัวเลือกเป็นคลิกได้<ฉลาก>.
• อย่าซ่อนอินพุตด้วยจอแสดงผล:ไม่มี; เก็บไว้สามารถโฟกัสได้(เช่นopacity:0; position:absolute; inset:0) ดังนั้นแท็บ/ลูกศร/ช่องว่างงาน.
• ตั้งเป้าหมายให้ใหญ่: อย่างน้อย44×44pxด้วยวงแหวนปรับโฟกัสที่มองเห็นได้ชัดเจน
• ตรวจสอบกับAPI ข้อจำกัด HTML(required,reportValidity()) จากนั้นปรับปรุงข้อความ ไม่ใช่วิธีอื่น
• หากคุณมีตัวเลือกมากมายหรือไม่คุ้นเคย ให้เพิ่มข้อความช่วยเหลือใต้แต่ละป้ายกำกับแล้วพิจารณาค้นหาหรือจัดกลุ่มแทน.
• บนมือถือ ให้ซ้อนกันในหนึ่งคอลัมน์; บนหน้าจอกว้าง2–3 คอลัมน์ผ่านตาราง CSS
• วัด: ติดตามการ���สดงผล การเลือก และส่งและการทดสอบ A/Bลำดับตัวเลือกและคัดลอก.
• สำหรับ Formspree ให้คงโพสต์ดั้งเดิมเป็นทางเลือก; เพิ่มดึงเป็นการเพิ่มประสิทธิภาพแบบก้าวหน้าเท่านั้น

เมื่อใดจึงควรใช้วิทยุ (แผนผังการตัดสินใจ)

ไตรมาสที่ 1 ผู้ใช้เลือกตัวเลือกเดียวเท่านั้นใช่หรือไม่

• ไม่ →ใช้ช่อง���ำเครื่องหมาย(0–หลาย) หรือสลับ(ไบนารี่) หรือคิดใหม่เกี่ยวกับงาน
• ใช่ →ไปที่ไตรมาสที่ 2

ไตรมาสที่ 2 จำเป็นต้องมองเห็นตัวเลือกต่างๆ ได้อย่างรวดเร็วหรือไม่?

• ใช่ →ใช้วิทยุ(ดีที่สุดสำหรับการสแกนและตัวเลือกที่รวดเร็ว)
• ไม่ (พื้นที่แคบ / ตัวเลือกเยอะ)→ พิจารณาเลือก(แบบเลื่อนลง) ห��กตัวเลือกมีความสำคัญและได้รับประโยชน์จากการเปรียบเทียบ ให้เลือกวิทยุและออกแบบเค้าโครงใหม่

ไตรมาสที่ 3 มีกี่ตัวเลือก?

• 2–6→ วิทยุเหมาะอย่างยิ่ง
• 7–10→ วิทยุอาจยังใช้งานไ���้กับการจัดกลุ่มหรือสองคอลัมน์ตาราง; มิฉะนั้นให้ใช้รายการที่เลือกหรือค้นหาได้
• >10→ ใช้เลือกด้วยการค้นหาหรือขั้นตอนซึ่งจะทำให้ชุดแคบลงก่อน

ไตรมาสที่ 4 ตัวเลือกต่างๆ เป็นสถานะที่ไม่เกิดร่วมกันหรือไม่?

• ใช่ →วิทยุ.
• ไม่ / การรวมกันที่สมเหตุสมผล →ช่องทำเครื่องหมาย

คำถามที่ 5 ตัวเลือกจะกระตุ้นให้เกิดคำถามติดตามผลที่แตกต่างกันหรือไม่

• ใช่ →วิทยุก็ยังดีอยู่ แสดงการติดตามผลตามเงื่อนไขแต่เก็บช่องที่ซ่อนไว้ออกจากลำดับแท็บและ SR ไหลจนกระทั่งถูกเปิดเผย
• ไม่ →กลุ่มวิทยุธรรมดา

คำถามที่ 6 คุ้นเคย กับ พรรณนา?

• ป้ายกำกับที่คุ้นเคย(เช่น “เล็ก / กลาง / ใหญ่”) → ป้ายสั้นก็เพียงพอแล้��
• ไม่คุ้นเคยหรือเดิมพันสูง(เช่น “SEO ทางเทคนิคกับ SEO เนื้อหา”) → เพิ่มไมโครสำเนา(คำอธิบายบรรทัดเดียว) ใต้แต่ละป้ายกำกับ

คำถามที่ 7 มือถือมาก่อน?

• ใช่ (เสมอ)→ ใช้สแต็กหนึ่งคอลัมน์ด้วยระยะห่างที่กว้างขวางและข้อความขนาด 16–18px โปรโมตเลือกมากที่สุดตัวเลือกไปทางด้านบน

ตัวอย่างการปฏิบัติ

• แบบฟอร์มของคุณ: “บริการอะไร?” → วิทยุเอาชนะการเลือกได้เนื่องจากผู้ใช้ควรเปรียบเทียบตัวเลือกแบบเคียงข้างกัน เก็บไพ่ 3 ใบ (การสร้างลิงก์, SEO, การพัฒนาเว็บ) พร้อมข้อความย่อยสั้น ๆ
• ความเร็วในการจัดส่ง: 3–4 ความเร็วที่ไม่เกิดร่วมกัน → วิทยุ (พร้อมส่วนต่างราคาในข้อความย่อย)
• ความถี่ของจดหมายข่าว: รายวัน/รายสัปดาห์/รายเดือน → วิทยุ
• ความสนใจ (เลือกได้หลายรายการ)→ ไม่ใช่วิท��ุ ใช้ช่องทำเครื่องหมาย

กายวิภาคของกลุ่มวิทยุที่เหมาะสม

คัดลอกและวางบรรทัดฐานความหมาย (ยังไม่มี CSS แฟนซี)

คุณต้องการบริการใด

เลือกหนึ่งตัวเลือกที่ตรงกับเป้าหมายของคุณมากที่สุด



<ฉลาก>

การสร้างลิงก์


<ฉลาก>
<ประเภทอินพุต = "วิทยุ" name = "บริการ" id = "svc-seo" value = "seo">
การเพิ่มประสิทธิภาพกลไกค้นหา


<ฉลาก>

การออกแบบ / การพัฒนาเว็บไซต์




โปรดเลือกบริการเพื่อดำเนินการต่อ



ดำเนินการต่อ

เหตุใดแต่ละส่วนจึงมีความสำคัญ

• <ฟิลด์เซ็ต>+<ตำนาน>ตั้งชื่อให้กลุ่มสำหรับโปรแกรมอ่านหน้าจอและกำหนดบริบทสำหรับทุกคน
• เหม��อนกันชื่อทำให้อินพุตแยกจากกัน
• คลิกได้<ฉลาก>รอบแต่ละอินพุตให้พื้นที่การแตะ/คลิกขนาดใหญ่แก่คุณ (44px+)
• จำเป็นทางวิทยุชุดแรกให้เบราว์เซอร์ตรวจสอบกลุ่มโดยกำเนิด
• ข้อความช่วยเหลือ(service-hint) และข้อความแสดงข้อผิดพลาด(service-error) แยกจากกัน ดังนั้นคุณจึงสามารถแสดง/ซ่อนข้อผิดพลาดได้โดยไม่ต้องย้ายสิ่งต่างๆ
• ���ม่จำเป็นต้องมีบทบาท ARIAวิทยุพื้นเมืองได้เปิดเผยความหมายที่ถูกต้องแล้ว

CSS ขั้นต่ำสำหรับการใช้งาน (รูปลักษณ์ดั้งเดิม, เป้าหมายใหญ่, โฟกัสที่ชัดเจน)

/* เค้าโครงและการเว้นวรรค */
. ป้ายกำกับฟิลด์ {
จอแสดงผล: ดิ้น;
จัดรายการ: กึ่งกลาง;
ช่องว่าง: .6rem;
ช่องว่างภายใน: .65rem .8rem;      /* เป้าหมายการแตะครั้งใหญ่ */
รัศมีชายแดน: .6rem;
เคอร์เซอร์: ตัวชี้;
}

/* โฟกัสของแป้นพิมพ์: ไฮไลต์ทั้งป้ายกำกับเมื่อโฟกัสอินพุตแล้ว */
.field label:has(input:focus-visible) {
โครงร่าง: 3px ทึบ #3b82f6;
โครงร่างออฟเซ็ต: 2px;
}

/* สถานะที่เลือก (เป็นทางเลือก ยังคงแสดงจุดดั้งเดิม) */
.field label:has(input:checked) {
พื้นหลัง: #f1f5ff;
}

/* ข้อความแสดงข้อผิดพลาด */
.error { สี: #b91c1c; ขอบด้านบน: .5rem; ขนาดตัวอักษร: .9rem; }

เคล็ดลับ::มี()ให้ "วงแหวนโฟกัสบนการ์ดทั้งหมด" แก่คุณโดยไม่ต้องซ่อนอินพุตจริง หากเบราว์เซอร์รุ่นเก่าไม่รองรับ ผู้ใช้จะยังคงได้รับวงแหวนโฟกัสดั้งเดิมจากวิทยุ

การตรวจสอบที่ละเอียดอ่อนและเข้าถึงได้ (ใช้เบราว์เซอร์ก่อน)

ปล่อยให้เบราว์เซอร์จัดการส่วนที่ “คุณต้อง���ลือกอย่างใดอย่างหนึ่ง” จากนั้นแสดงข้อผิดพลาดอินไลน์ของคุณหากจำเป็น

const form = document.getElementById('quote-form');
กลุ่ม const = document.getElementById ('กลุ่มบริการ');
ข้อผิดพลาด const = document.getEementById('บริการ-ข้อผิดพลาด');

form.addEventListener('submit', (e) => {
// Trigger Native validation UI (ทำงานได้เพราะวิทยุตัวแรกมี `required`)
if (!form.reportValidity()) {
// ตัวเลือก: แสดงข้อผิดพลาดแบบอินไลน์ที่เป็นมิตรด้วย
error.hidden = false;
group.setAttribute('aria-invalid', 'true');
e.preventDefault();
} else {
. error.hidden = true;
. group.removeAttribute('aria-invalid');
.
พฤติกรรมที่คุณควรคาดหวัง (และทดสอบ):

แป้นพิมพ์:

• แทปหนึ่งครั้งเพื่อเข้ากลุ่ม ใช้ปุ่มลูกศรที่จะย้าย;อวกาศเลือกโปรแกรมอ่านหน้าจอ:
• คำอธิบายจะอ่านเป็นป้ายกำกับกลุ่ม แต่ละตัวเลือกจะถูกประกาศด้วยสถานะ "เลือกแล้ว/ไม่ได้เลือก"แตะ:
• การแตะป้ายกำกับจะเป็นการสลับวิทยุ (ด้วยการห่อฉลาก)วิทยุ "การ์ด" สไตล์ที่กำหนดเอง (โดยไม่ทำลายการเข้าถึง)

คัดลอกและวาง HTML

Copy-paste HTML

<ฟิลด์เซ็ต>
เลือกแผน

เลือกหนึ่งตัวเลือก คุณสามารถเปลี่ยนแปลงได้ตลอดเวลา





เริ่มต้น
เหมาะสำหรับไซต์ขนาดเล็ก




การเติบโต
เป็นที่นิยมที่สุด



<ประเภทอินพุต = "วิทยุ" ชื่อ = "แผน" ค่า = "โปร">
โปร
คุณลักษณะขั้นสูง

CSS ขั้นต่ำและมีประสิทธิภาพ

:root{
--แบรนด์:#0b5cff; --แหวน: RGBA(11,92,255,.35);
--border:#e5e7eb; --bg:#fff; --ปิดเสียง:#6b7280;
--รัศมี:14px;
}

/* ตาราง */
.card-group{
จอแสดงผล: ตาราง; ช่องว่าง:16px;
ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, minmax (0,1fr));
}
@media (ความกว้างสูงสุด:900px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (ความกว้างสูงสุด:640px){ .card-group{ grid-template-columns:1fr; } }

/* ป้ายการ์ด */
.การ์ด{
ตำแหน่ง:ญาติ;
จอแสดงผล: ตาราง; รายการสถานที่: ศูนย์; การจัดตำแหน่งข้อความ: กึ่งกลาง;
ช่องว่าง:6px; ช่องว่างภายใน:18px;
เส้นขอบ: var ทึบ 1px (-- เส้นขอบ); รัศมีเส้นขอบ:var(--รัศมี);
พื้นหลัง:var(--bg);
เคอร์เซอร์:ตัวชี้; ผู้ใช้เลือก: ไม่มี;
การเปลี่ยนแปลง: กล่องเงา .15s, ขอบสี .15s, แปลง .02s;
}
.card:โฮเวอร์{ กล่องเงา:0 8px 20px rgba(0,0,0,.06); }

/* ทำให้อินพุตดั้งเดิมสามารถโฟกัสได้: no display:none */
.อินพุตการ์ด{
ตำแหน่ง:แน่นอน; สิ่งที่ใส่เข้าไป:0; ความทึบ:0;
}

/* วงแหวนปรับโฟกัสของแป้นพิมพ์บนการ์ดทั้งหมด */
.card:has(input:focus-visible){
กล่องเงา: 0 0 0 3px var (-- แหวน);
สีขอบ: var(--brand);
}

/* สถานะที่เลือก */
.card:has(input:ตรวจสอบแล้ว){
สีขอบ: var(--brand);
กล่องเงา: 0 0 0 3px var (-- แหวน);
}

/* เนื้อหา */
.card-title {font-weight:700; สี:#111; }
.card-sub{ ขนาดตัวอักษร:14px; สี:var(--ปิดเสีย���); }

/* ข้อความแสดงข้อผิดพลาด */
.ข้อผิดพลาด { สี:#b91c1c; ขอบบน:.5rem; ขนาดตัวอักษร:.9rem; }

บันทึกพฤติกรรม (เหตุใดรูปแบบนี้จึงใช้งานได้)

• ไม่จอแสดงผล:ไม่มีในการป้อนข้อมูล → ผู้ใช้แป้นพิมพ์สามารถ Tab ใน;ปุ่มลูกศรย้ายการเลือก;อวกาศเลือก
• สามารถคลิกการ์ดทั้งหมดได้เนื่องจากอินพุตอยู่ภายในป้ายกำกับ.
• :มี()ให้เราจัดสไตล์โฟกัสและเลือกแล้วระบุบนการ์ดหลักโดยไม่มีการแฮ็ก ARIA
• ตารางตอบสนองให้1–3 คอลัมน์โดยอัตโนมัติ; เป้าหมายการสัมผัสยังคงมีขนาดใหญ่

ไม่บังคับ: การตรวจสอบแบบค่อยเป็นค่อยไป (ดั้งเดิมก่อน)

แบบฟอร์ม const = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // ใช้ `required` ในวิทยุตัวแรก
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

กลยุทธ์การตรวจสอบที่ไม่น่ารำคาญ

การตรวจสอบความถูกต้องที่ดีจะมองไม่เห็นจนกว่าจะจำเป็น ต่อไปนี้เป็นแนวทางเฉพาะทางวิทยุที่รวดเร็ว เข้าถึงได้ และผ่อนคลายสำหรับผู้ใช้

หลักการ

• พื้นเมืองก่อนให้ HTML จัดการ "ต้องเลือกอย่างใดอย่างหนึ่ง"
• เลื่อนข้อผิดพลาดอย่าตะโกนใส่ผู้ใช้ก่อนที่พวกเขาจะพยายามดำเนินการต่อ
• ชี้ไปที่ปัญหา.ประกาศข้อผิดพลาด ย้ายโฟกัสอย่างชาญฉลาด และคัดลอกให้สั้น
• ชัดเจนเมื่อมีการเปลี่ยนแปลงทันทีที่มีการเลือกที่ถูกต้อง ให้ลบข้อผิดพลาดออก

พื้นฐาน (เนทิฟเท่านั้น)

HTML เพียงอย่างเดียวสามารถบังคับใช้กฎด้วยจำเป็นทางวิทยุแห่งหนึ่งในกลุ่ม

คุณต้องการบริการใด

เลือกหนึ่งตัวเลือก


<ฉลาก>
<ประเภทอินพุต = "วิทยุ" ชื่อ = "บริการ" ค่า = "ลิงก์" จำเป็น>
การสร้างลิงก์

<ฉลาก>
<ประเภทอินพุต = "วิทยุ" name = "บริการ" value = "seo">
การเพิ่มประสิทธิภาพกลไกค้นหา

<ฉลาก>
<ประเภทอินพุต = "วิทยุ" ชื่อ = "บร���การ" ค่า = "เว็บ">
การออกแบบ / การพัฒนาเว็บไซต์

สิ่งนี้ช่วยให้คุณได้รับ: ลูกศรบนแป้นพิมพ์, ช่องว่างสำหรับเลือก และการตรวจสอบระดับเบราว์เซอร์

ข้อผิดพลาดอินไลน์ที่เป็นมิตร (การปรับปรุงแบบก้าวหน้า)

ปิดป๊อปอัปของเบราว์เซอร์และจัดการข้อความอินไลน์เพื่อให้ตรงกับการออกแบบของคุณ

HTML (เพิ่มขอบเขตข้อผิดพลาด)

ดำเนินการต่อ

CSS (สไตล์เรียบง่าย)

.ข้อผิดพลาด { สี:#b91c1c; ขอบบน:.5rem; ขนาดตัวอักษร:.9rem; }

JS (เลื่อนข้อผิดพลาด ประกาศอย่างถูกต้อง)

แบบฟอร์ม const = document.getElementById('quote');
กลุ่ม const = document.getElementById('svc');
const ผิดพลาด = document.getElementById('svc-err');
วิทยุ const = form.querySelectorAll ('อินพุต [ชื่อ = "บริการ"]');

ให้พยายาม = false; // แสดงข้อผิดพลาดเฉพาะหลังจากที่ผู้ใช้พยายามดำเนินการต่อ

ฟังก์ชั่น hasSelection() {
กลับ [...radios].some(r => r.checked);
}

function showError(msg='โปรดเลือกหนึ่งตัวเลือก') {
err.textContent = ผงชูรส;
err.hidden = เท็จ;
group.setAttribute('aria-invalid', 'true');
// เพิ่มข้อผิดพลาดต่อท้ายคำอธิบายเพื่อให้ SR ประกาศต่อไป
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

ฟังก์ชั่น clearError() {
err.hidden = จริง;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-อธิบายโดย', 'svc-คำใบ้');
}

form.addEventListener('submit', (e) => {
พยายาม = true;
if (!hasSelection()) {
e.preventDefault();
showError();
// นำกลุ่มเข้ามาดูและวางโฟกัสไปที่วิทยุตัวแรก
radios[0].focus();
group.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else {
. clearError();
});
// อย่าจู้จี้เร็ว; ชัดเจนเมื่อพวกเขาเลือกบางสิ่ง

radios.forEach(r => {
r.addEventListener('change', () => {
if (พยายาม) clearError();
});
});
ทำไมสิ่งนี้ถึงได้ผล

ไม่มีฟองคำแนะนำเครื่องมือของเบราว์เซอร์ ผู้ใช้เห็นข้อผิดพลาด

• อินไลน์ถัดจากกลุ่มโปรแกรมอ่านหน้าจอจะได้ยิน
• ตำนานจากนั้นข้อผิดพลาดขอขอบคุณaria-อธิบายโดย.ข้อผิดพลาดปรากฏขึ้นเท่านั้น
• หลังจากความพยายามในการส่ง (หรือเมื่อกลับมาแก้ไข)การตรวจสอบความถูกต้องทีละขั้นตอนแบบค่อยเป็นค่อยไป (แบบฟอร์มหลายขั้นตอน)

หากคุณเข้าประตูด้วยปุ่ม "ถัดไป" ให้ตรวจสอบขั้นตอนนั้น

document.getElementById('nextBtn').addEventListener('click', () => {

if (!hasSelection()) {
showError();
} else {
clearError();
// เลื่อนไปยังขั้นตอนถัดไป...
}
});
ข้อความที่กำหนดเองด้วย Constraint API (ตัวเลือก)

หากคุณต้องการเก็บรูปแบบความถูกต้องของเบราว์เซอร์ไว้ ให้ตั้งค่าข้อความที่กำหนดเองบน

ครั้งแรกวิทยุในกลุ่มconst firstRadio = วิทยุ [0];

form.addEventListener('submit', (e) => {
if (!hasSelection()) {
firstRadio.setCustomValidity('Please choose one option.');
// ทริกเกอร์ UI ดั้งเดิม หรือเรียก form.reportValidity()
e.preventDefault();
form.reportValidity();
} else {
firstRadio.setCustomValidity('');
}
. });
ใช้สิ่งนี้เมื่อคุณต้องการ "บับเบิ้ล" ดั้งเดิมบวกกับข้อความของคุณเอง มิฉะนั้น ให้ใช้วิธีแบบอินไลน์ด้านบนเพื่อให้ UI สอดคล้องกัน

สรุปข้อผิดพลาด (สำหรับรูปแบบยาว)

หากแบบฟอร์มของคุณยาว ให้เติม

สรุปด้านบนที่เชื่อมโยงกับพื้นที่ปัญหา

เกิดปัญหา: เลือกบริการ

const sum = document.getElementById('ข้อผิดพลาดสรุป');
sum.hidden = เท็จ;
sum.querySelector('a').focus(); // SRs ประกาศแจ้งเตือน
}
ทางเลือกฝั่งเซิร์ฟเวอร์และเครือข่าย

การตรวจสอบฝั่งไคลเอ็นต์ช่วย��รับปรุง UX แต่

เสมอตรวจสอบบนเซิร์ฟเวอร์ (หรือโดยบริการส่งของคุณ) ด้วย หากการส่งล้มเหลว ให้ส่งคืนเพจด้วย: validate on the server (or by your submission service) too. If submission fails, return the page with:

• ก่อนหน้ายังคงมีการเลือกและ
• The ข้อผิดพลาดอินไลน์เดียวกันถัดจากกลุ่ม

บูรณาการ Formspree (การปรับปรุงแบบก้าวหน้า)

ทำให้วิทยุทำงานได้แม้ว่า JavaScript จะล้มเหลว จากนั้นจึงเพิ่มประสิทธิภาพเพื่อการขอบคุณที่ราบรื่นยิ่งขึ้นและการวิเคราะห์ที่ดียิ่งขึ้น

Native HTML (ใช้งานได้เสมอ)

<แบบฟอร์ม
id="quote"
การกระทำ = "https://formspree.io/f/your_form_id"
วิธีการ = "โพสต์"
>
<ฟิลด์เซ็ต>
คุณต้องการบริการใด

เลือกหนึ่งตัวเลือก




การสร้างลิงก์
รับลิงก์ย้อนกลับคุณภาพสูง



<ประเภทอินพุต = "วิทยุ" name = "บริการ" value = "seo">
การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา
เพิ่มอันดับและการเข้าชม




การออกแบบ / การพัฒนาเว็บไซต์
ไซต์ที่รวดเร็วและเน้นอุปกรณ์เคลื่อนที่เป็นหลัก



<ฉลาก>
ชื่อเต็ม



<ฉลาก>
อีเมล









รับข้อเสนอของฉันฟรี

สิ่งนี้ให้อะไรแก่คุณ:

• ใช้งานได้โดยปิด JS (ดีสำหรับ SEO, ความน่าเชื่อถือ)
• เบราว์เซอร์จัดการ "ต้องเลือกอย่างใดอย่างหนึ่ง" (จำเป็นบนวิทยุตัวแรก)
• ฟอร์มปรีได้รับบริกา��,ชื่อ,อีเมล์และ_หัวเรื่อง.

การปรับปรุง JS (UX ที่ดี การติดตามที่ดีขึ้น)

สกัดกั้นการส่ง ตรวจสอบ ส่งด้วยดึงและแสดงความขอบคุณแบบอินไลน์ (หรือเปลี่ยนเส้นทาง)

<สคริปต์>
(function(){
const form = document.getElementById('quote');
const okMsg = document.getElementById('form-success');
const errMsg = document.getElementById('form-error');
const sendBtn = form.querySelector('button[type="submit"]');

// ตัวเลือก: จับ UTM + บริบทของหน้า
. ฟังก์ชั่น appendMeta(fd){
. const url = new URL(location.href);
. });
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;

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

        // Optional: fire analytics
if (window.gtag) gtag('event','generate_lead',{method:'formspree', บริการ: fd.get('service')});

// ตัวเลือกเสริม: เปลี่ยนเส้นทางหลังจากสำเร็จ
// setTimeout(()=> location.href = '/ขอบคุณ/', 1200);
} อื่น ๆ {
errMsg.hidden = เท็จ;
}
} จับ {
errMsg.hidden = เท็จ;
} ในที่สุด {
sendBtn.disabled = เท็จ;
sendBtn.textContent = ต้นฉบับ;
}
});
})(); })();

หมายเหตุ

• ตั้งยอมรับ: application/jsonดังนั้น Formspree จึงส่งคืน JSON และคุณสามารถตัดสินความสำเร็จ/ความล้มเหลวได้อย่างหมดจด
• ใช้form.reportValidity()ดังนั้นเบราว์เซอร์จึงบังคับใช้การเลือกวิทยุและรูปแบบอีเมลก่อนที่คุณจะส่ง
• เก็บภาษาพื้นเมืองการกระทำ/วิธีการดังนั้นแบบฟอร์มยังคงใช้งานได้หากไม่มี JS

การควบคุมสแปมโดยไม่กระทบต่อ Conversion

• ฮันนี่พอท(รวมอยู่ด้านบน) จับบอทจำนวนมากโดยไม่มีการเสียดสี
• เวลา: เพิ่มการซ่อนstart_atเมื่อโหลดหน้า; เพิกเฉยต่อการส่งเร็วกว่าเช่น 2 วินาที
• สัญญาณเนื้อหา: หากคุณเห็นค่าขยะซ้ำๆ ให้กรองค่าเหล่านั้นในกฎ Formspree หรือหลังการประมวลผล

<สคริปต์>
document.getElementById('started_at').value = Date.now();

// ในตัวจัดการการส่งก่อนที่จะส่ง:
const เริ่มต้น = จำนวน (fd.get ('started_at'));
ถ้า (Date.now() - เริ่ม < 2000) กลับ; // ดูเหมือนบอท

หัวเรื่องที่สะท้อนถึงตัวเลือกวิทยุ (กล่องจดหมายที่สะอาด)

คุณสามารถปรับแต่ง_หัวเรื่องจากวิทยุที่เลือก:

บริการ const = fd.get('บริการ'); // เช่น "seo"
fd.set('_subject', `${service} ลูกค้าเป้าหมายใหม่จากแบบฟอร์มการติดต่อ`);

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

• การซ่อนวิทยุด้วยจอแสดงผล:ไม่มี.ใช้ความทึบ:0; ตำแหน่ง:แน่นอน; สิ่งที่ใส่เข้าไป:0ภายในฉลากเพื่อให้คีย์บอร์ดยังใช้งานได้
• ลืมชุดสนาม/ตำนาน.โปรแกรมอ่านหน้าจออาศัยข้อมูลเหล่านี้สำหรับบริบท
• การตรวจสอบความถูกต้องมากเกินไปในช่วงต้นแสดงข้อผิดพลาดหลังจากส่ง/ถัดไป แล้วล้างทันทีที่ผู้ใช้แก้ไขกลุ่ม
• ไม่จับบริบท.เพิ่มpage_url,ผู้อ้างอิงและช่อง UTM คุณจะขอบคุณตัวเองในภายหลัง

ความเป็นสากลและการไม่แบ่งแยก

ภาษา ป้ายกำกับ และน้ำเสียง

• ใช้. ของ���พจ หลาง(และสลับหน้าตามสถานที่): …
• ใช้ป้ายกำกับให้สั้นและบรรยายหลีกเลี่ยงศัพท์แสงเฉพาะวัฒนธรรม
• ชอบเป็นกลางการใช้ถ้อยคำ (“เลือกแผน”) เหนือสมมติฐาน (“คุณมีงบประมาณเท่าไร”)
• แปลข้อผิดพลาดและข้อความช่วยเหลือด้วยพจนานุกรมง่ายๆ ที่คีย์โดยdocument.documentElement.lang.

const i18n = {
en: { เลือก: 'โปรดเลือกหนึ่งตัวเลือก' },
es: { เลือก: 'Elige una opción, por favor' },
ar: { เลือก: 'يَرجى اتيار کيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('เลือก');

ป้ายกำกับแบบยาวและตัวเลือกหลายบรรทัด

• ให้ป้ายกำกับห่อ; อย่าตัดทอนคำสำคัญ
• รักษาพื้นที่ Hit ใ���้ใหญ่แม้ในขณะที่ข้อความมีการตัดคำ: ใช้การเติมบนป้ายกำกับไม่ใช่แค่อินพุต

.card { ขนาดอินไลน์: 100%; ช่องว่างภายใน: 16px; }
.card .card-title { น้ำหนักตัวอักษร: 700; ความสูงของเส้น: 1.25; }
.card .card-sub { ขนาดตัวอักษร: 14px; ความสูงของเส้น: 1.4; }

การสนับสนุนจากขวาไปซ้าย (RTL)

ใช้ CSSคุณสมบัติเชิงตรรกะและ:dir()คุณจึงไม่จำเป็นต้องมีสไตล์แยกต่างหาก

/* การเว้นวรรคที่พลิกใน RTL โดยอัตโนมัติ */
.card { การขยายแบบอินไลน์: 16px; ช่องว่างภายใน: 16px; }

/* วงแหวนปรับโฟกัสที่เคารพทิศทาง */
.card:has(input:focus-visible) {
โครงร่าง: var ทึบ 3px (--ring);
โครงร่างออฟเซ็ต: 2px;
}

/* ไม่บังคับ: ปรับแต่งเฉพาะทิศทาง */
:dir(rtl) .card-group { ทิศทาง: rtl; }

การเข้าถึงที่เหนือกว่า ARIA

• มั่นใจความคมชัด ≥ 4.5:1สำหรับป้ายกำกับและสถานะโฟกัส
• สัมผัสเป้าหมาย ≥44×44 พิกเซล(ช่องว่างภายในมากกว่าขนาดตัวอักษร)
• อย่าสื่อสารสถานะด้วยสีเพียงอย่างเดียว ใช้เส้นขอบ ไอคอน หรือข้อความ.

รายการตรวจสอบการทดสอบ (พิมพ์ง่าย)

• ความหมาย: วิทยุอยู่ข้างในชุดสนามด้วยเครื่องหมาย. ที่มองเห็นได้ ตำนาน.
• แป้นพิมพ์: Tab เข้าสู่กลุ่ม;ลูกศรเคลื่อนไหว;อวกาศเลือก
• โปรแกรมอ่านหน้าจอ: ประกาศตำนาน; แต่ละตัวเลือกบอกว่าเลือก/ไม่ได้เลือก
• โฟกัส: วงแหวนที่มองเห็นได้บนการ์ดทั้งหมด(และบนอินพุตดั้งเดิม)
• พื้นที่ฮิต: คลิกป้ายกำกับทั้งหมดได้ ทำงานบนมือถือ
• การตรวจสอบ: ไม่มีข้อผิดพลาดจนกว่าจะส่ง/ถัดไป; ข้อผิดพลาดชัดเจนในการเปลี่ยนแปลง
• คัดลอก: ตัวเลือกมีน้อย ข้อความช่วยเหลือจะชี้แจงความแตกต่าง
• เค้าโครง: 1 คอลัมน์บนโทรศัพท์ 2–3 บนเดสก์ท็อป; ไม่มีการตัดล้น
• i18n: ข้อผิดพลาด/ป้ายกำกับที่แปลเป็นภาษาท้องถิ่น; ข้อความยาวล้อมรอบอย่างสวยงาม ตกลง
• การวิเคราะห์: เหตุการณ์สำหรับการแสดงผล เลือก ส่ง
• ประสิทธิภาพ: ไม่มี libs UI ที่หนักหน่วง CSS ขั���นต่ำ; ไม่มีการเปลี่ยนเค้าโครง

ประสิทธิภาพและการบำรุงรักษา

• โปรดปรานอินพุตดั้งเดิม+ CSS แบบเบา; หลีกเลี่ยงการเปลี่ยนวิทยุเป็น div
• เก็บ CSS แบบแยกส่วน (คุณสมบัติที่กำหนดเองสำหรับสี รัศมี วงแหวน)
• หลีกเลี่ยงจอแสดงผล:ไม่มีบนอินพุต; ใช้ความทึบ:0; ตำแหน่ง:แน่นอน; สิ่งที่ใส่เข้าไป:0ดังนั้นการเข้าถึงจึงยังคงอยู่เหมือนเดิม
• เลื่อน JS ที่ไม่สำคัญออกไป เก็บการปรับปรุงไว้ต่ำกว่า ~2–5 KB เมื่อเป็นไปได้
• ใช้คำสั่งคอนเทนเนอร์(ถ้ามี) แทนเบรกพอยต์สื่อที่ซับซ้อนสำหรับฟอร์มที่ฝัง

@container (ความกว้างขั้นต่ำ: 680px) {
.card-group { ตารางเทมเพลตคอลัมน์: 1fr 1fr 1fr; }
}

การวิเคราะห์และการทดลอง

ติดตามจุดเจตนาและจุดเสียดสี:

// เริ่มทำงานเมื่อมองเห็นกลุ่มวิทยุ
gtag?.('event','form_step_view', { ขั้นตอน: 1, แบบฟอร์ม: 'contact' });

// เริ่มทำงานเมื่อเลือก
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
});
});

// เริ่มทำงานเมื่อส่งสำเร็จ
gtag?.('event','generate_lead', { form: 'contact', service: form.service.value });

การทดสอบ A/B:

• ลำดับตัวเลือก(ถูกเลือกมากที่สุดก่อน)
• สำเนา CTA(“รับข้อเสนอของฉันฟรี” กับ “รับใบเสนอราคาของฉัน”)
• ข้อความช่วยเหลือการแสดงตน

การต่อต้านรูปแบบ (อย่าทำสิ่งเหล่านี้)

• การซ่อนอินพุตด้วยจอแสดงผล:ไม่มี(แบ่งคีย์บอร์ดและ SR)
• ไม่มีชุดสนาม/ตำนาน.
• พื้นที่ฮิตเล็ก ๆ (คลิกได้เฉพาะจุดเล็ก ๆ เท่านั้น)
• สถานะการเลือกสีเท่านั้น โฟกัสที่มองไม่เห็น
• กำลังตรวจสอบก่อนผู้ใช้พยายามดำเนินการต่อ
• บรรจุตัวเลือก 10–20 รายการลงในวิทยุ ใช้การเลือกที่ค้นหาได้แทน

รายการตรวจสอบสุดท้าย

• ชุดสนาม+ตำนานปัจจุบัน
• เหมือนกันชื่อ, ไม่ซ้ำกันค่าส
• อินพุตการตัดป้ายกำกับ คลิกการ์ดทั้งหมดได้
• มองเห็นวงแหวนโฟกัสได้ชัดเจน
• จำเป็นทางวิทยุเครื่องแรก ข้อผิดพลาดแบบอินไลน์ที่ไม่รุนแรง
• ตอบสนองตาราง 1–3 คอลัมน์ เป้าหมายการสัมผัสขนาดใหญ่
• สตริงที่แปลแล้ว RTL ปลอดภัยผ่านคุณสมบัติเชิงตรรกะ
• การวิเคราะห��ในการดู/เลือก/ส่ง
• การตรวจสอบฝั่งเซิร์ฟเวอร์จะสะท้อนกฎไคลเอ็นต์

ทรัพยากร

ข้อมูลจำเพาะและรูปแบบการเขียน

• มาตรฐาน HTML –<ประเภทอินพุต = "วิทยุ">: ความหมายดั้งเดิม จัดกลุ่มตามชื่อ, รูปแบบพฤติกรรม
• แนวทางปฏิบัติในการเขียน WAI-ARIA 1.2 – กลุ่มวิทยุ: ลักษณะการทำงานของแป้นพิมพ์ที่คาดหวัง (กด Tab ลงในกลุ่มลูกศรเพื่อย้ายเว้นวรรคเพื่อเลือก) รูปแบบการติดป้ายกำกับ
• WCAG 2.2สิ่งจำเป็นสำหรับวิทยุ:
  • 2.1.1แป้นพิมพ์(ทุกอย่างใช้งานได้ผ่านคีย์บอร์ด)
  • 2.4.7มองเห็นโฟกัส(โฟกัสมองเห็นได้ชัดเจน)
  • 2.5.5ขนาดเป้าหมาย(แนะนำให้ใช้ ≥44×44px)
  • 1.4.3คอนทราสต์ (ขั้นต่ำ)

คู่มืออ้างอิง

• เอ็มดีเอ็น: อินพุตวิทยุ,ป้ายกำกับ,ชุดสนาม/ตำนาน, การตรวจสอบแบบฟอร์ม (API การตรวจสอบข้อจำกัด)
• GOV.UK ระบบการออกแบบ – วิทยุ: คำแนะนำที่ยอดเยี่ยมและผ่านการทดสอบการต่อสู้เกี่ยวกับถ้อยคำและข้อผิดพลาด
• ส่วนประกอบแบบรวม (Heydon Pickering): รูปแบบ a11y และคำวิจารณ์เชิงปฏิบัติ

ลองดูบล็อกล่าสุดของเราที่วิธีค้นหาโอกาสในการโพสต์ของแขกบน Ahrefs (คำแนะนำทีละขั้นตอน)

การทดสอบและเครื่องมือ

• ขวาน DevTools(ส่วนขยายเบราว์เซอร์) – การตรวจสอบ a11y อัตโนมัติ
• ข้อมูลเชิงลึกด้านการเข้าถึง– การทดสอบที่แนะนำอย่างรวดเร็ว
• ประภาคาร– ประสิทธิภาพ + สัญญาณการเข้าถึง
• เครื่องมือตรวจสอบความคมชัดของ WebAIM– ตรวจสอบคอนทราสต์ของสี
• โปรแกรมอ่านหน้าจอเพื่อตรวจสอบพฤติกรรมที่แท้จริง:
  • เอ็นวีดีเอ(วินโดวส์),กราม(วินโดวส์),วอยซ์โอเวอร์(macOS/iOS),TalkBack(แอนดรอยด์)
• ผ่านแป้นพิมพ์ด้วยตนเอง: เลื่อนเข้าไปในกลุ่ม → ลูกศรเคลื่อนที่ → เลือกช่องว่าง → วงแหวนโฟกัสยังคงชัดเจน

ลองดูของเรา บทวิจารณ์ของ Notions Marketing

คำถามที่พบบ่อย (สั้นและใช้งานได้จริง)