Formulare mit HTML & CSS

In diesem Blog schauen wir uns die verschiedenen Tags für Formulare bzw. die Eingabe von Daten auf einer Webseite an. Ausserdem erkläre ich kurz, wie ein Input-Element mit Label funktioniert und wie die verschiedenen Tags mit CSS einzeln gestaltet werden können.

Noah von Matt

Struktur

Zuerst schauen wir uns den Aufbau eines Formulares an. Dazu braucht es die umschliessenden form-Tags, welche alles zusammenhalten. Eine weitere Unterteilung und Verkapselung sollte unbedingt vorgenommen werden. Dies hat mehrere Vorteile:

Die richtige Benutzung von Tags kann Fehler vermeiden, wodurch die Webseite in dieser Kategorie der SEO besser bewertet wird.
Der Code wird einfacher und schneller zu lesen und damit anzupassen.
Die einzelnen Elemente bzw. deren Container können besser formatiert (Farbe, Form, Schatten, …) werden.
Die richtige Unterteilung hilft auch der Benutzerfreundlichkeit. Da beispielsweise Bildschirmleser auf einzelne Tags angewiesen sind, und mittels Keyboard-Eingabe schneller navigiert werden kann.

Und welche Möglichkeiten haben wir dazu?

Um ein Teil des Formulars abzugrenzen bzw. zusammenzufassen wird der fieldset-Tag benutzt. Diesem Teil kann ein Titel im legend-Tag zugewiesen werden.

<form>
    <fieldset>
        <legend>Teil 1: Nutzer</legend>
        <div>
            <input id="name" name="nutzer_name">
            <label for="name">Name</label>
        </div>
        <div>
            <input type="email" id="email" name="nutzer_email">
            <label for="email">E-Mail</label>
        </div>
    </fieldset>
    <fieldset>
        <legend>Teil 2: ...</legend>
        ...
    </fieldset>
</form>

Um einzelne Inputs mit deren Titel bzw. Label zusammenzufassen, gibt es zwei Möglichkeiten:

Wir nehmen den label-Tag und umschliessen damit das input-Element. Vorteil davon ist, dass der Browser somit das Label mit dem Input verbindet und wir es nicht weiter deklarieren müssen. Mehr dazu weiter unten. Diese Methode bringt aber auch einen grossen Nachteil mit sich, welche die zweite Methode löst.
Die zweite Methode umschliesst das label-Element wie auch das Input-Element mit einem anderen “Container”-Element. Die umschliessenden Tags können beispielsweise ein div sein. Da das label-Element hier nicht klar mit dem Input-Element verbunden ist, müssen wir im label-Tag ‘for=”id-des-input-Element”’ schreiben. Das hilft dem Browser und Personen mit eingeschränkten Fähigkeiten, welche auf Bildschirmleser angewiesen sind, wesentlich.

<!-- Beispiel 1: label-Tags umschliessen Input -->
<label>Eine einfache Text Eingabe:
    <input id="text_eingabe" name="text_eingabe"/>
</label>
<!-- Beispiel 2: Container-Element umschliesst label und input -->
<div>
    <input id="text_eingabe" name="text_eingabe"/>
    <label for="text_eingabe">Eine einfache Text Eingabe:</label> 
    <!-- Im späteren Teil zeige ich auf, warum diese Methode für gewisse Designs notwendig ist -->
</div>

Eingabefelder: input, radio buttons und mehr

Wie Sie sicherlich wissen, gibt es in einem Formular nicht nur das Textfeld zur Eingabe. Heutzutage kann der Nutzer auf verschiedene Möglichkeiten zur Eingabe gebeten werden. Das input-Element ist hier keine Ausnahme. Mit dem Attribut “type” kann es spezifisch verschiedene Eingabewerte entgegennehmen. Hier gibt es text, email, tel (Telefonnummer), datetime-local (Datum mit Zeit) und viele weitere. Alle input types zeigt die Dokumentation “The HTML5 input types” an.
Mit dieser Information kann der Browser das Eingabefeld extra dafür anpassen. Zum Beispiel ist für die Eingabe eines Datums ein Feld mit Jahren und Monaten nützlich. Oder auf Geräten ohne physische Tastatur müssen bei der Eingabe von Zahlen nur Zahlen zur Auswahl stehen. Für die Mail braucht es sicherlich ein “@”, somit kann dieses gleich auf der ersten Seite der digital angezeigten Eingabe vorgeschlagen werden.

