HTML-Tags (Formular)



Diese Dokumentation ist stark vereinfacht und beschränkt sich auf die wesentlichen Grundlagen.

Formular

Ein sehr wichtiger Bestandteil von HTML sind Formulare. Sie werden benötigt um Daten zu übermitteln. Sei es einfach nur um Inhalte an eine weitere Seite weiter zu geben, sie per eMail zu verschicken oder in eine Datenbank zu übermitteln.

Die Basis eines Formulares ist das <form>-Tag, welches aus einem eröffnenden und einem abschliessenden Tag besteht. Die Parameter zur Übermittlung stehen im Tag, die Inhalte (Text und Felder sowie der Submit-Button) stehen zwischen den Tags.

  • method: Art der Übertragung
    GET: Die Inhalte werden in der URL übertragen. Dabei sind die Kapazität beschränkt. Ausserdem kann eine URL einfach manipuliert werden. Deshalb sollte GET nicht verwendet werden.
    POST: Übermittelt die Daten in Post-Variablen. Diese erscheinen nicht in der URL. Es können grosse Datenmengen übermittelt werden.
  • action: Die Adresse der Seite die aufgerufen wird um die Inhalte zu verarbeiten.
  • enctype: Mit dem Enctype-Attribut wird das Übertragungsformat festgelegt.
  • application/x-www-form-urlencoded
  • Standardwert, Formulardaten werden als Name-Wert-Paare codiert, ähnlich der Parameter in der URL bei GET.
  • multipart/form-data
    notwendig, wenn Sie Dateien hochladen wollen.

  • text/plain
    nur Text ohne Formatierung und Steuerzeichen

Felder

Die wichtigsten Parameter der Formularfelder sind nebst Typ, Name und Value.

input type

  • text: 1-zeiliges Eingabefeld für Text.
  • password: 1-zeiliges Eingabefeld für Passwort, die Eingabe ist nicht lesbar.
  • checkbox: Checkboxen zum Anhaken, es sind mehrere Auswahlen möglich.
  • radio: Radioboxen zum Auswählen, nur eine Auswahl möglich.
  • submit: Button zum Absenden des Formulares.

name

Jedes Feld in einem Formular benötigt einen eindeutigen Namen. Diese dürfen nicht doppelt verwendet werden. Die Namen werden auf der Empfangsseite benötigt um die entsprechenden Daten weiter zu verarbeiten. Eine Ausname bildet der Absenden-Button, der hat keinen Namen.

Bei Checkboxen muss jedes Feld einen eigenen Namen haben, bei Radipboxen müssen alle Zusammengehörigen den selben Namen haben.

value

Mit diesem Parameter kann das Feld mit Inhalt gefüllt werden. Das werden Sie vor allem dann brauchen, wenn Sie einen Datensatz ändern wollen. Dann laden Sie den Inhalt aus der Datenbank ins Formular und senden ihn wieder zurück in die DB.

textarea

Das Eingabefeld vom Typ Textarea besteht aus einem öffnenden und einem schliessenden Tag. Die Textarea kennt kein Value-Parameter. Inhalte in das Feld kommen einfach zwischen die beiden Tags. Das Feld ist geeignet für grössere Texteingaben.

 

  • rows
  • Höhe des Feldes, Anzahl sichtbare Textzeilen.
  • cols
  • Breite des Feldes. Der Wert verhält sich ähnlich wie beim letzen Feld.

checkbox

Checkboxen sind Felder um ein Häklein zu setzen. Wenn Sie mehrere davon verwenden, muss jedes einen ANDEREN Namen haben. Die Checkboxen können beliebig ausgewählt werden. Die Beschriftung erfolgt ausserhalb des Feldes. Die Beschriftung des Feldes und der Wert im Value müssen nicht identisch sein.

radio

Mit Radioboxen kann immer nur eine Auswahl getroffen werden. Zusammengehörende Radioboxen müssen den SELBEN Namen haben. Die Beschriftung erfolgt ausserhalb des Feldes. Die Beschriftung des Feldes und der Wert im Value müssen nicht identisch sein.

select

Mit dem Select-Menu erstellen Sie ein Auswahl-Menu. Es besteht aus einem öffnenden und einem schliessenden Tag.

option

Mit Option definieren Sie die einzelnen Einträge im Menu. Option besteht aus einem öffnenden und einem schliessenden Tag. Dazwischen steht der sichtbare Text. Mit Value wird jedem Option der entsprechende Wert für die Übermittlung angegeben. Der zu übermittelnde Wert und der angezeigte Wert muss nicht identisch sein.

selected

Diese Erweiterung des Option-Tags darf ein einziges Mal innerhalb von Select verwendet werden. Es definiert den Eintrag welcher das Menu standardmässig anzeigen soll. Der Vorteil gegenüber einer Radiobox, das Select-Menu braucht nicht mehr Platz als ein Text-Eingabefeld, egal wieviele Einträge es beinhaltet.

 

Seite erstellt: am 19.10.2017,   aktualisiert am: 14.04.2022,   Autor: René A. Da Rin