Kategorien
  • HowTos

Formulare

Überblick Visual Style Guide

Formulare

Formulare sollen in Stud.IP gemäß LifTers014 einheitlich gestaltet werden. Ein Standard Formular wird wie folgt definiert:

  1. <form class="default" ...>
  2.     ...
  3. </form>
[Code herunterladen]

Allgemein

Lange Erklärungstexte am Anfang des Formulars sollten vermieden werden. Erklärungen können über Tooltips an den Elementen (siehe unten) oder ggf. Texte in der Hilfelasche realisiert werden.

Gruppierung der Formularfelder

Formularfelder (oder auch Input-Elemente) sollen gruppiert werden, wenn sie inhaltlich oder funktional zusammenhängen, damit dieser Zusammenhang deutlich wird. Jede Gruppe sollte eine passende Überschrift haben.

  1. <form class="default" ...>
  2.       <fieldset>
  3.           <legend>Gruppenüberschrift 1</legend>
  4.           ...
  5.       </fieldset>
  6.       <fieldset>
  7.           <legend>Gruppenüberschrift 2</legend>
  8.           ...
  9.       </fieldset>
  10. </form>
[Code herunterladen]

Auch Formulare mit lediglich einer Gruppierung sind zulässig. In Dialogen wird eine einzelne Gruppierung jedoch entfernt!

Ein-/Ausblenden von Gruppen

Einzelne Gruppen können aus- bzw. eingeblendet werden, indem entweder dem fieldset (für eine spezielle Gruppe) oder dem gesamten Formular (für alle Gruppen innerhalb) die Klasse collapsable gegeben wird. Dadurch wird durch einen Klick auf die legend des fieldsets die Gruppe versteckt bzw. wieder angezeigt. Soll die Gruppe bei der initialen Darstellung ausgeblendet sein, muss das fieldset zusätzlich mit der Klasse collapsed ausgezeichnet werden.

  1. <form class="default" ...>
  2.       <fieldset>
  3.           <legend>Gruppenüberschrift 1</legend>
  4.           ...
  5.       </fieldset>
  6.       <fieldset class="collapsable collapsed">
  7.           <legend>Gruppenüberschrift 2</legend>
  8.           ...
  9.       </fieldset>
  10. </form>
[Code herunterladen]

Labels (Feldbeschriftungen)

Generell sollte analog zu LifTers010 das HTML-Markup <label> verwendet werden. Beispiel:

  1. <form class="default" ...>
  2.        <fieldset>
  3.            <legend>Beschriftung</legend>
  4.            ...
  5.            <label>Eingabe A
  6.            <input name="eingabe_a" type="text" placeholder="Texteingabe A" required>
  7.            </label>
  8.            ...
  9.        </fieldset>
  10.  </form>
[Code herunterladen]
  • Das erste Wort des Labels sollte mit einem großen Anfangsbuchstaben geschrieben werden.
  • Das Label sollte nicht mit einem Doppelpunkt abgeschlossen werden.

Wording:

  • Es sollen aussagekräftige Labels gewählt werden.
  • Fachbegriffe sollen vermieden werden.
  • Keine ganzen Sätze.

Nicht änderbare / deaktivierte Eingabefelder

Falls in einem Formular im aktuellen Kontext ein Feld nicht geändert werden darf, so muss das Attribut disabled an das Eingabefeld gehängt werden. Es ist nicht zulässig, einfach nur den Text OHNE Formularelement auszugeben!

Beispiel aus lib/classes/StudipSemTreeViewAdmin.class.php

  1. <form class="default" ...>
  2.     <fieldset>
  3.         <legend><?= _("Bereich editieren") ?></legend>
  4.  
  5.         <label>
  6.             <?= _("Name des Elements") ?>
  7.             <input type="text" name="edit_name"
  8.                 <?= $this->tree->tree_data[$this->edit_item_id]['studip_object_id'])? 'disabled' : '' ?>
  9.                    value="<?= htmlReady($this->tree->tree_data[$this->edit_item_id]['name']) ?>">
  10.         </label>
  11.     ...
  12.     </fieldset>
  13. </form>
