HTML Formular erstellen - so wird es gemacht!

Wir stellen Ihnen einen umfangreichen Artikel auf dieser Unterseite zur Verfügung, welche ihnen die Elemente eines Formulars erklärt. Dieser Artikel soll Ihnen dabei behilflich sein, dass Kontaktformular selber zu erweitern, welches sie auf dieser Seite kostenlos herunterladen und für ihre Homepage verwenden können.

Inhaltsverzeichniss:

Einleitung

HTML Formular erstellen

Bei einem HTML-Formular, häufig auch als Webformular oder auch Kontaktformular bezeichnet, handelt es sich um ein Formular auf einer Webseite, das User mit benötigten Daten füllen.

Bestätigt der Nutzer durch einen Klick auf den zum Formular gehörenden Button, dass er seine Angaben abschicken möchte, sendet der Client die eingetragenen Daten an einen Webserver. Der Server wiederum verarbeitet die erhaltenen Angaben je nach Anwendung weiter.

Zu beachten ist, dass die Übertragung per „Name“ & „Value“ Paar erfolgt. Die Attribute eines form-Elements legen fest, welche Übertragungsform der Client nutzt, welche Kodierung erfolgt und an welche Adresse die Daten geschickt werde. Da es sich bei „Submit“ um den Standardwert für type handelt, hat es keine Auswirkungen, den Typ wegzulassen.

Besonders häufig sind Formulare auf Login-Seiten oder Sozialen Netzwerken zu finden. Das Absenden der eingetragenen Daten ermöglicht das Hypertext Transfer Protocol. Es existieren unterschiedliche Elemente, die ein HTML Formular nutzt, um mit ihrer Hilfe Daten zu erfassen.

Wie das HTML Formulare erstellen gelingt

Um in HTML ein Formular zu definieren, müssen sämtliche Eingabefelder mit dem Tag <form></form> umschlossen sein. <form> nimmt verschiedene Attribute auf. Über „action“ ist es beispielsweise möglich, zu bestimmen, welche Aktion der Submit-Button bei einem Klick ausführt. In der Regel handelt es sich um eine Datei, beispielsweise ein Script, das die eingetragenen Daten in dem Formular auswertet.

Ein weiteres wichtiges Attribut ist „method“. Es definiert die gewünschte http-Methode, wobei es zwischen GET und POST unterscheidet. GET ruft Daten von einem Server ab, POST wiederum überträgt Daten an einen Server. „accept-charset“ wiederum gibt die Zeichenkodierung an, „enctype“ definiert, auf welche Art und Weise die Kodierung der Daten erfolgt, sobald die Form sie an den Server schickt. Wichtig zu beachten ist, dass dieses Attribut selbstverständlich nur bei einer POST-Methode Sinn macht.

Der Wert „name“ legt einen Namen für das Formular fest. Das Programm nutzt diesen Wert, um zu erkennen, von welchem Formular die gesendeten Daten stammen. So kann beispielsweise eine einzige JSP mehrere Formulare bearbeiten und das HTML Formulare Erstellen ist erleichtert.

Mit einem Input-Feld Daten in einem HTML Formular erfassen

Das wohl typischste Feld für ein Formular ist das input-Feld. Es legt eine Art kleine Box an, in der der Nutzer die gewünschten Daten einträgt. Das Attribut „type“ bestimmt, um welche Art von Input es sich handelt. „text“ steht für ein normales Eingabefeld, das ein Wort oder einen Satz als Eingabe erwartet.

Über seine Attribute lässt sich ein Input-Feld mit text-Typ weiter spezifizieren. Mit dem Merkmal „name“ können JavaScript, PHP-Scripts oder auch CGI-Scripts auf das Formularfeld zugreifen und für weitere Verarbeitungszwecke nutzen. Das Attribut „size“ bestimmt die Anzeigenlänge, die Maßeinheit sind Zeichen. „maxlength“ wiederum bestimmt die interne Feldlänge. Ist diese interne Feldlänge größer als die über size angegebene Feldlänge, so ermöglicht der Browser bei einer längeren Eingabe automatisch das Scrollen.

Beispiel:

<form> <input name="vorname" type="text" maxlength="255"> </form>

Ausgabe:

Soll ein „input“-Feld bereits einen vorgegebenen Wert haben, der sich jedoch nach Belieben ändern lässt, so ist das Schlüsselwort „value“ sehr nützlich. Es gibt an, mit welchem Wort das Feld bereits beim Anzeigen des Formulars gefüllt ist.

Code Beispiel:

<form> <input name="vorname2" type="text" value="Beispiel Text" maxlength="255"> </form>

Ausgabe:

