Formulare


Beispiel einer Zwischenlösung

Hier wird eine Funktion pruefung() beim Klicken des Submit-Buttons (siehe input type=submit...) aufgerufen, die einige Prüfungen vornimmt, bevor die Werte des Formulars ggf. anschliessend ins Internet geschickt werden.
Die Funktion kontrolle() wird über einen einfachen HTML-Link aufgerufen und könnte weitere Prüfungen oder Vorbelegungen von Formularfeldern vornehmen.
<html>
 
<head>
 
<script type="text/javascript">
  // zu ergaenzen:
  // a) Eingabe von Zahlen und deren Pruefung
  // b) Nach Absenden soll der Text erhalten bleiben
  // c) Pruefung des Textfelds
  // d) Pruefen des Radio Buttons
  // e) Ausgabe verschiedener Meldungen bei Auswahl
  //    verschiedener Radio Buttons
 
  // ausprobieren:
  // a) Fehlerkonsole(Starten siehe Menüpunkt Extras/Fehlerkonsole)
  //    austesten, z.B. durch absichtliches Vergessen von Klammern
 
  // Variable zur Kennzeichnung, ob das Formular richtig ausgefüllt wurde
  var ergebnis;
  var alter;
 
  function kontrolle()
  {
    document.write("Alter: " + document.form1.Alter.value);
  }
 
  function pruefung()
  {
    // Prüfung, ob überhaupt mindestens ein Zeichen im Feld steht
    if( document.form1.Alter.value == '' )
    {
      alert("Bitte geben Sie Ihr Alter ein!");
    }
    if( document.form1.Namensfeld.value == '' )
    {
      alert("Bitte geben Sie Ihren Namen ein!");
    }
    if( document.form1.Anschriftsfeld.value == '' )
    {
      alert("Bitte geben Sie Ihre Anschrift ein!");
    }
    if( document.form1.EMailfeld.value == '' )
    {
      alert("Bitte geben Sie Ihre Email ein!");
    }
    if( document.form1.Eingabe.value == '' )
    {
      alert("Bitte geben Sie Ihre Eingabe ein!");
    }
 
    return false;
  }
 
</script>
</head>
 
 
<body>
 
<!-- zu ergänzen
   a) Formatierungen mit CSS (Ersetzen von <br>, Ausrichten der Felder etc.)
   b) Versand von ausgewaehlten Inhalten per Email, siehe ...
          http://www.willemer.de/informatik/text/form.htm
          http://de.selfhtml.org/html/verweise/email.htm
 
-->
<form name     = "form1"
      onsubmit = "pruefung()"
      action   = "http://www.oszkim.de/mailer.php"
      method   = "post">
 
 Name:      <input name="Namensfeld" type="text">&nbsp;&nbsp;&nbsp;&nbsp;
 Anschrift: <input name="Anschriftsfeld" type="text"><br>
 Alter:     <input name="Alter" type="text"><br>
 E-Mail:    <input name="EMailfeld" type="text"><br>
 Betreff:   <select name="Betreff">
             <option value="nichts">Bitte zahlen</option>
             <option value="Bestellung">Bestellung</option>
             <option value="Anfrage">Anfrage</option>
             <option value="Hinweis">Hinweis</option>
            </select><br>
 Newsletter abonnieren:
            ja<input type="Radio" name="News" value="ja">
            nein <input type="Radio" name="News" value="nein">
            jain <input type="Radio" name="News" value="jain" checked>
            <br>
 Text:      <textarea name="Eingabe" cols="30" rows="3">
            </textarea><br>
<input type="submit" value="Absenden">
<input type="reset">
</form>
 
<a href="javascript:kontrolle()">Kontrolle</a>
 
</body>
 
</html>
 
 

Bestellformular

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
 