[Code herunterladen]

Ausrichtung der Formularfelder

Schmale Formularfelder dürfen in mehreren Spalten angeordnet werden. Bei schmaleren Anzeigen brechen diese Felder bei korrekter Anwendung automatisch um.

Untereinander angeordnete Formularfelder sollten linksbündig angeordnet sein. Wenn mehrere Formularfelder eine logische Folge bilden oder aus anderen Gründen direkt zusammengehören, sollten Sie in einer Horizntalen Gruppierung (hgroup) angeordnet werden.

Reguläre nebeneinader angeordnete Elemente

Um Elemente bei passend großem Bildschirm nebeneinander anzuzeigen, werden diese in Spalten angeordnet. Es gibt insgesamt 6 Spalten und man Elementen eine Breite von 1 - 6 Spalten zuordnen. Dafür gibt es die Klassen col-1 bis col-5 - keine Angabe bedeutet dabei ganze Breite (enstpräche einem col-6).

Diese Elemente werden dann bei schmaleren Anzeigen automatisch unterienander angezeigt.

  1. <form class="default" ...>
  2.     <label class="col-3">
  3.         Vorname
  4.         <input type="text" name="first-name">
  5.     </label>
  6.  
  7.     <label class="col-3">
  8.         Nachname
  9.         <input type="text" name="last-name">
  10.     </label>
  11. </form>
[Code herunterladen]

Horizontale gruppiert angeordnete Elemente

Um Elemente in einer Zeile horizontal zu gruppieren, benötigt es ein Wrapper-Element mit der Klasse .hgroup. Dieses Element nimmt die gleichen Größen wie die Elemente an und verteilt den Platz innerhalb von sich selbst erstmal gleich, aber die einzelnen Elemente können auch wiederum durch die bekannten Größenangaben beeinflusst werden.

Die hgroup ist lediglich zulässig für kombinierte Eingabefelder, wie Telefonnummern, Datumsangaben etc. sowie RadioButtons mit sehr kurzen Labels (z.B. Geschlecht: m/w/kA, Schalter: ja/nein/kA, etc.). Es dürfen keine zu großen Felder und/oder zu lange Label-Texte bei der horizontalen Gruppierung verwendet werden!

  1. <form class="default" ...>
  2.  
  3.      <!-- ... -->
  4.  
  5.         <div>
  6.             <?= _('Geschlecht') ?>
  7.         </div>
  8.  
  9.         <section class="hgroup">
  10.             <label>
  11.                 <input type="radio" <? if (!$geschlecht) echo 'checked' ?> name="geschlecht" value="0">
  12.                 <?= _("unbekannt") ?>
  13.             </label>
  14.  
  15.             <label>
  16.                 <input type="radio" <? if ($geschlecht == 1) echo "checked" ?> name="geschlecht" value="1">
  17.                 <?= _("männlich") ?>
  18.             </label>
  19.  
  20.             <label>
  21.                 <input type="radio" name="geschlecht" <? if ($geschlecht == 2) echo "checked" ?> value="2">
  22.                 <?= _("weiblich") ?>
  23.             </label>
  24.         </section>
  25.      <!-- ... -->
  26. </form>
[Code herunterladen]

Es gibt noch eine zweite Variante, die eingesetzt werden darf, wenn es sich bei dem Titel tatsächlich um das Label eines nachfolgenden Form-Elementes handelt. Beispiel aus der Nutzerverwaltung:

  1. <label for="inaktiv">
  2.     <?= _('inaktiv') ?>
  3. </label>
  4.  
  5. <section class="hgroup">
  6.     <select name="inaktiv" class="size-s" id="inaktiv">
  7.     <? foreach(array('<=' => '>=', '=' => '=', '>' => '<', 'nie' =>_('nie')) as $i => $one): ?>
  8.         <option value="<?= htmlready($i) ?>" <?= ($request['inaktiv'][0] === $i) ? 'selected' : '' ?>>
  9.             <?= htmlReady($one) ?>
  10.         </option>
  11.     <? endforeach; ?>
  12.     </select>
  13.  
  14.     <label>
  15.         <input name="inaktiv_tage" type="number" id="inactive" value="0">
  16.         <?= _('Tage') ?>
  17.     </label>
  18. </section>
