Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:formulare [2023/06/14 09:01] – [Auswahlelemente] lutz
+++ html:formulare [2024/05/24 10:16] (aktuell) – lutz
@@ Zeile 26: / Zeile 26: @@
 </code>
-Im folgenden wird die Funktionsweise von Formularen kurz beschrieben. Eine ausführlichere Darstellung findet man hier: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/.
+Im folgenden wird die Funktionsweise von Formularen kurz beschrieben. Eine ausführlichere Darstellung findet man hier: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare .
 =====Datenübertragung=====
@@ Zeile 71: / Zeile 71: @@
 Bei Auswahlelementen kann der Nutzer zwischen verschiedenen Optionen wählen. Eine vollständige Beschreibung von Auswahllisten findet man hier: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten.
+Das folgende Beispiel demonstriert eine Auswahlliste:
+<code html formulare3.html>
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <title>Formulare</title>
+    </head>
+    <body>
+        <form>
+            <label>Städte
+                <select name="tags" size="5">
+                  <option>New York</option>
+                  <option>London</option>
+                  <option selected>Berlin</option>
+                  <option>Paris</option>
+                  <option>Wien</option>
+                </select>
+            </label>
+        </form>
+    </body>
+</html>
+</code>
+**Aufgabe 3**
+Teste das Beispiel!
 =====Buttons=====
+Mit Buttons in Formularen können je nach Option verschiedene Aktionen ausgelöst werden:
+  * ''%%type = "submit"%%'' - Formular wird an die Seite die in ''%%action%%'' angegeben ist übermittelt (Voreinstellung)
+  * ''%%type = "button"%%'' - eine Aktion (clientseitig, z.B JavaScript) auf der aktuellen Webseite wird ausgelöst
+  * ''%%type = "reset"%%'' - Formular wird zurückgesetzt
+Das folgende Beispiel demonstriert die Verwendung der Optionen.
+<code html formulare4.html>
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <title>Formulare</title>
+        <script>
+            function myFunction() {
+                alert("Hello World!");
+            }
+        </script>
+    </head>
+    <body>
+        <form action="http://www.google.de/search" >
+            <input name="q" type="text"  /><br>
+            <button>Suche absenden!</button><br>
+            <button type = 'button' onclick="myFunction()">JavaScript starten!</button><br>
+            <button type = 'reset'>Formular leeren!</button><br>
+        </form>
+    </body>
+</html>
+</code>
+**Aufgabe 4**
+Teste das Beispiel!
+Eine ausführliche Beschreibung zu Buttons findet man hier: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Was_ist_ein_Webformular%3F#Buttons
+**Aufgabe 5**
+Das Formular im folgenden Beispiel enthält einige der bisher besprochenen Formularelemente. Teste das Beispiel!
+(Hinweis: Das ''%%action%%''-Attribut ist leer. Man kann aber nach dem Absenden die Attribute in der URL ablesen, da ''%%method='get'%%'' verwendet wird.
+<code html formulare5.html>
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <title>Formulare</title>
+        <script>
+            function myFunction() {
+                alert("Hello World!");
+            }
+        </script>
+    </head>
+    <body>
+        <form action="" method="get">
+            <input name="textfeld" type="text"  /><br>
+            <input name="password" type="password" /> <br>
+            <input name="date" type="date" /> <br>
+            <label for="männl">männlich</label>
+            <input type="radio" id="männl" name="geschlecht" value="0">
+            <label for="weibl">weiblich</label>
+            <input type="radio" id="weibl" name="geschlecht" value="1">
+            <label for="queer">queer</label>
+            <input type="radio" id="queer" name="geschlecht" value="2">
+            <br>
+            <label>Flüsse
+                <select name="tags" size="5">
+                  <option>Elbe</option>
+                  <option>Mulde</option>
+                  <option Saale>Berlin</option>
+                  <option>Spree</option>
+                  <option>Donau</option>
+                </select>
+            </label>
+            <br>
+            <button>Formular absenden!</button><br>
+            <button type = 'button' onclick="myFunction()">JavaScript starten!</button><br>
+            <button type = 'reset'>Formular leeren!</button><br>
+        </form>
+    </body>
+</html>
+</code>