Ein weiterer Typ für ein Eingabefeld ist „search“. Wie sein Name schon vermuten lässt, nimmt es Suchwörter, beispielsweise um einen Eintrag in einem Gästebuch zu finden, auf. Allerdings unterscheidet es sich vom Typ „text“ lediglich geringfügig.

Code Beispiel:

<form> <input type="search" list="Programmiersprachen"> <datalist id="Programmiersprachen"> <option value="PHP"> <option value="Java"> <option value="Perl"> <option value="Python"> <option value="Rust"> <option value="Ruby"> </datalist> <button>suchen</button> </form>

Ausgabe:

Unter Umständen, beispielsweise bei einem Formular auf einer Login-Seite, ist es von Nöten, ein Passwort einzutragen. Unbefugte dürfen dieses beim Tippen nicht lesen. Es ist sehr wichtig, dass kleine Sternchen eingegebene Passwörter augenblicklich unleserlich machen. Hierbei hilft der Typ „password“. Platzhalter ersetzen automatisch sämtliche Geheimnummern und Passwörter, Personen im gleichen Raum können die vertrauliche Angabe des Anwenders nicht mitlesen.

Code Beispiel:

<form> <input name="passwort" type="password" value="" maxlength="255"> </form>

Ausgabe:

Die Typen „tel“ und „url“ nehmen eine Telefonnummer, beziehungsweise eine URL auf und geben sie als solche an den Server weiter. Wenn Sie dieses Formularfeld mit dem Type „tel“ auf den Telefon auswählen, steht die Nummerntastatur zur verfügung.

Code Beispiel:

<form> <input name="Telefon" type="tel" value="0170" maxlength="255"> </form>

Ausgabe:

Bei manchen Formularen ist es wünschenswert, dass sich zusätzliche Informationen in einem Formular „zwischenspeichern“ lassen, damit der Server sie ebenfalls empfängt und weiterverarbeitet. Diese Informationen sind allerdings nicht für den User gedacht, sondern dienen lediglich internen Zwecken. In solchen Fällen ist ein input-Feld mit dem Schlüsselwort „hidden“ sehr hilfreich. Es ist für den Nutzer nicht sichtbar, lässt sich jedoch über „value“ durch den Programmierer mit jedem beliebigen Wert füllen und an den Server zur Weiterverarbeitung weiterreichen.

Wenn es etwas mehr Text sein darf – die Textarea für das HTML Formulare nutzen

Ein „input“-Feld ist in der Regel lediglich für kurze Eingaben, beispielsweise ein Name, die Telefonnummer oder die E-Mail-Adresse, gedacht- Was jedoch, wenn mehr Text benötigt wird? Bei einem Formular, das ein Feedback für den Kunden realisieren soll, würde ein übliches „input“-Feld als Eingabe der Kritik äußerst umständlich sein. Für diese Fälle gibt es das tag <textarea>. Es leitet ein Eingabefeld ein, das sich über mehrere Zeilen erstreckt. Textarea bedeutet ins Deutsche übersetzt Textbereich. Damit der Server die längere Eingabe verarbeiten kann, benötigt auch ein „textarea“ einen eindeutigen Namen. Um zu bestimmen, wie hoch und breit das Textfeld ist, dienen die Attribute „rows“ und „cols“. „rows“ steht für die Anzahl der Zeilen und definiert somit die Höhe. „rows“ wiederum legt die Spalten fest. In diesem Fall - da es sich ja nicht direkt um eine Tabelle handelt und keine direkten Spalten existieren - stehen die Spalten für die Anzahl der Zeichen, die der User pro Zeile schreiben kann.

Code Beispiel:

<form> <textarea name="Telefon2" cols="35" rows="7" id="Telefon2">Textarea mit 35 Zeichen breit und sieben Zeilen.</textarea> </form>

Ausgabe:

Hier jedoch liegt für viele Entwickler ein kleiner Stolperstein! Mit „rows“ und „cols“ lässt sich lediglich die Anzeigengröße der „textarea“ bestimmen, nicht jedoch, wie lang ein eingegebener Text sein darf. Dieser ist theoretisch unbegrenzt und lässt sich über JavaScript begrenzen. Befüllt der User die „textarea“ über ihren sichtbaren Bereich hinaus, stattet der Browser das Textfeld automatisch mit Scrollbalken aus. So kann der Nutzer problemlos durch einen längeren Text scrollen.

Das Attribut „warp“ bestimmt, ob bei einem längeren Text ein Umbruch erfolgt. Als mögliche Werte sind „hard“ oder „soft“ bekannt. Ein harter Zeilenumbruch sorgt dafür, dass der Browser stets dann einen Zeilenumbruch generiert, sobald der Text die durch das „cols“-Attribut angegebene Zeichenlänge überschreitet. Wird also „wrap=‘hard‘“ gesetzt, ist „cols“ verpflichtend anzugeben. Wie jedes andere Tag, muss auch „textarea“ korrekt abgeschlossen werden. Der End-Tag </textarea> ist sehr wichtig und nicht auszulassen.

