HTML/Tutorials/Formulare erstellen und gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel richtet sich an Anfänger, die zum ersten Mal ein Formular erstellen. Drei Beispiele werden erstellt:

  • Suchformular, das nur aus einem Eingabe-Feld und einem Absende-Button besteht
  • Login-Formular
  • Bestellformular mit unterschiedlichen Arten von Eingabe-Elementen
Beachten Sie: Webseiten sind für Menschen gemacht. In Formularen spielt die Nutzerführung eine besonders große Rolle. Ohne aussagekräftige Beschriftungen, die von allen Nutzern verstanden werden, können Formulare nicht korrekt ausgefüllt werden. Geben Sie Hilfen beim Ausfüllen des Formulars und bei der Korrektur falsch ausgefüllter Felder. Fassen Sie Gruppen zusammengehörender Felder zusammen. In diesem Zusammenhang lesenswert: Barrierefreiheit/Benutzereingaben zugänglich gestalten

Inhaltsverzeichnis

[Bearbeiten] Was ist ein Webformular?

Ein Webformular dient dem Versand von Daten, die an eine E-Mail-Adresse oder eine Software geschickt werden. Formulare werden mit dem form-Element erzeugt. Alle in diesem Element enthaltenen Eingabe-Elemente werden beim Versand berücksichtigt. Die eingegebenen Daten bzw. vorgegebene Werte werden an die Zieladresse übermittelt. Die Zieladresse notiert man im action-Attribut des form-Elements.

[Bearbeiten] Angaben für die Datenübertragung (Namen)

Eingabe-Elemente brauchen einen Namen, damit der eingegebene Wert bzw. Inhalt von der empfangenden Seite (eine serverseitige Software) „verstanden“ werden kann. Nur so kann der Empfänger z. B. Benutzernamen und Passwort auseinander halten.

Um Felder zu benennen, benutzen Sie das name-Attribut.

[Bearbeiten] Angaben für die Benutzerführung (Beschriftungen)

Nutzen Sie label-Elemente für die Beschriftung von Elementen, damit dem Benutzer veranschaulicht werden kann, wozu das jeweilige Eingabe-Element dient.

Ein label-Element ist logisch mit einem bestimmten Eingabe-Feld verknüpft. Diese Verknüpfung erreichen Sie dadurch, dass Sie die Beschriftung eines Feldes und das Feld in dasselbe label-Element einfügen.

Befindet sich das Eingabefeld nicht in dem label, können Sie die Verbindung über die Attribute id und for herstellen. Dazu vergeben Sie dem Eingabe-Element eine eindeutige id. Ein oder mehrere label-Elemente können Sie nun mit diesem Element verknüpfen, indem Sie in einem for-Attribut denselben Wert angeben.

[Bearbeiten] Formular-Versand

HTML stellt für das Abschicken von Formularen aus historischen Gründen zwei Möglichkeiten bereit[1], jedoch sollte man für einen Button das passend benannte button-Element verwenden.


[Bearbeiten] Beispiel

Beispiel: Einfaches Formular mit verschachteltem label (Suche in Google) ansehen …
<form action="https://google.de/search">
  <label>Suchbegriff <input name="q"></label>
  <button>finden</button>
</form>
Das label-Element umschließt die Beschriftung und das input-Element, wodurch die logische Verknüpfung hergestellt wird. Ein Klick auf den Text „Suchbegriff“, also auf das label-Element, legt den Fokus auf das Eingabeelement. Das heißt, dort wird ein blinkender Cursor zum sofortigen Losschreiben bereitgestellt.
Beispiel: Einfaches Formular mit for/id-Verknüpfung (Suche in Google) ansehen …
<form action="https://google.de/search">
  <label for="q">Suchbegriff</label>
  <input id="q" name="q">
  <button>finden</button>
</form>
Der Zusammenhang zwischen dem input-Element und seiner Beschriftung (label-Element) wird durch die ID hergestellt: Die ID hat den Wert „q“, welcher sich im for-Attribut des label-Elements wieder findet.

[Bearbeiten] Die Datenübertragung

Wenn Daten von einem Formular an eine Zielseite übertragen werden sollen, so werden alle Werte der Eingabe-Elemente mit einem Schlüssel, dem Inhalt des jeweiligen name-Attributs, als Schlüssel-Wert-Paar übertragen. Öffnen Sie doch einmal das obige Google-Suchformular in einem neuen Browser-Tab oder -Fenster und beachten Sie (natürlich nach dem Absenden auf der Google-Trefferseite) den URL-Parameter „q“ in der Adresszeile Ihres Browsers! Dort sollte so etwas wie google.de/search?q=Ihr+Suchbegriff stehen.

