Formulare

Das World-Wide-Web wäre nicht halb so interessant, wenn es für den Nutzer nicht möglich wäre, auch Daten mit Hilfe seines Browsers in dieses Netz zu schicken, damit diese für andere Personen dort bereitstehen. Um eine einfache Eingabe zu ermöglichen, unterstützt HTML hierzu Formulare:

Die Anzeige des Formulars ist in folgender Abbildung zu sehen:

Eingeklammert wird ein Formular mit einem <form>-Tag. Diesem Tag wird über sein Attribut action eine Seite übergeben, auf welche der Browser beim Abschließen des Formulares wechselt und die Daten an diese Seite mitsendet. Unter GET- und POST-Formulare wird behandelt werden, wie diese Daten auf der Seite des Servers entgegen genommen werden können. Es existieren innerhalb des HTTP-Protokolles zwei Möglichkeiten für Formulare, die genutzt werden können. Diese werden über das method-Attribut selektiert:

  • GET für die Übertragung von kleinen Datenmengen. Die Daten werden in der Browser-URL mit übertragen und
  • POST für große Datenmengen, wie beispielsweise Dateien. Hierbei werden die Daten im Header des HTTP-Requests übertragen.

Folgende Elemente des Formulares werden nun exemplarisch definiert:

  • Meist genutzt ist wohl das Textfeld <input type="text">. Es erzeugt eine einfache Textbox, in welche ein einzeiliger Text eingetragen werden kann. Mit name lässt sich ein Name festlegen, unter dem das Feld übertragen wird. Mit value ein Wert, der als Vorbelegung gilt. size ist die Größe auf dem Bildschirm, während maxlength die maximale Länge der eingegebenen Zeichenkette bezeichnet.
  • Über das Tag <label> lässt sich eine Beschriftung hinzufügen. Hierzu ist es nötig, dass das Attribut for mit dem Attribut id des Textfeldes übereinstimmt.
  • Mehrzeilige Felder sind mit dem <textarea>-Tag möglich. Hier steht der initiale Text als Textkörper innerhalb des Tags.
  • Im nächsten Abschnitt wird mit dem Tag <input type="radio"> eine Gruppe von Radio-Buttons gebildet. Von allen Optionen darf jeweils nur eine aktiviert sein.
  • Anders ist dies bei der Checkbox, welche mit dem Tag <input type="checkbox"> erzeugt wird. Eine Checkbox kann selektiert oder deselektiert sein. Mit der Option checked wird festgelegt, dass entweder dieser eine Radiobutton oder Checkbox initial selektiert ist.
  • Mit dem Tag <select> wird eine Dropdownliste erstellt.
  • Das Tag <input type="hidden"> definiert ein unsichtbares Feld, welches mit einem vorbelegten Wert mitgeschickt wird. Hier ist Vorsicht walten zu lassen. Obwohl das Feld unsichtbar ist, kann es, wenn der Browser den Sourcecode des HTML-Dokuments anzeigt, doch durch den Benutzer der Webseite gelesen werden und auch manipuliert werden. Aber dieses Feld eignet sich deshalb nur dafür, um unkritische Werte durchzuschleifen.
  • Das Tag <input type="file"> erzeugt eine Dateiauswahlbox. Hier können Dateien dem Formular hinzugefügt werden und zum Server übertragen werden.
  • Als nächstes wird ein <fieldset> definiert. Dies dient dazu Eingabefelder zu gruppieren. Innerhalb dieses Tags ist die Definition von drei Buttons zu finden. Die ersten beiden senden das Formular ab, das bedeutet sie initiieren die Übertragung zum Server. Dabei wird für die beiden name="aktion"-Buttons der jeweilige Wert mitgeschickt.
  • Der letzte Button ist ein Spezialbutton. Er setzt das Formular wieder in den Ausgangszustand zurück.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen