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, das Kontaktformular für sich 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 als Webformular oder ebenfalls Kontaktformular bezeichnet, handelt es sich um ein Eingabeformular auf einer Webseite, das User mit benötigten Daten füllen.

Wenn der Besucher auf die Schaltfläche klickt, sendet er seine 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 Eingabeformulare 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 Eingabeformular zu definieren, müssen sämtliche Eingabefelder mit dem Tag <form></form> umschlossen sein. <form> nimmt verschiedene Attribute auf. Über „action“ ist es unter anderem möglich, zu bestimmen, welche Aktion der Submit-Schaltfläche bei einem Klick ausführt. In der Regel handelt es sich um ein Skript, 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 Webformulare bearbeiten und das Webformulare Erstellen ist erleichtert.

Mit einem Input-Feld Daten in einem HTML-Formular erfassen

Das wichtigste Feld für ein Formular ist das Eingabefeld. 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 Anmeldeformular auf einer Login-Seite, ist es vonnö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.

Beispiel:

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

Ausgabe:

Die Typen „tel“ und „url“ nehmen eine Telefonnummer, oder eine URL auf und geben sie als solche an den Server weiter. Wenn Sie dieses Formularfeld mit dem Type „tel“ auf dem 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 die Textfelder für einen Namen, 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 Schaltfläche auf der Seite an. Über das Attribut „name“ gibt der Entwickler der Schaltfläche einen Namen. Der Name und die Beschriftung eines Buttons sind jedoch zwei verschiedene Dinge. Ein Name ist lediglich ein Hinweis darauf, von welchem Button die Aktion ausgegangen ist. Der Nutzer sieht diesen jedoch nicht. Der Entwickler schreibt den gewünschten Text einfach zwischen dem öffnenden und schließenden 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 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.

HTML-Code:

<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.

Auf dieser Seite haben wir die verschiedenen Möglichkeiten erörtert, die das Attribut "type" innerhalb eines Formulars bieten kann, einschließlich der Option "reset", die es Benutzern ermöglicht, alle zuvor eingegebenen Daten im Formular mit einem einfachen Klick zu löschen. Dies ist besonders nützlich, um von vorne zu beginnen oder Fehler zu korrigieren.

Wenn Sie weiterführende Informationen darüber wünschen, wie Sie effektive und benutzerfreundliche Kontaktformulare auf Ihrer Webseite implementieren können, empfehlen wir Ihnen, unsere detaillierte Anleitung zum Thema Kontaktformular für Website zu besuchen. Dort finden Sie wertvolle Tipps und Anleitungen, um Ihre Website-Besucher bestmöglich zu unterstützen.