Einfach Formkontrolle verlängeren andeems Dir Text, Knäppercher oder Knäppercher op béide Säiten vun textuellen Inputen addéiere wëllt, personaliséiert Selektiounen a personaliséiert Dateieinputen.
Basis Beispill
Plaz een Add-on oder Knäppchen op béide Säiten vun engem Input. Dir kënnt och een op béide Säiten vun engem Input setzen. Erënneren engem Plaz <label>
s ausserhalb der Input Grupp.
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "basic-addon1" > @</span>
</div>
<input type= "text" class= "form-control" placeholder= "Username" aria-label= "Username" aria-describedby= "basic-addon1" >
</div>
<div class= "input-group mb-3" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-label= "Recipient's username" aria-describedby= "basic-addon2" >
<div class= "input-group-append" >
<span class= "input-group-text" id= "basic-addon2" > @example.com</span>
</div>
</div>
<label for= "basic-url" > Your vanity URL</label>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "basic-addon3" > https://example.com/users/</span>
</div>
<input type= "text" class= "form-control" id= "basic-url" aria-describedby= "basic-addon3" >
</div>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" > $</span>
</div>
<input type= "text" class= "form-control" aria-label= "Amount (to the nearest dollar)" >
<div class= "input-group-append" >
<span class= "input-group-text" > .00</span>
</div>
</div>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" > With textarea</span>
</div>
<textarea class= "form-control" aria-label= "With textarea" ></textarea>
</div>
Wrapping
Input Gruppen wéckelen par défaut iwwer flex-wrap: wrap
fir personaliséiert Formfeldvalidatioun an enger Inputgrupp z'empfänken. Dir kënnt dëst mat .flex-nowrap
.
Kopie
<div class= "input-group flex-nowrap" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "addon-wrapping" > @</span>
</div>
<input type= "text" class= "form-control" placeholder= "Username" aria-label= "Username" aria-describedby= "addon-wrapping" >
</div>
Gréisst
Füügt déi relativ Formgréisst Klassen un der .input-group
selwer an d'Inhalter bannen wäerten automatesch d'Gréisst änneren - kee Besoin fir d'Form Kontrollgréisst Klassen op all Element ze widderhuelen.
Gréisst op déi eenzel Input Grupp Elementer gëtt net ënnerstëtzt.
Kopie
<div class= "input-group input-group-sm mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroup-sizing-sm" > Small</span>
</div>
<input type= "text" class= "form-control" aria-label= "Sizing example input" aria-describedby= "inputGroup-sizing-sm" >
</div>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroup-sizing-default" > Default</span>
</div>
<input type= "text" class= "form-control" aria-label= "Sizing example input" aria-describedby= "inputGroup-sizing-default" >
</div>
<div class= "input-group input-group-lg" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroup-sizing-lg" > Large</span>
</div>
<input type= "text" class= "form-control" aria-label= "Sizing example input" aria-describedby= "inputGroup-sizing-lg" >
</div>
Checkboxen a Radioen
Setzt all Checkbox oder Radiooptioun an engem Addon vun engem Inputgrupp amplaz vum Text.
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<div class= "input-group-text" >
<input type= "checkbox" aria-label= "Checkbox for following text input" >
</div>
</div>
<input type= "text" class= "form-control" aria-label= "Text input with checkbox" >
</div>
<div class= "input-group" >
<div class= "input-group-prepend" >
<div class= "input-group-text" >
<input type= "radio" aria-label= "Radio button for following text input" >
</div>
</div>
<input type= "text" class= "form-control" aria-label= "Text input with radio button" >
</div>
Wärend Multiple <input>
s visuell ënnerstëtzt ginn, sinn Validatiounsstiler nëmme verfügbar fir Inputgruppen mat enger eenzeger <input>
.
Kopie
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" > First and last name</span>
</div>
<input type= "text" aria-label= "First name" class= "form-control" >
<input type= "text" aria-label= "Last name" class= "form-control" >
</div>
Multiple Addons
Multiple Add-ons ginn ënnerstëtzt a kënne mat Checkbox a Radio Input Versioune gemëscht ginn.
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" > $</span>
<span class= "input-group-text" > 0.00</span>
</div>
<input type= "text" class= "form-control" aria-label= "Dollar amount (with dot and two decimal places)" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "Dollar amount (with dot and two decimal places)" >
<div class= "input-group-append" >
<span class= "input-group-text" > $</span>
<span class= "input-group-text" > 0.00</span>
</div>
</div>
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<button class= "btn btn-outline-secondary" type= "button" id= "button-addon1" > Button</button>
</div>
<input type= "text" class= "form-control" placeholder= "" aria-label= "Example text with button addon" aria-describedby= "button-addon1" >
</div>
<div class= "input-group mb-3" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-label= "Recipient's username" aria-describedby= "button-addon2" >
<div class= "input-group-append" >
<button class= "btn btn-outline-secondary" type= "button" id= "button-addon2" > Button</button>
</div>
</div>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" id= "button-addon3" >
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
</div>
<input type= "text" class= "form-control" placeholder= "" aria-label= "Example text with two button addons" aria-describedby= "button-addon3" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-label= "Recipient's username with two button addons" aria-describedby= "button-addon4" >
<div class= "input-group-append" id= "button-addon4" >
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
</div>
</div>
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<button class= "btn btn-outline-secondary dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Dropdown</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div role= "separator" class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
<input type= "text" class= "form-control" aria-label= "Text input with dropdown button" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "Text input with dropdown button" >
<div class= "input-group-append" >
<button class= "btn btn-outline-secondary dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Dropdown</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div role= "separator" class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
</div>
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<button type= "button" class= "btn btn-outline-secondary" > Action</button>
<button type= "button" class= "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div role= "separator" class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
<input type= "text" class= "form-control" aria-label= "Text input with segmented dropdown button" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "Text input with segmented dropdown button" >
<div class= "input-group-append" >
<button type= "button" class= "btn btn-outline-secondary" > Action</button>
<button type= "button" class= "btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<a class= "dropdown-item" href= "#" > Something else here</a>
<div role= "separator" class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link</a>
</div>
</div>
</div>
Inputgruppen enthalen Ënnerstëtzung fir personaliséiert Selektiounen a personaliséiert Dateieinputen. Browser Standard Versioune vun dësen sinn net ënnerstëtzt.
Benotzerdefinéiert wielt
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<label class= "input-group-text" for= "inputGroupSelect01" > Options</label>
</div>
<select class= "custom-select" id= "inputGroupSelect01" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
</div>
<div class= "input-group mb-3" >
<select class= "custom-select" id= "inputGroupSelect02" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "input-group-append" >
<label class= "input-group-text" for= "inputGroupSelect02" > Options</label>
</div>
</div>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
</div>
<select class= "custom-select" id= "inputGroupSelect03" aria-label= "Example select with button addon" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
</div>
<div class= "input-group" >
<select class= "custom-select" id= "inputGroupSelect04" aria-label= "Example select with button addon" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "input-group-append" >
<button class= "btn btn-outline-secondary" type= "button" > Button</button>
</div>
</div>
Kopie
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupFileAddon01" > Upload</span>
</div>
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "inputGroupFile01" aria-describedby= "inputGroupFileAddon01" >
<label class= "custom-file-label" for= "inputGroupFile01" > Choose file</label>
</div>
</div>
<div class= "input-group mb-3" >
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "inputGroupFile02" >
<label class= "custom-file-label" for= "inputGroupFile02" aria-describedby= "inputGroupFileAddon02" > Choose file</label>
</div>
<div class= "input-group-append" >
<span class= "input-group-text" id= "inputGroupFileAddon02" > Upload</span>
</div>
</div>
<div class= "input-group mb-3" >
<div class= "input-group-prepend" >
<button class= "btn btn-outline-secondary" type= "button" id= "inputGroupFileAddon03" > Button</button>
</div>
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "inputGroupFile03" aria-describedby= "inputGroupFileAddon03" >
<label class= "custom-file-label" for= "inputGroupFile03" > Choose file</label>
</div>
</div>
<div class= "input-group" >
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "inputGroupFile04" aria-describedby= "inputGroupFileAddon04" >
<label class= "custom-file-label" for= "inputGroupFile04" > Choose file</label>
</div>
<div class= "input-group-append" >
<button class= "btn btn-outline-secondary" type= "button" id= "inputGroupFileAddon04" > Button</button>
</div>
</div>
Accessibilitéit
Vergewëssert Iech datt all Form Kontrollen e passenden zougänglechen Numm hunn, sou datt hiren Zweck un d'Benotzer vun Hëllefstechnologien vermëttelt ka ginn. Deen einfachste Wee fir dëst z'erreechen ass en <label>
Element ze benotzen, oder - am Fall vu Knäppercher - genuch beschreiwen Text als Deel vum <button>...</button>
Inhalt ze enthalen.
Fir Situatiounen, wou et net méiglech ass e siichtbaren <label>
oder passenden Textinhalt ze enthalen, ginn et alternativ Weeër fir ëmmer nach en zougänglechen Numm ze liwweren, wéi:
<label>
Elementer verstoppt mat der .visually-hidden
Klass
Weist op en existent Element deen als Label benotze kannaria-labelledby
En title
Attribut ubidden
Explizit den zougänglechen Numm op en Element setzen mataria-label
Wann keng vun dësen präsent sinn, kënnen Hëllefstechnologien op d'Benotzung vum placeholder
Attribut als Réckfall fir den zougänglechen Numm op <input>
an <textarea>
Elementer benotzen. D'Beispiller an dëser Rubrik bidden e puer proposéiert, case-spezifesch Approche.
Wärend visuell verstoppt Inhalter benotzt ( .sr-only
, aria-label
, a souguer placeholder
Inhalter, dee verschwënnt eemol e Formfeld Inhalt huet) wäert Hëllefstechnologie Benotzer profitéieren, e Mangel u sichtbare Labeltext kann nach ëmmer problematesch sinn fir verschidde Benotzer. Eng Form vu sichtbare Label ass allgemeng déi bescht Approche, souwuel fir Accessibilitéit an Usability.