[Bearbeiten] Methode POST oder GET?

Es gibt zwei unterschiedliche HTTP-Methoden, wie die Formulardaten an den Server übermittelt werden. Diese werden mit POST und GET bezeichnet. Ohne hier auf die technischen Aspekte einzugehen, gilt die Faustregel: Ist es der vorrangige Sinn des Formulars, Daten vom Server abzurufen (z. B. eine Suchanfrage), so verwendet man GET; ist der Hauptzweck eher das Übermitteln von Daten zum Server (z. B. das Abschicken einer Bestellung an einen Online-Shop), so verwendet man POST.

Die GET-Methode ist der voreingestellte Wert (default), der automatisch gilt, wenn kein method-Attribut notiert wurde. Möchte man die POST-Methode nutzen, so muss method="post" im öffnenden form-Tag notiert werden.

Umfassender befasst sich der Beitrag „PHP/Anwendung und Praxis/Formulardaten serverseitig auswerten“ mit der Frage.

[Bearbeiten] Funktionsweise von Buttons

Die voreingestellte Funktionalität eines Buttons ist das Versenden eines Formulars (submit, engl. einreichen, vorlegen). Will man eine andere Funktionalität, so benötigt das button-Element einen passenden Wert im type-Attribut.

Manchmal möchte man einem Benutzer zweierlei Aktionen anbieten und verwendet dafür zwei verschiedene Buttons. Will man dem Server sagen, ob man z. B. den „löschen“- oder stattdessen den „bearbeiten“-Button benutzt hat, kann man einem Button ebenso einen Namen geben, welcher dann bei Betätigung als Schlüssel an den Server übertragen wird.

Beispiel: benannte Buttons
<button name="task" value="delete">löschen</button>
<button name="task" value="edit">bearbeiten</button>
Betätigt man den „löschen“-Button, erhält der Server das Schlüssel-Wert-Paar „task=delete“, betätigt man hingegen den „bearbeiten“-Button, erhält der Server das Schlüssel-Wert-Paar „task=edit“.

[Bearbeiten] Vordefinierte Werte

Man kann für Texteingabe-Elemente einen vordefinierten Wert vorgeben, indem man das value-Attribut damit befüllt. Buttons können auch einen Wert übertragen, wenn man ihnen ein solches Attribut gibt.

Beispiel: Suchformular mit vorausgefüllten Werten ansehen …
<form action="https://google.de/search">
  <label>Suchbegriff <input name="q" value="SELFHTML"></label>
  <button name="b" value="find!!!">finden</button>
</form>
Wenn Sie das Beispiel in einem neuen Browser-Tab oder -Fenster öffnen, dann können Sie nach dem Klick auf den Button in der Adresszeile des Browsers sehen, dass sowohl ein URL-Parameter q, als auch ein URL-Parameter b übertragen werden. q hat (sofern Sie den Wert nicht verändert haben) den Wert „SELFHTML“, b hat den Wert „find!!!“. In der Adresszeile finden Sie also google.de/search?q=SELFHTML&b=find!!!

[Bearbeiten] Semantischer Code

Das erste Suchformular enthält drei Elemente: Ein label-, ein input- und ein button-Element. Diese drei Elemente können gut in einer Zeile angeordnet werden. Aus Sicht der Dokumentstruktur ist das form-Element aber kein Textbaustein. Es gruppiert lediglich Eingabeelemente als zu einem gemeinsamen Datensatz gehörend. Daher ist es wichtig, sich über sinnvolle Elemente zur Textstrukturierung Gedanken zu machen.

Da wir aus visueller Sicht eine einzige Zeile für das Suchformular erwarten, wäre ein Textabsatz bereits eine sinnvolle Lösung:

Beispiel: fertiges Suchformular für eine Google-Suche ansehen …
<form action="https://google.de/search">
  <p>
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </p>
</form>

Man kann sich nun streiten, ob der Textabsatz im Formular, oder das Formular im Textabsatz zu stehen habe. Für dieses konkrete Beispiel ist das völlig irrelevant, da beide Möglichkeiten gleichermaßen funktionieren:

Beispiel: fertiges Suchformular für eine Google-Suche - andere Code-Reihenfolge ansehen …
<p>
  <form action="https://google.de/search">
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </form>
</p>

[Bearbeiten] Visuelle Gestaltungsmöglichkeiten aufgrund semantischen Codes

