Текстийн оролт, захиалгат сонголт, тусгай файлын оролтын хоёр талд текст, товчлуур эсвэл товчлуурын бүлгийг нэмж маягтын хяналтыг хялбархан өргөжүүлээрэй.
Үндсэн жишээ
Оролтын хоёр талд нэг нэмэлт эсвэл товчлуурыг байрлуул. Та мөн оролтын хоёр талд нэгийг байрлуулж болно. <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
маягтын талбарт агуулгатай болмогц алга болдог контент) ашиглах нь туслах технологийн хэрэглэгчдэд ашигтай боловч харагдахуйц шошгоны текст дутагдалтай байгаа нь зарим хэрэглэгчдийн хувьд асуудалтай хэвээр байж магадгүй юм. Үзэгдэх шошгоны зарим хэлбэр нь хүртээмжтэй байдал, ашиглах боломжтой байдлын хувьд ерөнхийдөө хамгийн сайн арга юм.