Das input-Element kann innerhalb auch ein datalist-Element enthalten. Darüber können dem Browser vordefinierter Optionen mitgegeben werden, aus denen der Nutzer auswählen kann. In manchen Browsern werden die Werte (bzw. einen Teil davon) angezeigt sobald der Nutzer in das Input klickt. Bei anderen Browsern wird erst nach der Eingabe übereinstimmende Optionen vorgeschlagen. Zum Beispiel die Option “Apfel” nach der Eingabe eines “Ap”.

<div>
    <input type="text" name="frucht" id="frucht" list="frucht_vorschlaege">
    <label for="frucht">Welche Frucht möchten Sie?</label>
    <datalist id="frucht_vorschlaege">
      <option>Apfel</option>
      <option>Beeren</option>
      <option>Birne</option>
      <option>Orange</option>
    </datalist>
</div>

Radio-Button und Checkboxes sind auch input-Element mit type “radio” bzw. “checkbox”. Hier macht es Sinn diese Gruppe an mehreren inputs mit einem fieldset zu umschliessen und einem legend-Element zu beschriften. In diesem Fall ist es wichtig, den zusammengehörigen inputs das gleiche name-Attribut, bzw. den gleichen Wert, zuzuweisen.

Neben dem Input-Element gibt es weitere nützlich Eingabe-Element wie

textarea: Für längere Text-Eingaben
select: Eine vordefinierte Auswahl an wenigen Optionen
progress: Zur visuellen Eingabe von Zahlen mit einem Schieber.

Styling

Nun haben wir das Formular im HTML bestimmt. Für eine tolle Benutzererfahrung reicht das aber noch nicht. Wir Menschen bestehen zum Glück auch nicht nur aus Knochen und Sehnen, sondern haben verschiedene weitere Eigenschaften wie zum Beispiel die Haarfarbe ;)
Hier kommt nun CSS zur Anwendung. Wir können damit die label, input und umschliessenden Elemente einzeln ansprechen und zum Beispiel Schriftgrösse/-farbe, Rand, Schatten, Abstand und Weiteres zuweisen.

Wie wir vorhin gesehen haben, gibt es verschiedene Typen von input-Elementen. Wie können wir diese nun unterschiedlich ansprechen? Mit CSS gibt es die Möglichkeit, Werte der Attribute gleich nach dem Tag-Namen zu bestimmen z.B. input[type=”text”]. Nun werden nachfolgende Regeln nur auf input-Element mit dem type=”text” angewendet.
Was ist nun, wenn ich das label von bestimmten input types anpassen möchte? Genau dafür ist es wichtig, wie wir im Abschnitt Struktur angeschaut haben, dass das label-Element nach dem zugehörigen input-Element kommt. Es gibt in CSS die Möglichkeit direkt nachfolgende Elemente eines bestimmten Elementes anzusprechen: input[type=”text] + label. Mit dieser Regel sprechen wir alle label an, die gleich nach input-Element mit type=”text”. So etwas ist nicht möglich, wenn das label das input-Element umschliesst.

Anmerkungen

Tag vs Element: Ein Tag ist der Anfangs- und Endteil eines Elements. Ein Element besteht zusätzlich aus dem Inhalt z.B. Text und Attributen z.B. style oder class. Unten ist das ganze Element und "<p>" bzw. "</p>" sind die Anfangs- und Schluss-Tags:
<p style=”font-size: 20px” class=”myText”>Hallo Welt</p>

div-Element: Divs stehen allgemein für Container und sind daher eine gute Möglichkeit um weitere Element zusammenfassen bzw. vom restlichen Teil trennen zu können.

Quellen

Bilder

- Hauptbild: von Sergi Kabrera auf Unsplash