Will man ein Formular gestalten, benötigt man sowohl die Layoutsprache CSS, als auch eine Dokumentstruktur, die passende Elemente zum Gestalten anbietet. Notiert man beispielsweise alles in einer Zeile und sorgt ausschließlich mit br-Elementen für Zeilenumbrüche, so hebt man auf der einen Seite die wichtige Trennung zwischen Markup und Layout auf, indem man HTML-Elemente ausschließlich wegen ihrer (voreingestellten) Darstellung ins Dokument schreibt, und hat auf der anderen Seite nicht genügend Elemente im Dokument, für die man ausgeklügelte Darstellungsregeln in der Layoutsprache festlegen könnte. Es lohnt sich also sehr, semantisch sinnvolles Markup zu verwenden.

Wenden wir uns nun einem Login-Formular zu. Für dieses brauchen wir zwei Eingabefelder (1. Benutzername und 2. Passwort), sowie einen Submit-Button. Bereits hier stellt sich aber die Frage, wie man diese drei Elemente in eine sinnvolle Dokumentstruktur einbindet. Drei mögliche Ansätze seien hier einmal vorgestellt:

[Bearbeiten] Der Klassiker aus dem Urzeiten des Webs: Tabellenlayout

Beispiel: Login-Formular mit Tabelle ansehen …
<form action="login.php" method="post">
  <table>
    <tbody>
      <tr>
        <th>
          <label for="login">Benutzer</label>
        </th>
        <td>
          <input id="login" name="login">
        </td>
      </tr>
      <tr>
        <th>
          <label for="pass">Passwort</label>
        </th>
        <td>
          <input id="pass" name="pass" type="password">
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
          <button>anmelden</button>
        </td>
      </tr>
    </tbody>
  </table>
</form>
Diese Wahl der Dokumentstruktur ist nicht unbegründet, handelt es sich doch um tabellarische Daten: Benutzername bzw. Passwort und der jeweils zugehörende Wert. Problematisch wird diese Wahl beim Submit-Button. Er gehört nicht zu den tabellarischen Daten, wird in der Dokumentstruktur jedoch als Wert (deswegen zweite Spalte) ausgezeichnet, zu dem es keinen Namen (deswegen eine leere erste Zelle) gibt.

[Bearbeiten] Listen anstelle von Tabellen

Eine elegantere Möglichkeit ist die Verwendung einer Liste. HTML bietet hierzu eine (un)geordnete Liste oder eine Definitionsliste an.

Beispiel: Login-Formular mit ungeordneter Liste ansehen …
<form action="login.php" method="post">
  <ul><!-- alternativ wäre <ol> für geordnete Liste -->
    <li>
      <label for="login">Benutzer</label>
      <input id="login" name="login">
    </li>
    <li>
      <label for="pass">Passwort</label>
      <input id="pass" name="pass" type="password">
    </li>
    <li>
      <button>anmelden</button>
    </li>
  </ul>
</form>
Der Reiz dieser Dokumentstruktur liegt in ihrem überschaubarerem Quelltext. Möchte man die Listenpunkte ohne Aufzählungszeichen (bei Verwendung von <ul>) bzw. ohne Nummerierung (bei Verwendung von <ol>) haben, so kann man mit der Gestaltungssprache CSS eine passende Darstellungsregel einsetzen.

Auch mit einer Definitionsliste lässt sich das Login-Formular sinnvoll auszeichnen:

Beispiel: Login-Formular mit Definitionsliste ansehen …
<form action="login.php" method="post">
  <dl>
    <dt>
      <label for="login">Benutzer</label>
    </dt>
    <dd>
      <input id="login" name="login">
    </dd>
    <dt>
      <label for="pass">Passwort</label>
    </dt>
    <dd>
      <input id="pass" name="pass" type="password">
    </dd>
    <dd>
      <button>anmelden</button>
    </dd>
  </dl>
</form>
Das Standard-Layout des Browsers sieht vor, dass eine Definitionsliste „hängend formatiert“ dargestellt wird. Das bedeutet, dass das dd-Element mit einer Einrückung vom linken Rand angezeigt wird. Außerdem stehen dt- und dd-Elemente jeweils in einer neuen Zeile. Will man das anders haben, muss man wieder CSS bemühen und andere Darstellungsregeln verwenden.

[Bearbeiten] Wenn die Beschriftung den Gestalter stört

