Webprogrammierung — 3. Lektion

Formulare

Interaktion mit Nutzer:
Daten werden vom Nutzer eingegeben.
Daten werden beim Nutzer selbst durch JavaScript-Programm auf der Webseite ausgewertet oder an einen Server zur Weiterverarbeitung gesendet.
Gesamtes Formular: form
Attribut name bezeichnet das Formular
Attribut action benennt die serverseitig auszuführende Aktion
Attribut method legt die Übertragungsmethode fest
Absendeknopf: button

Weitere Formular-Elemente

Einzeiliges Textfeld

Eingabefeld: input
Attribut type mit Wert text belegen
Attribut name bezeichnet das Eingabefeld, um serverseitig die getätigten Eingaben zuordnen zu können (keine Leer- oder Sonderzeichen verwenden!)
Attribut required gibt an, dass in dieses Feld etwas eingegeben werden muss, bevor die Formulardaten abgesendet werden
Attribut oninvalid enthält ein JavaScript-Programm, das ausgeführt wird, wenn die Eingabe als ungültig erkannt wird
Attribut oninput enthält ein JavaScript-Programm, das ausgeführt wird, sobald etwas in das Feld eingegeben wird
Attribut placeholder enthält einen Text, der im Eingabefeld angezeigt wird, wenn im Feld nichts eingegeben ist
Attribut title gibt an, was angezeigt wird, wenn die Maus in den Bereich des Eingabefeldes gelangt
Attribut maxlength gibt an, wie lang die Eingaben werden dürfen
Attribut value enthält eine vorgeschlagene Eingabe, die aber geändert werden darf
Einheit von Textfeld und Beschriftung:
Um etwas in ein Textfeld einzugeben, muss das Feld den Fokus bekommen. Dies geschieht beispielsweise durch Anklicken des Feldes. In manchen Fällen ist es wünschenswert, wenn auch ein Anklicken des dazugehörigen Textes den Fokus auf das Eingabefeld setzt. Dies wird erreicht, in dem der Text als Label zu einem Feld definiert wird:
Im input-Tag einen eindeutigen Identifikator über das Attribut id setzen. Beschriftung mittels label-Tag markieren; Attribut for auf den id-Wert des zugehörigen Eingabefeldes setzen. Damit muss die Beschriftung nicht in räumlicher Nähe zum Eingabefeld stehen.
In den meisten Fällen ist es für die Nutzerfreundlichkeit wohl zweckmäßig, die Beschriftung unmittelbar vor oder hinter das betreffende Eingabefeld zu setzen. Dann kann man auch Beschriftung und Eingabefeld zusammen in label-Tags setzen.

Einzeiliges Textfeld zur Passwort-Eingabe

Eingabefeld: input
Attribut type mit Wert password belegen

Feld zur Datumseingabe

Eingabefeld: input
Attribut type mit Wert date belegen
Attribute min und max zum Einschränken des Bereichs

Feld zur Zeiteingabe

Eingabefeld: input
Attribut type mit Wert time belegen
Attribute min und max zum Einschränken des Bereichs

Feld zur URL-Eingabe

Eingabefeld: input
Attribut type mit Wert url belegen

Feld zur Eingabe einer e-Mail-Adresse

Eingabefeld: input
Attribut type mit Wert email belegen

Feld zur Eingabe einer Telefon-Nummer

Eingabefeld: input
Attribut type mit Wert tel belegen

Feld zur Eingabe eines Textes mit vorgegebenem Muster

Eingabefeld: input
Attribut type mit Wert text belegen
Attribut pattern gibt das Muster an
Tutorial zu regulären Ausdrücken beim pattern-Attribut: http://pattern.tfcpc.de/pattern-tutorial.php

Mehrzeiliges Textfeld

Eingabefeld: textarea
Attribute cols und rows für die Abmaße
Attribut maxlength gibt die maximale Eingabelänge an

Einfachauswahl

Eingabefeld: input
Attribut type mit radio belegen
Attribut name bezeichnet den Auswahlblock
Attribut value gibt den Wert der jeweiligen Eingabe an
Attribut checked gibt eine Auswahl vor

Mehrfachauswahl

Eingabefeld: input
Attribut type mit checkbox belegen
Attribut name bezeichnet den Auswahlblock
Attribut value gibt den Wert der jeweiligen Eingabe an
Attribut checked gibt eine Auswahl vor

Drop-Down-Menü

Menü: select
Attribut name bezeichnet den Auswahlblock
Option: option
Attribut value gibt den Wert der jeweiligen Eingabe an
Attribut selected gibt eine Auswahl vor
Attribut multiple erlaubt Mehrfachauswahl
Atrribut size gibt Anzahl der gleichzeitig zu sehenden Optionen an

Weitere Knöpfe

Eingabefeld: input
Attribut type mit einem der Werte submit, reset oder button belegen
submit: Absendeknopf wie durch button-Tag erzeugt
reset: alle Eingabefelder werden auf die anfangs gesetzten Werte zurückgesetzt
button: Aussehen eines Knopfes, aber ohne definierte Funktion (wird über JavaScript gesetzt)