[Code herunterladen]

Kombinierte Variante mit col- und hgroup-Angaben

Es ist ebenfalls möglich und zulässig, horizontal gruppierte Element in Spalten einzuteilen:

  1. <label class="col-3">
  2.     Telefonnummer
  3.     <section class="hgroup">
  4.         + <input type="text" size="3">
  5.         <input type="text" maxlength="5" class="no-hint" size="5"> /
  6.         <input type="text" maxlength="10" size="10">
  7.     </section>
  8. </label>
  9.  
  10. <label class="col-3">
  11.     Fax
  12.     <section class="hgroup">
  13.         + <input type="text" size="3">
  14.         <input type="text" maxlength="5" class="no-hint" size="5"> /
  15.         <input type="text" maxlength="10" size="10">
  16.     </section>
  17. </label>
[Code herunterladen]

Ausrichtung der Labels

Die Labels sollen linksbündig und oberhalb der Eingabefelder angebracht sein. Dies erleichtert die Lesbarkeit der Beschriftungen und verdeutlicht den Zusammenhang zwischen den Feldbeschriftungen und den Eingabefeldern.

Wenn der Platz in der Vertikalen beschränkt ist, sollen die Beschriftungen linksbündig und links neben den Formularfeldern angebracht sein. Dies erhält die Lesbarkeit und spart Platz in der Vertikalen. In diesem Fall sollten die Labels so gewählt werden, dass sie sich in ihrer Länge möglichst wenig unterscheiden, damit die Lücken zwischen den Labels und den Eingabefeldern nicht zu groß werden.

Innerhalb eines Kontextes sollten die Beschriftungen einheitlich angeordnet werden.

Placeholder/Platzhalter

Das placeholder-Attribut dient zum Befüllen von Eingabefeldern mit kurzen Hinweisen. Dieser Inhalt verschwindet, sobald ein Nutzer in das Eingabefeld klickt.

  • Placeholder sollten nicht als Alternative zum Label verwendet werden.
  • Placeholder sollten sparsam verwendet werden.

Beispiel für ein korrekt verwendetes placeholder-Attribut: TODO: Screenshot

Beispiel für ein falsches placeholder-Attribut:

Art der Formularfelder

Die Art der Eingabefelder soll so gewählt werden, dass man an ihr erkennen kann, welche Eingaben möglich sind. Ein Textfeld dient zur freien Eingabe von Zeichen ohne Beschränkungen (außer in der Zeichenanzahl). Checkboxen, Radio Buttons oder Drop-Down Listen werden verwendet, um die Anzahl der Optionen einzuschränken oder für Einträge, wo sich Nutzer leicht vertippen.

Größe der Formularfelder

Eingabefelder sollen groß genug sein, um typische Eingaben entgegen zunehmen, ohne dass man "über den rechten Rand hinausschreibt". Die Größe der Formularfelder soll so gewählt werden, dass sie deutlich machen, welche Eingaben dort möglich sind. Beispiel: Das Eingabefeld für die Veranstaltungsnummer sollte kürzer sein als das für den Veranstaltungstitel.

Das Stud.IP-Stylesheet schlägt standardmäßig drei Größen vor (CSS-Klassen "size-s","size-m" und "size-l"):

  • size-s: 10em (gedacht für kurze Eingaben wie z.B. Zahlen)
  • size-m: 48em
  • size-l: 100%
  1. <form class="default" ...>
  2. ...
  3.     <label>
  4.         Kurze Eingabe
  5.         <input type="text" class="size-s">
  6.     </label>
  7.  
  8.     <label>
  9.         Mittlere Eingabe
  10.         <input type="text" class="size-m">
  11.     </label>
  12.  
  13.     <label>
  14.         Längere Eingabe
  15.         <input type="text" class="size-l">
  16.     </label>
  17. ...
  18. </form>
[Code herunterladen]

Die Voreinstellung ist "size-m". Ausnahme: Für die Input-Typen "number" und "date" ist die Voreinstellung "size-s".

  1. <form class="default narrow" ...>
  2.     ...
  3. </form>
