อินพุตทุกช่องต้องมี label จริง
เชื่อมป้ายกำกับกับช่องกรอก เพื่อให้แตะและอ่านได้ถูกต้อง
อินพุตทุกช่องต้องมี label จริง เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดป้ายกำกับจึงสำคัญ
ช่องกรอกข้อมูลที่ไม่มีชื่อก็เหมือนกล่องปริศนา ป้ายกำกับจริงจะบอกผู้ใช้ทุกคน ไม่ว่าจะมองเห็นหรือไม่ ว่าต้องพิมพ์อะไร 🏷️
องค์ประกอบ label
องค์ประกอบ label คือวิธีมาตรฐานใน HTML สำหรับตั้งชื่อช่องกรอกข้อมูล เบราว์เซอร์ โปรแกรมอ่านหน้าจอ และพื้นที่สำหรับแตะต่างเข้าใจได้โดยอัตโนมัติ
เชื่อมด้วย for และ id
การเชื่อมโยงที่เรียบร้อยที่สุดคือใช้ for บน label ให้ตรงกับ id ของช่องกรอกข้อมูล ทั้งสองส่วนก็จะจับคู่กันอย่างเป็นทางการ
<label for="email">Email</label>
<input id="email" type="email">id ต้องไม่ซ้ำกัน
id ที่คุณชี้ไปต้องไม่ซ้ำกับส่วนอื่นในหน้า หากช่องกรอกข้อมูลสองช่องใช้ id เดียวกัน การจับคู่จะเสียหายโดยไม่แสดงอาการชัดเจน
การครอบก็ใช้ได้เช่นกัน
คุณยังสามารถ ครอบช่องกรอกข้อมูลไว้ภายใน label ได้ ไม่จำเป็นต้องใช้ id เพราะการซ้อนองค์ประกอบทำให้ความเชื่อมโยงชัดเจน
<label>Email
<input type="email">
</label>พื้นที่คลิกใหญ่ขึ้น
label ที่เชื่อมโยงแล้วจะทำให้ผู้ใช้มี พื้นที่คลิกที่ใหญ่ขึ้น การแตะข้อความจะโฟกัสหรือเลือกช่องกรอกข้อมูล ช่วยผู้ที่มือสั่นและผู้ใช้หน้าจอขนาดเล็ก
โปรแกรมอ่านหน้าจอจะอ่านให้ฟัง
เมื่อโฟกัสไปยังช่องกรอกข้อมูลที่จับคู่ไว้ โปรแกรมอ่านหน้าจอจะอ่าน label ก่อน หากไม่มี label ผู้ใช้จะได้ยินเพียงชนิดของช่อง
title ยังไม่เพียงพอ
แอตทริบิวต์ title อาจแสดงเมื่อวางเมาส์ แต่ไม่น่าเชื่อถือเมื่อใช้หน้าจอสัมผัสและแป้นพิมพ์ จึงใช้แทน label จริงไม่ได้
ช่องทำเครื่องหมายก็ต้องมีป้ายกำกับ
ช่องทำเครื่องหมายและปุ่มตัวเลือกดูเข้าใจง่ายด้วยสายตา แต่ label ต่างหากที่ทำให้แตะได้และทำให้มีการประกาศ อย่าปล่อยองค์ประกอบเหล่านี้ไว้โดยไม่มี label
<input id="terms" type="checkbox">
<label for="terms">I agree</label>สิ่งที่มองเห็นย่อมดีกว่า
พยายามให้ป้ายกำกับ มองเห็นได้ ผู้ใช้ที่มองเห็นและมีภาระด้านการรับรู้ก็ได้รับประโยชน์ไม่แพ้ผู้ใช้โปรแกรมอ่านหน้าจอ
เมื่อจำเป็นต้องซ่อน
หากช่องค้นหาไม่มีพื้นที่สำหรับข้อความ ให้ซ่อน label ด้วยคลาส visually-hidden และอย่าใช้ display none เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกยังเข้าถึงได้
ตรวจสอบอย่างรวดเร็ว
label รู้ได้อย่างไรว่ากำลังตั้งชื่อช่องกรอกข้อมูลใด
สรุปทบทวน
ช่องกรอกข้อมูลทุกช่องต้องมี label จริง ซึ่งเชื่อมด้วย for และ id หรือเชื่อมโดยการครอบ นิสัยเพียงข้อเดียวนี้ทำให้แบบฟอร์มแตะได้ อ่านได้ และเข้าใจง่าย ✅
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “อินพุตทุกช่องต้องมี label จริง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อินพุตทุกช่องต้องมี label จริง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อินพุตทุกช่องต้องมี label จริง”
เชื่อมป้ายกำกับกับช่องกรอก เพื่อให้แตะและอ่านได้ถูกต้อง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “อินพุตทุกช่องต้องมี label จริง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินพุตทุกช่องต้องมี label จริง
- Placeholder ไม่ใช่ป้ายกำกับ
- จัดกลุ่มช่องด้วย fieldset และ legend
- ข้อความช่วยเหลือและช่องที่จำเป็นต้องกรอกซึ่งประกาศให้ทราบ