በሁለቱም የጽሑፍ ግብዓቶች፣ ብጁ ምርጫዎች እና ብጁ የፋይል ግብዓቶች ላይ ጽሑፍ፣ አዝራሮች ወይም የአዝራር ቡድኖችን በመጨመር የቅጽ መቆጣጠሪያዎችን በቀላሉ ያራዝሙ።
መሰረታዊ ምሳሌ
በግቤት በሁለቱም በኩል አንድ ተጨማሪ ወይም አዝራር ያስቀምጡ። እንዲሁም አንዱን በግቤት በሁለቱም በኩል ማስቀመጥ ይችላሉ። <label>
ከግቤት ቡድኑ ውጭ s ማስቀመጥዎን ያስታውሱ ።
መጠቅለል
flex-wrap: wrap
በግቤት ቡድን ውስጥ ብጁ ቅጽ የመስክ ማረጋገጫን ለማስተናገድ የግቤት ቡድኖች በነባሪ ይጠቀለላሉ ። ይህንን በ ጋር ማሰናከል ይችላሉ .flex-nowrap
።
መጠናቸው
አንጻራዊውን የቅጽ መጠን ክፍሎችን ወደ .input-group
ራሱ ያክሉ እና በውስጡ ያሉት ይዘቶች በራስ-ሰር ይቀየራሉ - በእያንዳንዱ ኤለመንት ላይ የቅጽ መቆጣጠሪያ መጠን ክፍሎችን መድገም አያስፈልግም።
በነጠላ የግቤት ቡድን አባላት ላይ መጠን ማድረግ አይደገፍም።
አመልካች ሳጥኖች እና ሬዲዮዎች
ማንኛውንም አመልካች ሳጥን ወይም የሬዲዮ አማራጭ ከጽሑፍ ይልቅ በግቤት ቡድን አዶ ውስጥ ያስቀምጡ።
ብዙ <input>
ዎች በእይታ ሲደገፉ፣ የማረጋገጫ ቅጦች አንድ ነጠላ ላላቸው የግቤት ቡድኖች ብቻ ይገኛሉ <input>
።
በርካታ addons
በርካታ ማከያዎች ይደገፋሉ እና ከአመልካች ሳጥን እና የሬዲዮ ግቤት ስሪቶች ጋር ሊደባለቁ ይችላሉ።
የግቤት ቡድኖች ለብጁ ምርጫዎች እና ብጁ የፋይል ግብዓቶች ድጋፍን ያካትታሉ። የእነዚህ ነባሪ የአሳሽ ስሪቶች አይደገፉም።
ብጁ ይምረጡ
ተደራሽነት
ዓላማቸው ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንዲደርስ ሁሉም የቅጽ መቆጣጠሪያዎች ተገቢ የሆነ ተደራሽ ስም እንዳላቸው ያረጋግጡ። ይህንን ለማግኘት ቀላሉ መንገድ ኤለመንትን መጠቀም ወይም - በአዝራሮች ሁኔታ - በቂ ገላጭ ጽሑፍን እንደ የይዘቱ <label>
አካል ማካተት ነው ።<button>...</button>
የሚታይ ወይም ተገቢ የሆነ የጽሁፍ ይዘት ለማካተት ለማይቻል <label>
ሁኔታዎች አሁንም ተደራሽ የሆነ ስም የማቅረብ አማራጭ መንገዶች አሉ ለምሳሌ፡-
<label>
.visually-hidden
ክፍሉን በመጠቀም የተደበቁ ንጥረ ነገሮች
- በመጠቀም እንደ መለያ ሆኖ ሊያገለግል ወደሚችል ነባር አካል በመጠቆም
aria-labelledby
title
ባህሪን መስጠት
- በአንድ አካል ላይ ያለውን ተደራሽ ስም በግልፅ በማዘጋጀት ላይ
aria-label
ከእነዚህ ውስጥ አንዳቸውም ከሌሉ፣ አጋዥ ቴክኖሎጂዎች placeholder
ባህሪውን ለተደራሽ ስም <input>
እና <textarea>
አካላት እንደ ውድቅ አድርገው ሊጠቀሙበት ይችላሉ። በዚህ ክፍል ውስጥ ያሉት ምሳሌዎች ጥቂት የተጠቆሙ፣ ጉዳይ-ተኮር አቀራረቦችን ያቀርባሉ።
በምስላዊ የተደበቀ ይዘት (፣፣ .sr-only
እና aria-label
ሌላው ቀርቶ placeholder
የቅጽ መስክ ይዘት ካለው በኋላ የሚጠፋውን ይዘት) በመጠቀም አጋዥ የቴክኖሎጂ ተጠቃሚዎችን ቢጠቅምም፣ የሚታይ የመለያ ጽሑፍ አለመኖር ለተወሰኑ ተጠቃሚዎች አሁንም ችግር ሊሆን ይችላል። አንዳንድ የሚታየው መሰየሚያ ዓይነቶች በአጠቃላይ ምርጡ አካሄድ ነው፣ ሁለቱም ለተደራሽነት እና ለአጠቃቀም።