ꯇꯦꯛꯁꯇꯥꯏꯜ ꯏꯅꯄꯨꯠꯁꯤꯡ, ꯀꯁ꯭ꯇꯝ ꯁꯦꯂꯦꯛꯇꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯐꯥꯏꯜ ꯏꯅꯄꯨꯠꯁꯤꯡꯒꯤ ꯃꯥꯏꯀꯩ ꯑꯃꯔꯣꯃꯗꯥ ꯇꯦꯛꯁꯠ, ꯕꯇꯅꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯐꯖꯅꯥ ꯁꯥꯡꯗꯣꯀꯎ꯫
ꯕꯦꯁꯤꯛ ꯈꯨꯗꯝ ꯑꯃꯥ꯫
ꯏꯅꯄꯨꯠ ꯑꯃꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯃꯔꯣꯃꯗꯥ ꯑꯦꯗ-ꯑꯣꯟ ꯅꯠꯠꯔꯒꯥ ꯕꯇꯟ ꯑꯃꯥ ꯊꯝꯃꯨ꯫ ꯅꯍꯥꯛꯅꯥ ꯏꯅꯄꯨꯠ ꯑꯃꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯅꯤꯃꯛꯇꯥ ꯑꯃꯨꯛ ꯊꯝꯕꯥ ꯌꯥꯏ꯫ <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
ꯀꯟꯇꯦꯟꯇ ꯐꯥꯎꯕꯥ, ꯐꯣꯔꯝ ꯐꯤꯜꯗ ꯑꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯩꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯃꯥꯡꯈꯤꯕꯥ) ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯒꯗꯕꯥ ꯇꯦꯛꯅꯣꯂꯣꯖꯤ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ ꯀꯥꯟꯅꯕꯥ ꯄꯤꯒꯅꯤ, ꯑꯗꯨꯕꯨ ꯎꯕꯥ ꯉꯝꯕꯥ ꯂꯦꯕꯦꯜ ꯇꯦꯛꯁꯠ ꯂꯩꯇꯕꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯑꯀꯛꯅꯕꯥ ꯌꯨꯖꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯄ꯭ꯔꯣꯕ꯭ꯂꯦꯝ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯌꯦꯡꯕꯥ ꯌꯥꯕꯥ ꯂꯦꯕꯦꯂꯒꯤ ꯃꯑꯣꯡ ꯈꯔꯗꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯑꯦꯞꯔꯣꯆꯅꯤ, ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯌꯨꯖꯕꯦꯂꯤꯇꯤ ꯑꯅꯤꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ꯫