[Code herunterladen]

Schmale Formulare

Manchmal ist es notwendig, ein Formular standardmäßig besonders platzsparend anzubieten (siehe z.B. Admin > Standort > Veranstaltungshierarchie). Dafür kann dem Formular die Klasse "narrow" hinzugefügt werden. Dies sorgt dafür, dass die einzelnen Formularelemente etwas enger zusammenrücken, um ein frühzeitiges umbrechen zu vermeiden.

Kennzeichnung von Pflichtfeldern

  1. <form class="default" ...>
  2.        <fieldset>
  3.            <legend>Beschriftung</legend>
  4.            ...
  5.            <label>
  6.                <span class="required">Eingabe A</span>
  7.                <?= tooltipIcon(_('Bitte geben Sie hier nur eine Zahl ein')) ?>
  8.                <input type="number">
  9.            </label>
  10.            ...
  11.        </fieldset>
  12.  </form>
[Code herunterladen]

Pflichtfelder müssen mit einem hochgestellten roten Stern rechts neben der Feldbeschriftung gekennzeichnet werden. Die kann in einem Label mittels <span class="required"> im Quelltext umgesetzt werden.

Hinweistexte zu den Formularfeldern

Da die Beschriftung eines Formularfelds möglichst kurz sein sollte, ist es möglich, dass weitere Informationen oder erläuternde Hinweise zum entsprechenden Feld nötig sind. Ein erforderlicher Hinweis- oder Beschreibungstext zu einem Formularfeld wird mittels Tooltip realisiert. Der Tooltip wird über die vorhandene Logik <?= tooltipIcon(_('...'))?> rechts neben dem Label und ggf. hinter der Kennzeichnung eines Pflichtfeld positioniert.

Formatvorgaben und Eingabevalidierung

Wenn Eingaben nur in einem bestimmten Format erfolgen dürfen, soll dies kenntlich gemacht werden, entweder durch

  • entsprechende Wahl bzw. Gestaltung der Formularfelder,
  • eine "intelligente" Interpretation der Eingaben (z.B. Erkennung von 15 oder 1500 als Uhrzeit 15:00 Uhr) oder
  • Hinweise beim Eingabefeld siehe Hinweistexte.
  • Verwendung entsprechender Input-Types (siehe Eingabevalidierung?)

Die Eingabevalidierung soll, wenn möglich, direkt nach Verlassen des jeweiligen Eingabefeldes erfolgen. Zu jedem nicht ausgefüllten Pflichtfeld bzw. zu jedem sonstwie falsch ausgefüllten Eingabefeld soll der Korrekturhinweis direkt bei dem jeweiligen Eingabefeld erfolgen, so dass die Aufmerksamkeit des Benutzers direkt auf die noch zu vorzunehmenden bzw. zu korrigierenden Eingaben gelenkt werden.

Weitere Informationen: Eingabevalidierung

Buttons

Der Button zum Abschicken/Speichern/Übernehmen der eingegebenen Daten ("primäre Aktion") sollte linksbündig mit den Formularfeldern abschließen und sich direkt unterhalb des Formulars im <footer>-Element befinden. Damit wird deutlich, welche Daten durch einen Klick auf diesen Button übernommen werden.

Ein Button zum Abbrechen oder Zurücksetzen ("sekundäre Aktion") soll vermieden werden. Wenn er erforderlich ist, soll er sich visuell von dem Button für die primäre Aktion unterscheiden.

  1. <form class="default" ...>
  2. ...
  3.     <footer>
  4.         <?= \Studip\Button::createAccept(_("Speichern")) ?>
  5.         <?= \Studip\Button::createCancel(_("Abbrechen")) ?>
  6.     </footer>
  7. </form>
[Code herunterladen]
  • TODO: Genauere Vorgaben für die Gestaltung von Buttons für sekundäre Aktionen formulieren

Ausnahme: Buttons bei Wizards

Weiterführende Informationen

Allgemein

Placeholder

Letzte Änderung am November 26, 2018, at 11:59 AM von tleilax. remove xhtml