Mit Auswahllisten Werte beim HTML Formulare erstellen vorgeben

Formulare beinhalten nicht nur Felder, in denen der Nutzer selbst eine Angabe einträgt. Genauso weit verbreitet sind Auswahllisten. Sie geben dem User eine Menge an Elementen vor, aus denen er den passenden auswählt.

Die Auswahlliste beginnt mit dem Tag <select>. Jede Auswahlliste hat einen internen Bezeichnernamen, der durch das Attribut „name“ festgelegt wird. Mit Hilfe des Bezeichnernamens können Server oder Client feststellen, von welcher Auswahlliste der Eintrag stammt und ihn entsprechend weiterverarbeiten.

Das Attribut „size“ bestimmt die Größe der Liste, sprich die Anzahl der anzuzeigenden Einträge. Hat die Liste mehr Elemente als in „size“ angegeben, so generiert der Browser automatisch Scrollbalken, mit deren Hilfe der User durch die Liste scrollt. Um eine „Dropdown-Liste“ zu erzeugen, setzt der Entwickler „size“ einfach auf 1 oder lässt das Attribut komplett weg.

<option>…</option> legt die einzelnen Elemente der Liste an. Zwischen dem öffnenden und abschließen Tag steht der jeweilige Text des Listeneintrags. Es lassen sich unbegrenzt viele Einträge definieren.

Die Breite der Listenanzeige ist über HTML nicht beeinflussbar. Der Browser ermittelt sie automatisch anhand des längsten Eintrages. Es gibt jedoch die Möglichkeit, diese Breite mit Hilfe von CSS zu verändern.

Mitunter ist es gewünscht, mehrere Einträge auswählen zu dürfen. Um dies zu ermöglichen, fügt der Entwickler dem select-Tag lediglich ein „multiple“ hinzu. Der Nutzer selbst kann diese Mehrfachauswahl nicht unmittelbar erkennen. Aus diesem Grund sollte das Formular selbst stets darauf hinweisen, dass sich auch mehrere Elemente auswählen lassen. Soll ein Eintrag bereits vorausgewählt sein, so erweitert der Entwickler den jeweiligen option-Tag mit einem „selected“.

Code Beispiel:

<form> <select name="Anrede"> <option>Herr</option> <option>Frau</option> <option selected="selected">Bitte wählen</option> </select> </form>

Ausgabe:

Mit einem Button die Daten in einem HTML Formular abschicken

Das Tag <button> legt einen klickbaren Button auf der Seite an. Über das Attribut „name“ gibt der Entwickler dem Button einen Namen. Name und Beschriftung bei einem Button sind jedoch zwei Paar Schuh‘! Ein Name dient lediglich dem Client, zu erkennen, von welchem Button die Aktion ausging. Der Nutzer sieht diesen jedoch nicht. Um einen Button zu beschriften, schreibt der Entwickler den gewünschte Text einfach zwischen das öffnende und schließende Tag. Folgende Varianten liefern nicht dasselbe Ergebnis:

Es werden drei verschiedene Arten von Buttons unterstützt, die das jeweilige „type“-Attribut bestimmt. Sie geben an, welches Verhalten der Button bei einem Mausklick aufweist. Der default-Wert für das Attribut „type“ ist im Übrigen submit. Fehlt das type-Attribut oder wird ein unbekannter Wert genutzt, wird automatisch type=“submit“ gesetzt.

Der Typ „button“ ist hilfreich, wenn der Client Berechnungen oder Bearbeitungen vornimmt. Es findet kein Absenden von Formularen statt. Stattdessen lassen sich die eingetragenen Daten vom Client beispielsweise mit JavaScript weiterverarbeiten und ein Ergebnis ausgeben.

Code Beispiel:

<button type="button" id="berechnen">Berechnen</button>

Ausgabe:

Diese Codezeile legt einen Button mit der Beschriftung „Berechnen“ an. Die ID in seiner Definition ist eindeutig und ermöglicht, dass JavaScript anschließend auf die Daten zugreifen kann. Der Type submit sendet das Formular. Es handelt sich hierbei, wie bereits kurz angesprochen, um den default-Wert. Ist „type“ nicht explizit gesetzt, fügt der Compiler automatisch den Typ „submit“ ein.

Eine weitere Möglichkeit für „type“ stellt das Schlüsselwort „reset“ dar. Wie sein Name schon vermuten lässt, sorgt es beim Klick auf den Button dafür, dass das Formular die eingetragenen Daten zurücksetzt.