පෙළ ආදාන, අභිරුචි තේරීම් සහ අභිරුචි ගොනු ආදාන දෙපස ඇති පෙළ, බොත්තම් හෝ බොත්තම් කණ්ඩායම් එකතු කිරීමෙන් පෝරම පාලනය පහසුවෙන් දිගු කරන්න.
මූලික උදාහරණය
ආදානයක දෙපස එක් ඇඩෝනයක් හෝ බොත්තමක් තබන්න. ඔබට ආදානයක දෙපැත්තේ එකක් තැබිය හැකිය. <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
පෝරම ක්ෂේත්රයක අන්තර්ගතය ඇති විට අතුරුදහන් වන අන්තර්ගතය පවා) උපකාරක තාක්ෂණ පරිශීලකයින්ට ප්රතිලාභ ලබා දෙන අතර, දෘශ්ය ලේබල් පෙළ නොමැතිකම ඇතැම් පරිශීලකයින්ට තවමත් ගැටලුකාරී විය හැකිය. යම් ආකාරයක දෘශ්ය ලේබලයක් සාමාන්යයෙන් ප්රවේශ්යතාව සහ උපයෝගීතාව සඳහා හොඳම ප්රවේශය වේ.