Forms
Form elements for complete forms
Markup: templates/output/04-elements/forms/demoform.html
<form action="#" method="post">
<fieldset>
<legend class="u-visually-hidden">Formulartitel</legend>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-name" name="name" placeholder="Mustermann"/>
<label for="demoform-name">Mustermann</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
<label for="demoform-surname">Max</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-street" name="street" placeholder="Kunstmühlstraße 12"/>
<label for="demoform-street">Kunstmühlstraße 12</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-zipcity" name="zipcity" placeholder="93047, Regensburg"/>
<label for="demoform-zipcity">93047, Regensburg</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-phone" name="phone" placeholder="+49 941/000-01"/>
<label for="demoform-phone">+49 941/000-01</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-fax" name="fax" placeholder="+49 941/000-02"/>
<label for="demoform-fax">+49 941/000-02</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="text" id="demoform-disabled" name="disabled-field" placeholder="disabled form field" disabled="disabled"/>
<label for="demoform-disabled">disabled form field</label>
</div>
</div>
<div class="form-group">
<div class="u-floating-label">
<input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@oth-regensburg.de"/>
<label for="demoform-mail">max.mustermann@oth-regensburg.de</label>
</div>
</div>
<div class="form-group">
<!-- Render regular label, if renderHiddenCheckbox is true, else render span tag with text-->
<label for="vue-dropdown-1583">Auswahl Singleselect</label>
<div class="u-dropdown" data-dropdown-injector="{"id":"vue-dropdown-1583","label":"Auswahl Singleselect","renderHiddenSelect":true,"isRequired":true,"invalidMessage":"Hinweis zum Ausfüllen Lorem ipsum dolor sit amet, consectetuer adipiscing elit.","multiple":false,"placeholder":"Bitte wählen","name":"tx_powermail_pi1[field][vue-dropdown-1583]","options":[{"uid":1,"text":"Dropdown menu item 1","value":"1","active":true},{"uid":2,"text":"Dropdown menu item 2","value":"2","active":false},{"uid":3,"text":"Dropdown menu item 3","value":"3","active":false},{"uid":4,"text":"Dropdown menu item 4","value":"4","active":false}]}">
<button class="u-dropdown__button" aria-haspopup="true" aria-expanded="false" type="button"><span></span>
<svg class="u-dropdown__button-arrow" viewBox="0 0 25 24" role="img" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
</svg>
</button>
<!-- Render dummy select field for label, if renderHiddenCheckbox is true, else render nothing-->
<!-- dummy select, will be replaced later via vue mounting-->
<select id="vue-dropdown-1583" required="required" style="position: absolute; visibility: hidden;">
<option value="">Bitte Auswahl treffen</option>
<option value="1">Dropdown menu item 1</option>
<option value="2">Dropdown menu item 2</option>
<option value="3">Dropdown menu item 3</option>
<option value="4">Dropdown menu item 4</option>
</select>
</div>
</div>
<div class="form-group">
<!-- Render regular label, if renderHiddenCheckbox is true, else render span tag with text-->
<label for="vue-dropdown-1683">Auswahl Multiselect</label>
<div class="u-dropdown" data-dropdown-injector="{"id":"vue-dropdown-1683","label":"Auswahl Multiselect","renderHiddenSelect":true,"isRequired":true,"invalidMessage":"Hinweis zum Ausfüllen Lorem ipsum dolor sit amet, consectetuer adipiscing elit.","multiple":true,"placeholder":"Bitte wählen","name":"tx_powermail_pi1[field][vue-dropdown-1683][]","options":[{"uid":1,"text":"Dropdown menu item 1","value":"1","active":true},{"uid":2,"text":"Dropdown menu item 2","value":"2","active":true},{"uid":3,"text":"Dropdown menu item 3","value":"3","active":false},{"uid":4,"text":"Dropdown menu item 4","value":"4","active":false}]}" data-tag-container="#badge-container-1">
<button class="u-dropdown__button" aria-haspopup="true" aria-expanded="false" type="button"><span></span>
<svg class="u-dropdown__button-arrow" viewBox="0 0 25 24" role="img" aria-hidden="true" focusable="false">
<use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down"></use>
</svg>
</button>
<!-- Render dummy select field for label, if renderHiddenCheckbox is true, else render nothing-->
<!-- dummy select, will be replaced later via vue mounting-->
<select id="vue-dropdown-1683" required="required" style="position: absolute; visibility: hidden;">
<option value="">Bitte Auswahl treffen</option>
<option value="1">Dropdown menu item 1</option>
<option value="2">Dropdown menu item 2</option>
<option value="3">Dropdown menu item 3</option>
<option value="4">Dropdown menu item 4</option>
</select>
</div>
<div id="badge-container-1"></div>
</div>
<div class="form-group">
<label for="demoform-upload">Upload</label>
<div class="u-uploadfield" data-text="Durchsuchen..." data-buttontext="Hochladen">
<input id="demoform-upload" type="file"/>
</div>
</div>
<div class="form-group">
<fieldset>
<legend>Ihr Anliegen betrifft</legend>
<div class="form-radiogroup">
<input id="demoform-matter-1" name="matter" type="radio" checked="checked"/>
<label for="demoform-matter-1"><span>Option 1</span></label>
<input id="demoform-matter-2" name="matter" type="radio"/>
<label for="demoform-matter-2"><span>Option 2</span></label>
<input id="demoform-matter-3" name="matter" type="radio" disabled="disabled"/>
<label for="demoform-matter-3"><span>Option 3</span></label>
</div>
</fieldset>
</div>
<div class="form-group">
<label for="demoform-message">Nachricht</label>
<textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Schreiben Sie hier Ihre Nachricht"></textarea>
</div>
<div class="form-group">
<input type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
<label for="checkboxdemo-privacy"><span>Ich habe die <a class="textlink" href="#">Datenschutzerklärung</a> zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden.</span></label>
</div>
<button class="btn btn--secondary">Abschicken</button>
</fieldset>
</form>
Source:
assets/sass/04-elements/_elements.forms.scss, line 5