Formulare

Die folgende Vorlage können Sie verwenden, wenn Sie nicht immer wieder jedes Formular-Element neu eintippen wollen. Das Beispiel enthält alle benötigten Formular-Elemente, so dass Sie diese für Ihre Lösung schnell entsprechend Bedarf kopieren und anpassen können:
formular.html

Übungsaufgabe 1 - Umkopieren einer Eingabe

Programmieren Sie folgendes Formular!
TextUmkopieren.png

Übungsaufgabe 2 - Newsletter

Erstellen Sie das folgende Formular für die Abmeldung eines Newsletters:
NewsletterAbmeldung.png

Übungsaufgabe 3 - Login - Anmeldeformular

a) Erstellen Sie das folgende Formular für die Anmeldung zu einem Webmail-Service:
WebmailFormular.png

b) Erstellen Sie das folgende Formular für die Anmeldung an einem Internetportal:
FormulareAnmeldung2.png
c) Erstellen Sie das folgende Anmeldeformular:
TestAnmeldung.png

Übungsaufgabe 4 - Kontaktformular

Die Verwendung von Emailadressen auf Internetseiten führt oft dazu, dass eine dort angegebene Emailadresse anschliessend möglicherweise eine Menge Spam-Mail erhält. Somit finden Sie inzwischen meistens eine Kontaktseite, welche die tatsächlich genutzte Email-Adresse verheimlicht. So kann diese dann auch nicht für die Verwendung in einem Spam-Verteiler genutzt werden.

A) Erstellen Sie das folgende Kontaktformular für Ihre Website!
form-kontakt.png

B) Zusatzaufgabe: Formatieren Sie das Kontaktformular mittels CSS passend zu Ihrer Homepage!

Übungsaufgabe 5 - Produktbestellung

bestellung.PNG
  1. Erstellen Sie ein Bestellformular, welches Eingaben ermöglicht, wie Sie sie in der Abbildung sehen!
  2. Ergänzen Sie das das Form-Tag um folgende Eigenschaft: action = "http://www.oszkim.de/mailer.php"
  3. Programmieren Sie eine Überprüfung aller Felder.
    • Existieren überhaupt Eingaben? ( eingabe == "" oder eingabe.length == 0 )
    • Existiert die "richtige" Eingabe? ( isNaN() == true etc. )
    • Existieren gültige Werte? (z. B. ist die Kundennummer eine Zahl? etc. )
  4. Erweitern Sie das Formular um eine Datumseingabe und die Postanschrift.
  5. Erstellen Sie basierend auf den Eingaben eine neue Seite mit allen eingegebenen Werten und einem Button für die Bestellbestätigung.
    (Abschicken? Diese Seite wird erzeugt, sobald alle obigen Eingaben korrekt getätigt wurden).

Übungsaufgabe 6 - Taschenrechner

Programmieren Sie einen Taschenrechner für die 4 Grundrechenarten!

a) Variante 1


CalculatorEvalForm.PNG

b) Variante 2

RechenprogrammMitFormular.png

Übungsaufgabe 7 - Anmeldung

  1. Erstellen Sie das abgebildete Anmeldeformular!
  2. Prüfen Sie die Akzeptanz der AGBs und der Datenschutzerklärung!
  3. Prüfen Sie beim Anklicken des Buttons "Anmeldung abschicken" alle Eingaben auf Korrektheit
  4. und geben Sie ggf. Hilfestellung durch geeignete Hinweise auf der Seite (Nutzen Sie innerHTML!)
  5. Geben Sie eine Anmeldungsbestätigung aus, wenn alle Eingaben korrekt erfolgt sind!
  6. ...
FormulareAnmeldung.PNG

Übungsaufgabe 8 - HTMLtext - Generator

Programmieren Sie den abgebildeten HTMLtext-Generator:
HTMLgenerator.PNG

Übungsaufgabe 9 - SEPA-Zahlungen

Ein kleiner Webshop hat vergessen, dass die Bezahlung ab 1.2.2014 entsprechend SEPA (Single Euro Payment Area) zu erfolgen hat.
  • Erstellen Sie ein passendes Formular mit den nötigen Eingaben für Lastschriften und Einziehungsermächtigungen, so dass die Bezahlung nach SEPA-Richtlinien erfolgen kann!
  • Bei Anklicken des "Bezahlen"-Buttons werden alle Eingaben mit Javascript geprüft
    und der Nutzer ggf. zur korrekten Eingabe aufgefordert!

Übungsaufgabe 10

Programmieren Sie die Aufgabe Passwortprüfung!

Übungsaufgabe 11

Realisieren Sie folgendes Formular!
(siehe ggf. www.reifendirekt.de)
AuswahlFormularReifen.png

Übungsaufgabe 12

Programmieren Sie das auf folgender Seite enthaltene Script zur Berechnung der Eigenkapitalquote:
Die Formel können Sie wie folgt auf der Seite veröffentlichen:
<math class="ma-block"
      display="block"
      alttext="\bo\text&quot;Eigenkapitalquote&quot; = (\text&quot;Eigenkapital&quot; / \text&quot;Bilanzsumme&quot;\)*100">
   <mrow>
     <mtext class="ma-bold ma-upright"
            mathvariant="bold">Eigenkapitalquote
     </mtext>
     <mo>=</mo>
     <mrow>
     <mrow>
     <mo>(</mo>
     <mfrac><mtext>Eigenkapital</mtext><mtext>Bilanzsumme</mtext></mfrac><mo>)
</mo>
</mrow>
<mo>*</mo>
<mn>100</mn>
</mrow>
</mrow>
</math>
 






<input type="checkbox" name="kommewieder" value="ja">immer wieder