HTML/Tutorials/Formulare erstellen und gestalten
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
Inhaltsverzeichnis
Was ist ein Webformular?[Bearbeiten]
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.
Angaben für die Datenübertragung (Namen)[Bearbeiten]
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. Die Browser versenden Paare aus name und value. Dabei werden ausschließlich diejenigen Eingabeelemente versendet, die ein nichtleeres name-Attribut besitzen.
Um Felder zu benennen, benutzen Sie das name-Attribut.
Angaben für die Benutzerführung (Beschriftungen)[Bearbeiten]
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.
Formular-Versand[Bearbeiten]
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.
<form action="https://google.de/search">
<label>Suchbegriff <input name="q"></label>
<button>finden</button>
</form>
<form action="https://google.de/search">
<label for="q">Suchbegriff</label>
<input id="q" name="q">
<button>finden</button>
</form>
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.Die Datenübertragung[Bearbeiten]
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.
Methode POST oder GET?[Bearbeiten]
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/Tutorials/Formulardaten serverseitig auswerten mit der Frage.
Funktionsweise von Buttons[Bearbeiten]
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.
<button name="task" value="delete">löschen</button>
<button name="task" value="edit">bearbeiten</button>
Vordefinierte Werte[Bearbeiten]
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.
<form action="https://google.de/search">
<label>Suchbegriff <input name="q" value="SELFHTML"></label>
<button name="b" value="find!!!">finden</button>
</form>
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!!!Semantischer Code[Bearbeiten]
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:
<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:
<p>
<form action="https://google.de/search">
<label for="q">Suchbegriff</label>
<input id="q" name="q">
<button>finden</button>
</form>
</p>
Visuelle Gestaltungsmöglichkeiten aufgrund semantischen Codes[Bearbeiten]
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:
Der Klassiker aus den Urzeiten des Webs: Tabellenlayout[Bearbeiten]
<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>
Listen anstelle von Tabellen[Bearbeiten]
Eine elegantere Möglichkeit ist die Verwendung einer Liste. HTML bietet hierzu eine (un)geordnete Liste oder eine Definitionsliste an.
<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>
<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:
<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>
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.Wenn die Beschriftung den Gestalter stört[Bearbeiten]
label-Element verwenden, da Sie sonst die Bedienbarkeit erschweren und Barrieren errichten.<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);
}
Eine weitere Möglichkeit ist die Verwendung des Attributs aria-label.
<form action="https://google.de/search">
<input id="q" name="q" aria-label="Suchbegriff">
<button>finden</button>
</form>
Man kann die Bedienbarkeit intuitiver gestalten, wenn man im Eingabefeld einen Platzhalter-Begriff eingibt. Das erreicht man mit dem placeholder-Attribut:
<form action="https://google.de/search">
<p>
<label for="q">Suchbegriff</label>
<input id="q" name="q" aria-label="Suchbegriff" placeholder="Suchbegriff">
<button>finden</button>
</p>
</form>
label[for=q] {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
Komplexere Formulare mit fieldset gliedern[Bearbeiten]
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:
<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>
fieldset-Elementen voneinander abgegrenzt. Die Beschriftung eines fieldsets erfolgt mit einem legend-Element.Siehe auch[Bearbeiten]
- Formulare
- HTML/Tutorials/Formulareingaben mit HTML5 validieren
- JavaScript/Tutorials/Formulareingaben mit JavaScript validieren
- PHP/Tutorials/Formulardaten serverseitig auswerten
- Barrierefreiheit
Quellen[Bearbeiten]
- ↑ SelfHTML.blog: input oder button für submit-Elemente?
label-Element umschließt die Beschriftung und dasinput-Element, wodurch die logische Verknüpfung hergestellt wird. Ein Klick auf den Text „Suchbegriff“, also auf daslabel-Element, legt den Fokus auf das Eingabeelement. Das heißt, dort wird ein blinkender Cursor zum sofortigen Losschreiben bereitgestellt.