forms aktualisieren

Author: bjelline

content/assets/css/all.css

@@ -1251,19 +1251,17 @@ textarea[readonly] {
   background-color: #dff0d8;
   border-color: #468847;
 }
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-}
-input:focus:required:invalid:focus,
-textarea:focus:required:invalid:focus,
-select:focus:required:invalid:focus {
-  border-color: #e9322d;
-  -webkit-box-shadow: 0 0 6px #f8b9b7;
-  -moz-box-shadow: 0 0 6px #f8b9b7;
-  box-shadow: 0 0 6px #f8b9b7;
+input:invalid,
+textarea:invalid,
+select:invalid {
+
+  box-shadow: 0px 0px 5px red;
+}
+input:invalid,
+textarea:invalid,
+select:invalid {
+
+  box-shadow: 0px 0px 5px red;
 }
 .form-actions {
   padding: 17px 20px 18px;

content/formulare/action.md

@@ -8,7 +8,7 @@ drücken? Meist werden Sie an den Webserver zur weiteren Verarbeitung geschickt.
 Diese action wird direkt im `<form>`-Tag angegeben.
 
 <htmlcode>
-<form action="http://multimediatechnology.at/~fhs666/pizza/bestellung.php">
+<form action="https://users.ct.fh-salzburg.ac.at/~bjelline/pizza/bestellung.php">
 </htmlcode>
 
 Für die Verarbeitung der Daten braucht man ein serverseitiges  Programm - hier
@@ -72,7 +72,7 @@ Die URL wird zusammengestellt aus:
     * Eingegebener / angeklickter Wert
 
 Falls dabei Sonderzeichen vorkommen  (z.B. Leerzeichen, Zeilenumbrüche, Umlaute,
-Fragezeichen, kaufmännisches Und) werden diese wie folgt encodiert: 
+Fragezeichen, kaufmännisches Und) werden diese wie folgt encodiert:
 
 Statt
 Leerzeichen wird ein `+` oder `%20` gesetzt, bei allen anderen Zeichen wird ein `%`
@@ -122,7 +122,7 @@ im Skype-Chat weitergegen habe, sind dritten bekannt, wie [diese Untersuchung vo
 Das "geheimhalten" einer URL ist also keine geeignete Sicherheitsmaßnahme!
 Wenn ich eine Webseite vor Zugriffen schützen will brauche ich dazu Passwörter
 und https, siehe [Authentisieren nach RFC 2617](/http/http/#slide-18)
-und [HTTPS](/http/http/slide.html#slide-19), beide im Kapitel HTTP, und 
+und [HTTPS](/http/http/slide.html#slide-19), beide im Kapitel HTTP, und
 das [Kapitel über Sessions](/session/).
 
 
@@ -134,7 +134,7 @@ Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die d
 <form action="order.php" method="GET">
   Anzahl: <input name="anzahl"> <br>
   Adresse: <textarea name="adresse"></textarea><br>
-  Preis: 1.000.000 DM  
+  Preis: 1.000.000 DM
   <input type="hidden" name="preis" value="1000000">
   <input type="submit" value="Bestellung absenden">
 </form>
@@ -151,6 +151,6 @@ Wenn nun das Programm `order.php` einfach den Preis aus der URL übernimmt und
 auf die Rechnung schreibt, wird der Airbus recht günstig (für die KundIn)
 verkauft.
 
-Merke: Alle Eingaben die eine Web-Applikation erhält sind mit extremer Skepsis zu betrachten! 
+Merke: Alle Eingaben die eine Web-Applikation erhält sind mit extremer Skepsis zu betrachten!
 
 

content/formulare/check.md

@@ -11,12 +11,12 @@ sofort zu prüfen und Rückmeldung zu geben.
 ## Tags für Formulare
 
 Mit den HTML-Attributen `required`, `minlength`, `maxlength`, und einigen mehr kann
-man die Eingabe in einem Text-Eingabefehld prüfen:
+man die Eingabe in einem Text-Eingabefeld prüfen:
 
 <htmlcode caption="Einfaches Formular">
 <form method="get" action="bestellung.php">
   ...
-  <input type="text"  name="fullname" minlength="2" maxlength="200">
+  <input type="text"  name="fullname" required minlength="4" maxlength="8">
   ...
   <input type="submit" value="Bestellen">
 </form>
@@ -26,16 +26,18 @@ man die Eingabe in einem Text-Eingabefehld prüfen:
 So sieht das Formular im Browser aus:
 
 <form method="get" action="bestellung.php">
-  <input type="text"  name="fullname" minlength="2" maxlength="200">
+  <input type="text"  name="fullname" required  minlength="4" maxlength="8">
   <input type="submit" value="Bestellen">
 </form>
 
+
+
 ## pattern
 
 Mit dem Attribut `pattern` kann man ein "Muster" für den eigegebenen String vorgeben.
-Dieses "Muster" besteht im einfachsten fall aus einem Stück Text, im komplizierten
-Fall aus einer Folge von Sonderzeichen.  Es handelt sich um eine eigene kleine Programmiersprache,
-einer sogenannten "Regular Expression".
+Dieses "Muster" besteht im einfachsten Fall aus einem Stück Text, im komplizierten
+Fall aus einer Folge von Sonderzeichen.  Es handelt sich um eine eigene kleine Programmiersprache
+mit dem Namen "Regular Expression".
 
 
 <htmlcode caption="Formular mit pattern">
@@ -55,7 +57,7 @@ CSS selektieren:
 
 <css>
 :invalid {
-  background-color: pink;
+  box-shadow: 0px 0px 5px red;
 }
 </css>
 

content/images/formulare/fieldset.html

@@ -4,20 +4,67 @@
 <head>
     <meta charset="utf-8">
     <title>Demo: Fieldset</title>
+    <style>
+        main {
+            max-width: 600px;
+        }
+        label {
+            display: block;
+        }
+        #output {
+            margin-top: 3em;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2px;
+        }
+        #output > * {
+            background-color: lightcyan;
+        }
+        b {
+            text-align: right;
+        }
+    </style>
 </head>
 
 <body>
+    <main>
     <h1>Demo: Fieldset</h1>
 
 
     <form action="#">
         <fieldset>
             <legend>Kreditkarte</legend>
-            <input name="nr" placeholder="0000 0000 0000 0000">
-            <label><input type="radio" name="kk" value="Master"> Master</label>
-            <label><input type="radio" name="kk" value="Visa"> Visa</label>
+            <lable>Nummer: <input name="nr" placeholder="0000 0000 0000 0000"></lable>
+            <lable>Person: <input name="card_holder"></lable>
+            <label><input type="radio" name="card_type" value="Mastercard"> Mastercard</label>
+            <label><input type="radio" name="card_type" value="Visa"> Visa</label>
         </fieldset>
+
+        <fieldset>
+            <legend>Adresse</legend>
+            <label>Strasse und Hausnummer: <input name="strasse"></label>
+            <label>Postleitzahl: <input name="plz"></label>
+            <label>Ort: <input name="ort"></label>
+        </fieldset>
+
+        <input type="submit">
+        <a href="?">zurück zum leeren Formular</a>
     </form>
+
+    <section id="output">
+
+    </section>
+    <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        const out = document.getElementById('output');
+
+
+        urlParams.forEach((value, key) => {
+            out.innerHTML += "<strong>" + key + "</strong>";
+            out.innerHTML += "<span>" + value + "</span>";
+        });
+    </script>
+</main>
 </body>
 
-</html>
+</html>