<head>
 
  <title>Bestellformular</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script type="text/javascript">
 
    function bestellenbitte()
    {
      alert("Die übermittelten Bestelldaten werden Ihnen gleich vom Server mitgeteilt!");
    }
 
  </script>
  <style type="text/css">
    body
    {
      font-family:      Verdana, Arial, Helvetica, sans-serif;
      font-size:        1.5em;
    }
 
    input, select
    {
      font-size:        0.8em;
      background-color: lightgrey;
    }
 
    #aufgabe
    {
      background-color: lightblue;
    }
  </style>
 
</head>
 
<body>
 
  <h1>Produkt bestellen!</h1>
 
  Das Produkt kostet EUR 75,-, die Versandkosten betragen EUR 12,-
  <hr>
 
  <form name     = "best"
        onsubmit = "bestellenbitte()"
        action   = "http://www.oszkim.de/mailer.php"
        method   = "post">
 
    Ich bestelle verbindlich
    <input type="text" name="stueck" value="1" size="4" maxlength="4"> Stück des Produkts<br>
    <input type="checkbox" name="express">Expresslieferung (20 EUR Aufpreis)<br>
    Ich möchte es in der Farbe
    <input type="radio" name="farbe" value="schwarz" checked> Schwarz
    <input type="radio" name="farbe" value="silber"> Silber
    <input type="radio" name="farbe" value="gold"> Gold
    <hr><p>
    Anrede:
    <select name="anrede" id="anrede" size="1">
      <option value="Herr">Herr</option>
      <option value="Frau">Frau</option>
    </select><br>
    Vorname:
    <input type="text" name="vorname" placeholder="Max" size="20" maxlength="20" onfocus="this.value=''"><br>
    Nachname:
    <input type="text" name="nachname" placeholder="Mustermann" size="20" maxlength="20" onfocus="this.value=''"><br>
    Kundennummer:
    <input name="kunde" type="text" placeholder="4711" size="10" maxlength="10" onfocus="this.value=''"><br>
    E-Mail:
    <input name="email" type="text" placeholder="max@mustermann.org" size="50" maxlength="50" onfocus="this.value=''"><p>
    <input type="reset" value="Formular zurücksetzen">
    <input type="submit" value="Daten abschicken">
 
  </form>
 
</body>
 
</html>
Zu dem verwendeten Placeholder-Attribut (HTML5) gibt es nicht nur Beifall, siehe

Beispiel Taschenrechner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
 
  <title>Taschenrechner</title>
  <meta http-equiv="content-type" content="text/html; charset=utf8">
 
  <script type="text/javascript">
 
    function meineFunktion()
    {
      var ergebnis;
      var eingabe;
 
      // Eingabe - Zusammenbau der verschiedenen Anteile:
      // Zahl 1 + Operator + Zahl2
 
                       // hier wuerden Pruefungen der Eingabe stehen
 
      eingabe = document.rechner.zahl1.value
              + document.rechner.operator.value
              + document.rechner.zahl2.value;
 
      // Verarbeitung mit eval
      ergebnis = eval( eingabe );
 
      // Ausgabe in mein Ausgabefeld, siehe div im HTML-Teil dieser Seite
      document.getElementById("ausgabe").innerHTML =
             "Das Ergebnis der Rechnung "
           + eingabe
           + " lautet: "
           + ergebnis;
    }
 
  </script>
 
</head>
 
<body>
 
  <h1>Taschenrechner</h1>
 
  <form name="rechner">
 
    Zahl 1&nbsp;<input type="text" name="zahl1" size="20">
    <select name="operator">
      <option value="+">Plus</option>
      <option value="-">Minus</option>
      <option value="/">Geteilt</option>
      <option value="*">Mal</option>
    </select>
    Zahl 2&nbsp;<input type="text" name="zahl2" size="20">
    <input
      type    = "button"
      name    = "meinButton"
      value   = "tuWas"
      onclick = "meineFunktion()"
    >
 
  </form>
 
  <div id="ausgabe">
    <!-- Test-Ausgabe nach Laden der Seite, wenn Kommentar entfernt -->
  </div>
 
</body>
 
</html>
 
 

Beispiel Variante 2

