ขยายการควบคุมแบบฟอร์มได้อย่างง่ายดายโดยการเพิ่มข้อความ ปุ่ม หรือกลุ่มปุ่มที่ด้านใดด้านหนึ่งของการป้อนข้อความ การเลือกแบบกำหนดเอง และอินพุตไฟล์แบบกำหนดเอง
ตัวอย่างพื้นฐาน
วางโปรแกรมเสริมหรือปุ่มหนึ่งปุ่มที่ด้านใดด้านหนึ่งของอินพุต คุณยังสามารถวางข้อมูลหนึ่งไว้ทั้งสองด้านของอินพุตได้ อย่าลืมวาง<label>
s ไว้นอกกลุ่มอินพุต
ห่อ
กลุ่มอินพุตตัดตามค่าเริ่มต้นผ่านflex-wrap: wrap
เพื่อรองรับการตรวจสอบฟิลด์แบบฟอร์มที่กำหนดเองภายในกลุ่มอินพุต คุณสามารถปิดการใช้งานสิ่งนี้ด้วย.flex-nowrap
.
ขนาด
เพิ่มคลาสการปรับขนาดแบบฟอร์มสัมพันธ์ให้กับ.input-group
ตัวเองและเนื้อหาภายในจะปรับขนาดโดยอัตโนมัติ ไม่จำเป็นต้องทำซ้ำคลาสขนาดการควบคุมแบบฟอร์มในแต่ละองค์ประกอบ
ไม่รองรับการปรับขนาดองค์ประกอบกลุ่มอินพุตแต่ละรายการ
ช่องทำเครื่องหมายและวิทยุ
วางช่องทำเครื่องหมายหรือตัวเลือกวิทยุภายในส่วนเสริมของกลุ่มอินพุตแทนข้อความ
แม้ว่าหลาย ๆ<input>
s ได้รับการสนับสนุนด้วยภาพ แต่รูปแบบการตรวจสอบจะใช้ได้เฉพาะกับกลุ่มอินพุตที่มีไฟล์<input>
.
ส่วนเสริมหลายรายการ
รองรับโปรแกรมเสริมหลายรายการและสามารถผสมกับช่องทำเครื่องหมายและเวอร์ชันอินพุตวิทยุ
กลุ่มอินพุตรวมถึงการรองรับการเลือกแบบกำหนดเองและอินพุตไฟล์แบบกำหนดเอง ไม่รองรับเวอร์ชันเริ่มต้นของเบราว์เซอร์เหล่านี้
เลือกเอง
การเข้าถึง
ตรวจสอบให้แน่ใจว่าการควบคุมแบบฟอร์มทั้งหมดมีชื่อที่สามารถเข้าถึงได้อย่างเหมาะสม เพื่อให้สามารถสื่อถึงวัตถุประสงค์ไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือการใช้<label>
องค์ประกอบ หรือ—ในกรณีของปุ่ม—เพื่อรวมข้อความอธิบายที่เพียงพอเป็นส่วนหนึ่งของ<button>...</button>
เนื้อหา
สำหรับสถานการณ์ที่ไม่สามารถรวม<label>
เนื้อหาข้อความที่มองเห็นได้หรือเหมาะสม มีวิธีอื่นในการระบุชื่อที่สามารถเข้าถึงได้ เช่น:
<label>
องค์ประกอบที่ซ่อนอยู่โดยใช้.visually-hidden
คลาส
- ชี้ไปที่องค์ประกอบที่มีอยู่ซึ่งสามารถทำหน้าที่เป็นป้ายกำกับโดยใช้
aria-labelledby
- ให้
title
แอตทริบิวต์
- การตั้งชื่อที่สามารถเข้าถึงได้อย่างชัดเจนบนองค์ประกอบโดยใช้
aria-label
หากไม่มีสิ่งเหล่านี้ เทคโนโลยีอำนวยความสะดวกอาจหันไปใช้placeholder
แอตทริบิวต์เป็นทางเลือกสำหรับชื่อ<input>
และ<textarea>
องค์ประกอบ ที่สามารถเข้าถึงได้ ตัวอย่างในส่วนนี้จะนำเสนอแนวทางเฉพาะบางกรณีที่แนะนำ
ในขณะที่ใช้เนื้อหาที่มองเห็นได้ ( .sr-only
, aria-label
และแม้แต่placeholder
เนื้อหาที่หายไปเมื่อฟิลด์แบบฟอร์มมีเนื้อหา) จะเป็นประโยชน์ต่อผู้ใช้เทคโนโลยีอำนวยความสะดวก การไม่มีข้อความป้ายกำกับที่มองเห็นได้อาจเป็นปัญหาสำหรับผู้ใช้บางคน ฉลากที่มองเห็นได้บางรูปแบบโดยทั่วไปเป็นแนวทางที่ดีที่สุด ทั้งสำหรับการช่วยสำหรับการเข้าถึงและการใช้งาน