SideBarMenu

Formulare in Stud.IP

In Stud.IP werden grundsätzlich HTML-Formulare verwendet. Das Stylesheet von Stud.IP bietet die Möglichkeit, dem Formular ein gewisses Standardaussehen aufzulegen. Dadurch fühlt sich ein Formular für die Nutzer immer irgendwie stimmig und optisch passend an.

Uns ist dabei klar, dass Formulare nicht in ein starres Korsett gedrängt werden sollten. Was ist mit Drag&Drop Formularelementen? Was ist mit komplexen Multiselects, die Bilder enthalten sollen? Das sind Spezialfälle, die wir nicht vorhersehen können. Deshalb beschränkt sich das Stylesheet von Stud.IP auf die Grundelemente eines Formulars und versucht diese ansprechend zu gestalten. Für alles, was darüber hinaus geht, muss der Entwickler dann wieder selbst Hand anlegen.

Struktur

<form class="default">
    <section>
        <legend>Grunddaten</legend>
        <label>
            Name des Objektes
            <input type="text">
        </label>
        <label>
            Typ des Objektes
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </label>
        <label>
            <input type="checkbox">
            Objekt sichtbar schalten
        </label>
    </section>
</form>

Dies ist der grundlegende Aufbau eines HTML-Formulars in Stud.IP. Maßgeblich ist dabei vor allem die Klasse (class) des Formulars. Der Klassenname sollte dabei "default" sein. Diese Klassenname gibt dem Formular überhaupt erst das Aussehen, das es hat.

Darunter kann man eine oder mehrere fieldset-Elemente definieren. Solche Sektionen sollen laut HTML5 verwendet werden, um mehrere Formularelemente zu gruppieren, die zusammen hängen. In Stud.IP bekommt so ein Fieldset einen blauen Rahmen und wird passend eingerückt.

Unterhalb des fieldset-Elementes kann es ein legend-Element geben, das soetwas wie eine Überschrift für die fieldset beinhaltet. Man kann es auch weglassen, aber es sieht meist hübscher aus mit einem legend-Element.

Jetzt kommen meist die eigentlichen Formularelemente, die jeweils durch ein label-Element umschlossen werden. Diese Labels sind enorm wichtig, um das Formular barrierearm zu halten. Denken Sie dabei immer an die Menschen, die zum Beispiel einen Screenreader verwenden, weil sie halb- oder ganz blind sind! Auch diese Menschen können studieren und müssen Stud.IP fast vollumfänglich benutzen können. In der Praxis ist es nicht leicht, sich in einen solchen Menschen mit eingeschränktem Sehvermögen hineinzuversetzen. Aber das müssen Sie als Programmierer auch nicht. Sie müssen nur daran denken: jedes Formularelement wie <input> oder <textarea> muss ein Label haben. Auch ein placeholder-Attribut an einem input-Element ist kein Ersatz für ein Label.

Der Einfachheit halber schreiben Sie die @<label>@s wie oben angezeigt. Nur Radio-Buttons und Checkboxen sollten vor dem Label-Text stehen. Ansonsten steht der Labeltext vor dem Input-Element. Bei komplexen Eingabemöglichkeiten wie Komboboxen oder <input>s in einer Tabelle kann es sinnvoll sein, Label und Input-Element voneinander räumlich zu trennen. Das ist nicht verboten. Mit dem for-Attribut an dem Label können Sie dennoch Label-Text und <input> miteinander verbinden, sodass das Formular trotzdem barrierearm bleibt.

Besonderheiten / Goodies

In Stud.IP haben wir bisher einige besondere Funktionen eingebaut, die einfach nett sind und dem Nutzer die Verwendung des Formulars einfacher machen.

Dateiauswähler

Es ist leider unmöglich, einen <input type="file">-Dateiauswähler komplett umzustylen, dass er auf allen Geräten gleich aussieht - es sei denn, man lässt ihn verschwinden. Daher haben wir das genau so gemacht! Allerdings braucht es eine weitere CSS-Klasse, um das zu erzeugen. Schreiben Sie dafür solch eine Struktur

<label class="file-upload">
    <input type="file">
    Neues Avatarbild hochladen.
</label>

In den meisten Fällen sollte der Dateiwähler dann recht gut aussehen und zu Stud.IP passen. Es wird ein zusätzliches Icon angezeigt und die ausgewählte Datei wird grau daneben angezeigt, damit der Nutzer sieht, ob er/sie irrtümlich eine falsche Datei ausgewählt haben könnte.

Einklappbare Fieldsets

Nichts ist schlimmer als Unordnung. Gerade in sehr großen Formularen wird es manchmal hektisch. Die Fieldsets geben schon eine gute Ordnung vor. Aber eventuell will man ganze Fieldsets einklappen und erst zeigen, wenn das gewünscht ist. Das geht mit der zusätzlichen Klasse collapsable, die man entweder an das Fieldset hängen kann oder gleich an das ganze Formular, sodass es für alle Fieldsets darin gilt.

<form class="default collapsable">
    <section>
        <legend>Grunddaten</legend>
        <label>
            Name des Objektes
            <input type="text">
        </label>
    </section>
    <section>
        <legend>Erweiterte Daten</legend>
        <label>
            Typ des Objektes
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </label>
        <label>
            <input type="checkbox">
            Objekt sichtbar schalten
        </label>
    </section>
</form>

Maximale Textlänge

Sowohl an <textarea> als auch an einem <input> kann man das Attribut maxlength anhängen. Der Browser beschränkt dann die Zeichenanzahl automatisch auf den angegebenen Wert. Stud.IP zeigt rechts unten des Formularelements zudem automatisch die verbleibenden Zeichen an, die einem bei der Eingabe noch bleiben.

<input type="text" maxlength="160">

Horizontale Anordnung

Stud.IP zeig die <label> Elemente und generell fast alles im Formular untereinander an. Das hat den Vorteil, dass wenig Platz in der Breite verwendet wird und das Formular sich sogar auf Smartphones gut benutzbar ist. Der Nachteil ist allerdings, dass man jetzt viel mehr scrollen muss als zuvor. Besonders bei Radio-Buttons mit wenig Text kann das absurd aussehen und nicht gewünscht sein. Bisher bietet Stud.IP dazu lediglich die Möglichkeit, ein Container-Element wie ein <div class="hgroup"> einzubauen. In so einer hgroup werden alle Kindelemente horizontal angeordnet und nicht vertikal wie sonst.

Weitere Möglichkeiten

Nicht mit der CSS-Klasse form verbunden sind folgende Möglichkeiten:

Datepicker

Sie können einem <input type="text"> die Möglichkeit geben, einen Datepicker zu bekommen, um Datumsangaben besser eingeben zu können.

$("#id_of_my_element").datepicker();

Bedenken Sie, dass HTML5 dafür eigentlich ein <input type="date"> vorsieht. Dieses Element wäre normalerweise die bessere Alternative. Aber dabei gibt es leider Probleme, dass es in einigen Browsern nicht unterstützt wird. Daher kann man sich noch nicht darauf verlassen, dass die Eingabe auch immer gut funktioniert. Auf keinen Fall sollten Sie eine Kombination aus dem jQuery-Datepicker oben mit <input type="date"> probieren. Bei Browsern, die <input type="date"> verstehen, werden die Datepicker beide auftauchen und den Nutzer komplett verwirren.

Letzte Änderung am 20.11.2017 11:25 Uhr von Krassmus.