Download: Rechner mit Formular (Variante 2)

Beispiel für eine Taschenrechner-Client/Server-Lösung

Die Berechnung wird von einem PHP-Programm übernommen nach Übergabe der Eingabewerte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
 
  <title>Taschenrechner</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
  <script type="text/javascript">
 
    function pruefung()
    {
      if( document.rechner.zahl1.value == "" )
      {
        alert("Bitte Zahl 1 eingeben!");
        return false;
      }
 
      if( isNaN( document.rechner.zahl1.value ) )
      {
        alert("Bitte eine Zahl in Eingabefeld Zahl 1 eingeben!");
        return false;
      }
 
      if( document.rechner.zahl2.value == "" )
      {
        alert("Bitte Zahl 2 eingeben!");
        return false;
      }
 
      if( isNaN( document.rechner.zahl2.value ) )
      {
        alert("Bitte eine Zahl in Eingabefeld Zahl 2 eingeben!");
        return false;
      }
 
      return true;
    }
 
  </script>
 
</head>
 
<body>
 
  <h1>Taschenrechner</h1>
 
  <form name="rechner"
        action="http://www.oszkim.de/mailer.php"
        onsubmit="return pruefung()">
 
    Zahl 1&nbsp;<input type="text" name="zahl1" size="20">
    <select name="operator">
      <option value="+">Plus</option>
      <option value="-">Minus</option>
      <option value="/">Geteilt</option>
      <option value="*">Mal</option>
    </select>
    Zahl 2&nbsp;<input type="text" name="zahl2" size="20">
    <button type="submit">tuWas</button>
 
  </form>
 
</body>
 
</html>

Beispiel HTMLtext-Generator

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
  <title>HTML-Text Generator</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <style type="text/css">
 
    body
    {
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      background-color: #C9F76F;
    }
 
    textarea
    {
      width: 400px;
      height: 60px;
      border: 3px solid #cccccc;
      padding: 5px;
    }
 
  </style>
 
  <script type="text/javascript">
 
 
    function LinkText( eingabe )
    {
      // <a href="http:www.google.de">Link</a>
      return( "<a href=\"" + document.generator.eingabe.value
               + "\">Link</a>" );
    }
 
    function BildText( eingabe )
    {
      // <img src="smiley.gif" alt="Bild" height="xxx" width="xxx">
      return( "<img src=\"" + eingabe
               + "\" alt=\"Bild\" height=\"xxx\" width=\"xxx\">");
    }
 
    function VideoText( eingabe )
    {
      return( "V: todo " + eingabe );
    }
 
    function SoundText( eingabe )
    {
      return( "S: todo " + eingabe );
    }
 
    function generiere()
    {
      if( document.generator.Link.checked )
      {
        document.generator.ausgabe.value =
          LinkText( document.generator.eingabe.value );
      }
 
      if( document.generator.Bild.checked )
      {
        document.generator.ausgabe.value +=
          BildText( document.generator.eingabe.value );
      }
 
      if( document.generator.Video.checked )
      {
        document.generator.ausgabe.value +=
          VideoText( document.generator.eingabe.value );
      }
 
      if( document.generator.Sound.checked )
      {
        document.generator.ausgabe.value +=
          SoundText( document.generator.eingabe.value );
      }
    }
 
  </script>
 
</head>
 
<body>
 
  <h1>HTML-Text Generator</h1>
  <form name="generator">
    <input type="text" name="eingabe"> Datei, Link, ...
    <p>
    <input type="checkbox" name="Link">Link
    <br>
    <input type="checkbox" name="Bild" checked>Bild
    <br>
    <input type="checkbox" name="Video">Video
    <br>
    <input type="checkbox" name="Sound">Sound
    <p>
    <input type="button" value="Generiere HTML-Text" onclick="generiere()">
    <p>
    HTML-Text zur Verwendung in eigenen Seiten:<br>
    <textarea name="ausgabe" height="3em" width="200px"></textarea>
  </form>
 
</body>
 
</html>