Formulare

Wir können uns das Internet als ein Netzwerk von Computern vorstellen, die Informationen senden und empfangen. Computer benötigen eine HTTP-Anfrage, um zu wissen, wie sie kommunizieren können. Die HTTP-Anfrage weist den empfangenden Computer an, wie er mit den eingehenden Informationen umgehen soll.

Das <form> Element ist ein großartiges Tool zum Sammeln von Informationen, aber dann müssen wir diese Informationen zur Verarbeitung an einen anderen Ort senden. Wir müssen dem <form> Element sowohl den Speicherort mitteilen, wohin die <form> Informationen gehen, als auch die zu stellende HTTP-Anfrage. Sehen Sie sich das folgende <form> Beispiel an:

Im obigen Beispiel haben wir das <form> Gerüst dafür erstellt, dass Informationen als POST-Anfrage an beispiel.html gesendet werden:

• Das action Attribut bestimmt, wohin die Informationen gesendet werden.

• Dem method Attribut wird ein HTTP-Verb zugewiesen, das in die HTTP-Anfrage eingefügt wird.

Hinweis: HTTP-Verb wie POST müssen nicht großgeschrieben werden, damit die Anfrage funktioniert, aber es ist Konvention. Im obigen Beispiel hätten wir method="post" auch schreiben können und es hätte trotzdem funktioniert.

Das <form> Element kann auch untergeordnete Elemente enthalten. Beispielsweise wäre es hilfreich, eine Überschrift bereitzustellen, damit Benutzer wissen, worum es in dem <form> Element geht. Wir können auch einen Absatz hinzufügen, um noch mehr Details bereitzustellen. Sehen wir uns ein Beispiel dafür im Code an:

Wenn wir ein Eingabefeld in unserem <form> Element erstellen möchten, benötigen wir die Hilfe des <input> Element.

Das <input> Element verfügt über ein type Attribut, das bestimmt, wie es auf der Webseite dargestellt wird und welche Art von Daten es akzeptieren kann.

Der erste Wert für das type Attribut, den wir untersuchen werden, ist "text". Wenn wir ein <input> Element mit type="text" erstellen, wird ein Textfeld gerendert, in das Benutzer etwas eingeben können. Beachten Sie, dass der Standardwert von type, "text" ist. Es ist auch wichtig, dass wir ein name Attribut für den <input> einschließen-ohne das name Attribut werden die Informationen in den <input> nicht gesendet, wenn die <form> übermittelt wird. Sie werden später mehr über Übermittlungen und die Schaltfläche "Senden" erfahren. Lassen Sie uns zunächst den folgenden Code untersuchen, der ein Texteingabefeld erzeugt: 

Hier ist ein Screenshot, wie das gerenderte Formular auf einer Webseite für den Chrome-Browser aussieht (verschiedene Browser haben unterschiedliche Standarddarstellungen). Beim ersten Laden ist es ein leeres Feld:

Nachdem Benutzer etwas in das <input> Element eingegeben haben, wird der Wert des value Attributs zu dem, was in das Textfeld eingegeben wird. Der Wert des value Attributs wird mit dem Wert des name Attributs gepaart und als Text gesendet, wenn das Formular übermittelt wird. Zum Beispiel wenn ein Benutzer "wichtige Details" in das von unserem <input> Element erstellte Textfeld eingibt :

Beim Absenden des Formulars wird der Text "erstes-text-feld=wichtige Details" an /beispiel.html gesendet, da der Wert des name Attribut "erstes-text-feld" ist und der Wert von value "wichtige Details" ist. 

Wir können dem value Attribut auch einen Standardwert zuweisen, sodass den Benutzern beim ersten Anzeigen des gerenderten Formulars ein vorausgefülltes Textfeld angezeigt wird, etwa so:

Das Ergebnis:

In der vorherigen Übung haben wir ein <input> Element erstellt, aber nichts eingefügt, was erklärt wofür <input> verwendet wird. Damit ein Benutzer ein Element richtig identifizieren kann, verwenden wir das <input> entsprechend benannte <label> Element.

Das <label> Element hat ein öffnendes und ein schließendes Tag und zeigt Text an, der zwischen dem öffnenden und dem schließenden Tag steht. Um ein <label> und ein <input> zu verknüpfen, benötigt das <input> ein id Attribut. Wir weisen dann dem for Attribut des <label> Elements den Wert des id Attributs von <input> zu, etwa so:

Der obige Code im Browser:

Denken Sie an all die Male, die wir vertrauliche Informationen wie ein Passwort oder eine PIN in eine <form> eingeben müssen. Wir möchten nicht, dass unsere Informationen von jemanden gesehen werden, der uns über die Schulter schaut! Zum Glück haben wir das type="password" Attribut für <input>!

Ein <input type="password"> Element ersetzt den eingegebenen Text durch ein anderes Zeichen wie ein Sternchen (*) oder einen Punkt (•). Der folgende Code zeigt ein Beispiel für die Erstellung eines Kennwortfelds:

Nachdem ein Benutzer etwas in das Feld eingegeben hat sieht es folgendermaßen aus:

Wir haben jetzt zwei type Attribute für <input> textbezogen durchgegangen, aber vielleicht möchten wir, dass unsere Benutzer eine Zahl eingeben-in diesem Fall können wir das type Attribut auf "number" setzten.

