studyklar
IProg · Skript 1 · Abschnitt 8

HTML-Formulare: Eingaben an den Server schicken

Wer sich anmeldet oder etwas sucht, füllt ein Formular aus. Hier entsteht ein Formular Zeile für Zeile. Rechts steht der Code, darunter, was der Browser zeigt und was er an den Server schickt. Mit Weiter geht es Schritt für Schritt voran. Ein Klick auf einen Schritt springt direkt dorthin.

Worum es geht

Skript 01b, Folien 15 bis 17 und 19 bis 22: HTML-Formulare, Eingabeelemente und Formularattribute ab HTML5.

Eine Web-Seite soll Eingaben vom Benutzer annehmen und an ein Programm auf dem Server geben. Die Fragen dieses Abschnitts: Wie schreibt man ein Formular in HTML? Was genau kommt beim Server an? Und wie weit kann der Browser Eingaben schon selbst prüfen?

So gehen wir vor:

  1. Das Formular von Folie 15, Zeile für Zeile, und was es sendet.
  2. Die Attribute des form-Tags.
  3. Eingabefelder mit ihren Attributen und eine Auswahlliste.
  4. Neue Typen und Prüfungen in HTML5, und ihre Grenze.
  5. Eine Klausurfrage zum Üben.

form: der Rahmen um alle Eingaben

Skript · Syntax
<form action="url" method="http-methode">  (...)  <input type="typ" optionen /></form>

Ein Formular ist ein Teil der Seite, in den der Benutzer etwas eingibt. In HTML ist das das Element <form>. Alle Felder darin werden zusammen abgeschickt.

Das Attribut action nennt die URL des Programms auf dem Server, das die Eingaben verarbeitet; hier heißt es tuwas. Das Attribut method nennt die HTTP-Methode: GET oder POST. Fehlt es, gilt GET.

Aus Skript 01, Folie 32: GET überträgt die Daten direkt mit dem Aufruf, in der URL. POST überträgt sie separat.

fieldset, legend und label

  <fieldset>    <legend>Beispiel</legend>    <label for="t1">Eingabe:</label>

<fieldset> fasst Felder zu einer Gruppe zusammen; der Browser zeichnet einen Rahmen darum. <legend> ist der Titel der Gruppe, hier „Beispiel“.

<label> ist die Beschriftung eines Feldes. Ihr Attribut for="t1" verweist auf das Feld mit der id t1. Dann setzt ein Klick auf die Beschriftung den Cursor ins Feld, und ein Screenreader liest „Eingabe:“ zum Feld vor.

Noch 12 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Das Formular

von form bis Abschicken

<form action="tuwas"></form>
gesendet: –
Legendegerade gemeintEin Formular und was es sendet.