Verwendung des <form>-Elements zur Erstellung von Formularen

Das <form>-Element bewirkt einen Zeilenumbruch

Da das <form>-Element die Basis für alle Formulare, die auf Webseiten erstellt werden, ist, ist es wichtig, dass Sie die Verwendung dieses Elements verstehen.

Als Erstes müssen Sie wissen, dass das <form>-Tag als  Block-Level-Element betrachtet wird. Um das zu verstehen, müssen Sie auch das Gegenstück – die Inline-Elemente – verstehen. Sie verwenden Inline-Elemente wie <b> oder <u> bei Text oder einzelnen Wörtern, um deren Aussehen zu verändern. Inline-Elemente enthalten den zu verändernden Text, wie <b>HTML-LERNEN INFO!</b>, und können noch verschachtelte Elemente besitzen. <b>HTML <i>LERNEN</i> INFO!</b> ist gültiges HTML.

Block-Level-Elemente sind größere Organisationsstrukturen (wie zum Beispiel das <form>-und <table>-Element). Sie können Web-Inhalte, Inline und andere Block-level HTML-Elemente enthalten. Wenn Sie folgende HTML-Anweisung in einem Web-Browser anzeigen, wird bei verschachtelten Inline-Elementen keine neue Zeile begonnen.

<b>HTML <i>inline</i> Grundlagen und Tutorials</b>

Das Unangenehme an der ganzen Sache aber ist, dass bei der Erstellung des Seitenlayouts das einleitende Tag des <form>-Elements einen Zeilenumbruch bewirkt. Verwenden Sie folgenden Code-Ausschnitt:

Inline-Elemente wie <b> ... </b> können Text oder andere Inline-Elemente enthalten. Block-Level-Elemente wie <div> ... <div/> können aus Inhalt, anderen Block-Level-Elementen und Inline-Elementen bestehen. Die meisten Block-Level-Elemente werden in einer neuen Zeile angezeigt, während bei Inline-Elementen kein Zeilenumbruch bewirkt wird.

<p>
	HTML-Lernen 
	<form action="https://www.html-lernen-copy.html-lernen.info/cgi-bin/register.cgi" method="post">
		Besucher die unsere Webseite besuchen wollen, müssen Ihr Name und Passwort eingeben.
</p>

Das Setzen des <form>-Elements an seine übliche Stelle bewirkt einen Zeilenumbruch nach HTML-Lernen. Das Ergebnis ist ein ungleichmäßiges Bild.

Um bis hierher kurz zusammenzufassen:

Das <form>-Element bewirkt einen Zeilenumbruch. <form> kann aus Inhalt, Inline oder anderen Block-Level-Tags bestehen. Sie können jedoch keine verschachtelten Formulare erstellen – bitte nur ein Formular nach dem anderen!

Die Syntax, die zum Erstellen des <form>-Elements notwendig ist, ist klar und einfach. Sie müssen meistens nur zwei Attribute verwenden action und method. <action> ist obligatorisch, wie Sie im folgenden Code-Ausschnitt erkennen können.

<form action="someaction" method="get or post">
	HTML-Lernen - Grundlagen und Tutorials 
</form>

action definiert den Übertragungsablauf eines Formulars und enthält normalerweise eine URL in einem CGI Script auf dem Web-Server. Denken Sie auch hier daran, dass sich das Script exakt an der von Ihnen spezifizierten Stelle befinden muss und dass es für das Formular richtig funktionieren muss, um eine erfolgreiche Übertragung versprechen zu können. Obwohl die meisten Formulare ihre Daten zu Scripts senden, können Sie das <action>-Link auch zu einer anderen Webseite oder eine Mail zu Link erstellen. Der Code sieht folgendermaßen aus:

<form action="mailto:somebody@isp.com" method="post">

Um Ihre Formulare zu testen, empfehle ich Ihnen, <mailto> zu verwenden, um sich die Ergebnisse Ihres Testformulars selbst zuzusenden. Dadurch können Sie Fehler in Ihrem Formular korrigieren und sich vergewissern, dass Sie die korrekten Daten erhalten und Sie so Links zum Script erstellen können.

Das method-Attribut kann einer von zwei möglichen Werten sein: get oder post.

Diese Werte bestimmen, wie die Formulardaten des action-Attributs zum Script gesendet werden. Formulare, die get verwenden, fügen den Formulardaten der action URL ein Fragezeichen hinzu und senden dann das Ganze zur modifizierten URL. Sites mit Suchmaschinen verwenden normalerweise diese Methode. Wenn ich ein Text - Formularfeld namens searchstring hätte und im Feld orangutans eingegeben hätte, würde die URL am Ende so aussehen:

https://www.html-lernen-copy.html-lernen.info/cgi-bin/search?searchstring=Orangutans

Wird das method-Attribut nicht verwendet, so gilt der Standardwert get.

Der andere mögliche Wert ist post. Anstatt die Formulardaten mit einer URL zu verbinden und die kombinierte URL-Daten-Zeichenfolge zum Server zu senden, sendet post die Formulardaten direkt an den im action-Attribut festgelegten Empfänger. Dasselbe geschieht in etwa beim <form>-Element. Aber das ist leider nur der Anfang. Haben Sie bemerkt, dass das <form>-Element außer die Aktion zur Verarbeitung des Formulars festzulegen nicht viel macht? Um Informationen zu sammeln, benötigen Sie Elemente, die man als Formularfelder bezeichnet.