Beachten Sie: Eingabe-Elemente sollten Sie niemals ohne zugehörendes label-Element verwenden, da Sie sonst die Bedienbarkeit erschweren und Barrieren errichten.
Beachten Sie: Wenn Sie aus gestalterischen Gründen die Beschriftung entfernen wollen, achten Sie darauf, dass Sie dadurch Menschen mit Behinderungen nicht benachteiligen, die auf assistive Technologien angewiesen sind.
Beispiel: benutzerfreundliches Suchformular ohne sichtbare Beschriftung ansehen …
<form action="https://google.de/search">
  <p>
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </p>
</form>
label[for=q] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}
Das Label-Element bekommt hier eine Schriftgröße und eine Zeilenhöhe von Null zugewiesen. Screenreader oder Braillezeile geben es trotzdem aus.

Eine weitere Möglichkeit ist die Verwendung des Attributs aria-label.

Beispiel: benutzerfreundliches Suchformular ohne sichtbare Beschriftung ansehen …
<form action="https://google.de/search">
  <input id="q" name="q" aria-label="Suchbegriff">
  <button>finden</button>
</form>
Assistive Technologien „beschriften“ das Eingabefeld mit "Suchbegriff".

[Bearbeiten] Komplexere Formulare mit fieldset gliedern

Manchmal braucht man ein Formular mit verschiedenen Abschnitten, in denen unterschiedlichste Arten von Daten erfasst werden. Hierzu bietet es sich an, diese Abschnitte im Markup voneinander zu trennen. Hierzu bietet sich das fieldset-Element an. Betrachten wir uns einmal folgendes Bestellformular:

Beispiel: Bestellformular mit verschiedenen Abschnitten ansehen …
<form action="order.php">
  <fieldset>
    <legend>Ware</legend>
    <ul>
      <li>
          <label for="article-1">Plüsch-Teddybär</label>
          <input id="article-1" name="article-1" type="number" value="0">
      </li>
      <li>
          <label for="article-2">Sofakissen "Sonnenblume"</label>
          <input id="article-2" name="article-2" type="number" value="0">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Bezahlung</legend>
    <p>
      <label for="payment">Art der Bezahlung</label>
      <select id="payment" name="payment">
        <option value="ae">American Express Card</option>
        <option value="master">MasterCard</option>
        <option value="visa">VISA</option>
        <option value="prepayment">Vorkasse</option>
      </select>
    </p>
    <p>
      <input id="email-receipt" name="email-receipt" type="checkbox">
      <label for="email-receipt">Quittung per E-Mail</label>
      <label for="email">an folgende Adresse</label>
      <input id="email" name="email" type="email">
    </p>
  </fieldset>
  <fieldset>
    <legend>Versand</legend>
    <dl>
      <dt>Lieferanschrift</dt>
      <dd>
          <ul>
            <li>
              <label for="recipient-name">Name</label>
              <input id="recipient-name" name="recipient-name">
            </li>
            <li>
              <label for="recipient-address">Anschrift</label>
              <input id="recipient-address" name="recipient-address">
            </li>
            <li>
              <label for="recipient-zip">PLZ</label>
              <input id="recipient-zip" name="recipient-zip">
              <label for="recipient-city">Ort</label>
              <input id="recipient-city" name="recipient-city">
            </li>
          </ul>
      </dd>
      <dt>Rechnungsanschrift</dt>
      <dd>
          <ul>
            <li>
              <label for="buyer-name">Name</label>
              <input id="buyer-name" name="buyer-name">
            </li>
            <li>
              <label for="buyer-address">Anschrift</label>
              <input id="buyer-address" name="buyer-address">
            </li>
            <li>
              <label for="buyer-zip">PLZ</label>
              <input id="buyer-zip" name="buyer-zip">
              <label for="buyer-city">Ort</label>
              <input id="buyer-city" name="buyer-city">
            </li>
          </ul>
      </dd>
    </dl>
  </fieldset>
  <fieldset>
    <legend>Zusatz</legend>
    <p>
      <label for="message">Ihre Nachricht an uns</label>
      <textarea id="message"></textarea>
    </p>
  </fieldset>
  <p><button>jetzt Kostenpflichtig bestellen</button></p>
</form>
Dieses Beispiel verwendet verschiedene Eingabemöglichkeiten wie mehrzeiliges Textfeld, Auswahlliste und Checkboxen neben reinen Textzeilen. Die verschiedenen Bereiche werden mit fieldset-Elementen voneinander abgegrenzt. Die Beschriftung eines fieldsets erfolgt mit einem legend-Element.

[Bearbeiten] Siehe auch


[Bearbeiten] Quellen

  1. SelfHTML.blog: input oder button für submit-Elemente?
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML