Formular-Ereignisse @ Javascript

Formular-Ereignisse @ Javascript

Formular-Ereignisse werden auf vielen Seiten dieses Webs verwendet. (Fast) Jede einzelne Änderung eines Eingabe-Elements wird sofort zur Steuerung eines interaktiven Beispiels verwendet.



Formular-Ereignisse


Anzeige von ausgewählten Ereignissen (Events):

Formular: Submit   Formular: Change   Eingabe-Feld: Change

Beachten sie den Unterschied:
Änderung des Text-Felds ohne Abschluss
Änderung des Text-Felds mit Abschluss durch Return- oder Enter-Taste







Automatisches Absenden mit Radio-Elementen

In den rechts angezeigten Rahmen ist eine andere Mini-Webseite als Empfänger eingebettet.
Sie enthält ein Programm in der Programmiersprache → PHP. Dieses Programm liest die erhaltenen Daten und schreibt sie in die Empfangs-Webseite.

Empfangen



PHP-Quelltext der Empfangs-Webseite



Die Mini-Webseite zum Empfang enthält ein kleines PHP-Programm.

Das Programm prüft, ob es ein GET-Argument mit dem Namen des <input>-Elements rb gibt.

Wenn ein Element $_GET['rb'] existiert, dann wird sein aktueller Wert mit der Funktion print() ausgegeben. Der Ausgabe-Text wird in den 'statischen' HTML-Text eingefügt und vom Browser angezeigt.

Wenn das Programm noch keine GET-Daten empfangen hat, dann wird ein Text (keine...Daten) angezeigt.

Automatisches Absenden mit Select / Option Elementen

In den rechts angezeigten Rahmen ist eine andere Mini-Webseite als Empfänger eingebettet.
Sie enthält ein Programm in der Programmiersprache → PHP. Dieses Programm liest die erhaltenen Daten und schreibt sie in die Empfangs-Webseite.

Empfangen



PHP-Quelltext der Empfangs-Webseite



Die Mini-Webseite zum Empfang enthält ein kleines PHP-Programm.

Das Programm prüft, ob es ein GET-Argument mit dem Namen des <select>-Elements sel gibt.

Wenn ein Element $_GET['sel'] existiert, dann wird sein aktueller Wert angezeigt, andernfalls wird ein Text (keine...Datern) angezeigt.

Man kann als Daten beliebige → Unicode-Zeichen angeben, z.B. auch → Umlaute, → griechische, kyrillische oder → mathematische Zeichen ..., wenn sowohl Sender als auc Empfänger den Unicode-Zeichensatz UTF8 verwenden.

Programmierung eines Schieberegler-Elements

Alle modernen Browser unterstützen die Formular-Elemente <input type="color" /> und <output /> sowie das Ereignis oninput
Sie können eine alternative Version des Beispiels für veraltete Browser laden:
Stand der Technik   Veraltet

HTML + Javascript Quelltext



Spezielle Attribute

Das SchiebeRegler-Element kann spezielle Attribute enthalten, mit denen man seine Funktion bequem einstellen kann.

Der Werte-Bereich umfasst ohne besondere Vereinbarung die Zahlenwerte 0...100
Mit den Argumenten min, max kann man den gewünschten Bereich angeben.
Negative Werte sind möglich, z.B. -10...+10
Allerdings muss immer min<max sein. Beispiel:
<input type="range" min="-10" max="10"/>
Gleitkomma-Werte sind möglich: Geben sie die Grenzen mit Dezimal-Punkt an, nicht mit Beistrich !
<input type="range" min="1.5" max="2.5"/>

Die Schrittweite beträgt ohne besondere Vereinbarung +1
Mit dem Argument step kann man die gewünschten Schrittweite angeben.
Negative Werte sind nicht erlaubt, Gleitkomma-Werte (mit Dezimal-Punkt !) sind möglich.


CSS-Tricks

Die mit HTML-5 neu eingeführten CSS Eigenschaften ermöglichen spezielle Tricks:

Scheinbar negative Schrittweite: Dazu dreht man den SchiebeRegler mit der CSS-Eigenschaft transform:rotate() um 180°

Vertikale SchiebeRegler: Dazu dreht man den SchiebeRegler um +90° oder -90°
Auch schräg rotierte Regler sind ungewohnt, aber möglich.

Programmierung eines Farb-Selektors

Alle modernen Browser unterstützen die Formular-Elemente <input type="color" /> und <output />
Sie können eine alternative Version des Beispiels für veraltete Browser laden:
Stand der Technik   Veraltet


HTML + Javascript Quelltext



Das ist in der Praxis nicht notwendig, da man die gewählte Farbe normalerweise nicht digital angzeigt, sondern für die gewünschten Objekte verwendet.