<div class="input-group ">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" aria-label="Bedrag (afgerond in hele Euro's')" />
<span class="input-group-addon">,00</span>
</div>
{{#if label }}
<label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
{{#if leftAddon }}
<span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
{{/if}}
<input type="text" class="form-control"
{{#if label }}
id="{{ id }}"
{{else unless ariaLabel }}
title="{{ placeholder }}"
{{/if}}
{{{ifattr 'placeholder' placeholder}}}
{{#if ariaLabel }}
aria-label="{{ ariaLabel }}"
{{else}}
aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
{{/if}}/>
{{#if rightAddon }}
<span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
{{/if}}
</div>
id: double
ariaLabel: Bedrag (afgerond in hele Euro's')
leftAddon: €
rightAddon: ',00'
Maak visueel uitgebreide elementen met input groups. Combineer een input group niet met een form group, maar plaats de input group in plaats daarvan IN de form group.
This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.
<span class="input-group-addon" id="left_left-addon">@</span>
Check that the title element describes the document.
<title>Input Group
Check that a change of context does not occur when this input field receives focus.
<input type="text" class="form-control" title="Gebruikersnaam" placeholder="Gebruikersnaam" aria-describedby="left_left-addon">