Durch die Einstellung type="number" für <input> können wir die Eingaben der Benutzer in das Eingabefeld auf Zahlen (und einige Sonderzeichen wie -, +, und .) beschränken. Wir können auch ein step Attribut bereitstellen, das Pfeile innerhalb des Eingabefelds erstellt, um den Wert des step Attributs zu erhöhen oder zu verringern. Unten sehen Sie den Code der zum Rendern eines Eingabefelds für Zahlen erforderlich ist:

Das Ergebnis:

Die Verwendung von <input type="number"> ist ideal, wenn wir Benutzern erlauben möchten, eine beliebige Zahl ihrer Wahl einzugeben. Wenn wir jedoch die Zahl, die unsere Benutzer eingeben können, einschränken möchten, sollten wir einen anderen type Wert verwenden. Eine weitere Option die wir verwenden könnten ist die Einstellung type auf "range", wodurch ein Schieberegler erstellt wird.

Um die minimalen und maximalen Werte des Schiebereglers festzulegen, weisen wir dem <input> Attribut min und max Werte zu. Wir können auch steuern, wie sanft und flüssig der Schieberegler funktioniert, indem wir dem step Element einen Wert zuweisen. Kleinere step Werte lassen den Schieberegler flüssiger laufen, während größere step Werte die Bewegung des Schiebereglers deutlicher machen. Sehen Sie sich den Code zum Erstellen eines Schiebereglers an:

Der obige Code gerendert:

Bisher waren alle Eingabetypen, die wir zugelassen haben Einzelauswahlmöglichkeiten. Aber was wäre, wenn wir den Benutzern mehrere Optionen anbieten und ihnen erlauben würden eine beliebige Anzahl von Optionen auszuwählen? In einem <form> würden wir das <input> Element und type="checkbox" verwenden. Untersuchen Sie den Code, der zum Erstellen mehrerer Kontrollkästchen verwendet wird:

Das Ergebnis:

Kontrollkästchen funktionieren gut wenn wir Benutzern mehrere Optionen präsentieren und sie eine oder mehrere davon auswählen lassen möchten. Es gibt jedoch Fälle in denen wir mehrere Optionen präsentieren und nur eine Auswahl zulassen möchten-beispielsweise, wenn Benutzer gefragt werden, ob sie den Bedingungen zustimmen oder nicht. Sehen wir uns den Code zum Erstellen von Optionsfeldern an:

Das Ergebnis:

Optionsfelder sind großartig wenn wir möchten, dass unsere Benutzer eine Option aus mehreren sichtbaren Optionen auswählen. Stellen Sie sich jedoch vor, wir hätten eine ganze Liste von Optionen! In dieser Situation könnten Sie schnell eine Menge Optionsfelder im Auge behalten müssen.

Eine alternative Lösung besteht darin, eine Dropdown-Liste zu verwenden, damit unsere Benutzer eine Option aus einer organisierten Liste auswählen können. Hier ist der Code zum Erstellen eines Dropdown-Menüs:

Das Ergebnis:

Und wenn wir auf das Feld mit der ersten Option klicken wird die Liste angezeigt:

Selbst wenn wir eine organisierte Dropdown-Liste haben kann es für Benutzer mühsam sein durch die gesamte Liste zu scrollen um eine Option zu finden, wenn die Liste viele Optionen enthält. Hier ist die Verwendung des <datalist> Elements praktisch.

Das <datalist> wird mit einem <input type="text"> Element verwendet. Das <input> erstellt ein Textfeld, in das Benutzer Optionen eingeben und filtern können <datalist>. Sehen wir uns ein konkretes Beispiel an:

Beachten Sie, dass wir im obigen Code ein <input> haben, das ein list Attribut hat. Der <input> wird mit der <datalist> über das Listenattribut des <input> und die ID der <datalist> verknüpft.

Aus dem bereitgestellten Code wird das folgende Formular erstellt:

Ein <input> Element mit type="text" erstellt ein einzeiliges Eingabefeld, in das Benutzer Informationen eingeben können. Es gibt jedoch Fälle, in denen Benutzer mehr Informationen eingeben müssen, z.B. in einem Blogbeitrag. In solchen Fällen könnten wir <textarea> anstelle <input> verwenden.

Das <textarea> Element wird verwendet, um ein größeres Textfeld zu erstellen, in das Benutzer mehr Text schreiben können. Wir können die Attribute rows und cols hinzufügen, um die Anzahl der Zeilen und Spalten für den <textarea> zu bestimmen. 

Im obigen <textarea> Code wird ein leeres Feld mit 5 Zeilen und 30 Spalten folgendermaßen auf der Seite gerendert:

Wenn wir ein noch größeres Textfeld möchten, können wir auf die untere rechte Ecke klicken und ziehen, um es zu vergrößern.

Wenn wir das Formular abschicken, ist der Wert von <textarea> der Text, der in das Feld geschrieben wird. Wenn wir <textarea> einen Standardwert  hinzufügen möchten, würden wir ihn wie folgt in die öffnenden und schließenden Tags aufnehmen:

Denken Sie daran, dass der Zweck eines Formulars darin besteht, Informationen zu sammeln, die dann übermittelt werden. Dies ist die Funktion der Schaltfläche "Senden"- Benutzer klicken darauf, wenn sie mit dem Ausfüllen der Informationen fertig sind <form> und das Formular absenden möchten. Nachdem wir nun besprochen haben, wie verschiedene Eingabeelemente erstellt werden, sehen wir uns jetzt an wie eine Schaltfläche "Senden" erstellt wird!

Um eine Senden-Schaltfläche in einem <form> zu erstellen, verwenden wir das zuverlässige <input> Element und setzen das type auf "submit". Beispiel:

Das Ergebnis: