Sprachwahl

Suche

Suche

Formular-Elemente

Gruppierung von Formular-Elementen

FLEX

Mit Zwischentiteln werden Formularelemente inhaltlich gruppiert. Dazu wird das Fieldset-Tag verwendet.

Legend of fieldset

Eingabefelder

FLEX

Inputfelder erlauben die Eingabe von Inhalten (z.B. Name).

Für die Eingabe eines Datums wird eine HTM-5-Lösung angeboten. Bei Browsern, die HTML 5 nicht unterstützen, muss das Datum manuell eingegeben werden.

**Barrierefreiheit

Für die Sicherstellung der Barrierefreiheit müssen die Form und die Inputboxen mit Labels bezeichnet sein. Eine Label-ID darf nur einmal pro Seite verwendet werden. Felder sollten verständlich bezeichnet sein, vorzugsweise wird WAI verwendet.

Mit den Klassen .has-error, .has-warning der .has-success kann den Usern Feedback gegeben werden.

HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color

Fields marked with a * are compulsory

Email
Password
Warning, this is not a correct info!
Select date
Use format "DD/MM/YYYY"
Website
Use format "http://www.example.com"
Document
Terms
Terms
Terms
Terms
Dropdown
Dropdown 
// Code duplicated in footer to make the datepicker work in the styleguide
// Load Pikaday on date fields
if ($(window).width() > 767) {

  $('[type=date]').each(function(){
    // We need to change to type text to be able to write in another format
    // Just uncomment the following line:
    // $(this).prop('type', 'text');

    var picker = new Pikaday({
      field: $(this)[0],
      format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above
      firstDay: 1, // sets monday as first day
      theme: 'admin-theme',
      i18n: {
        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
      }
    });
  });

}

Auswahllisten

FLEX

Mit einer Dropdown List kann aus einer vorgegebenen Liste eine Auswahl getroffen werden. Diese Liste erscheint in einem Menü nach Klick auf das Element. Nachdem eine Auswahl getroffen wurde, wird das Ergebnis angezeigt. Bei mehr als zehn Optionen wird an erster Stelle der Liste ein Suchfeld angeboten.

Mehrfach-Auswahllisten

FLEX

Mehrfach-Auswahllisten verhalten sich gleich wie einfache Auswahllisten. Allerdings kann mehr als eine Option ausgewählt werden.

Checkboxen

FLEX

Checkbox werden verwendet, wenn aus einer vorgegebenen Liste ein oder mehrere Elemente ausgewählt werden sollen.

(Optional) Question

Radio buttons

FLEX

Radio buttons ermöglichen es den Usern, aus einer vorgegebenen Liste eine eindeutige Auswahl zu treffen. Radio Buttons können gruppiert werden. Innerhalb einer Gruppe kann nur ein Element ausgewählt werden.

(Optional) Question

Schaltflächen

FLEX

Es wird zwischen primärem und sekundärem Button unterschieden. Der primäre Button wird für die Hauptaktion (z.B. Senden) verwendet, die auch über die Enter-Taste der Tastatur ausgelöst werden kann. Der Sekundärbutton wird für die weniger wichtigen Aktionen (z.B. Abbrechen) verwendet.

Der Standard-Button kann für vielfältige Aktionen eingesetzt werden. Buttons können auch in einer Buttongroup zusammengefasst werden. Wie bei Radio-Button-Groups, kann innerhalb einer solchen Gruppe, nur ein Element ausgewählt werden.

Mit der Klasse .btn können Schaltflächen gestaltet werden. Die Klasse kann auf <input>, <button> oder <a> Elemente angewendet warden. Es gibt vier Designvarianten:

Buttons Markup

<button type="button" class="btn">Unstyled</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn" disabled>Disabled</button>

<button type="button" class="btn btn-link">Button link</button>

Print button

<button type="button" class="btn btn-link hidden-xs"><span class="icon icon--print"></span></button>

Gruppen von Schaltflächen

FIX