Mit Formularen arbeiten

Um mit Formularen in HTML in Kombination mit Javascript zu arbeiten wird der einleitende HTML Tag <form> benötigt.

window.onload oder window.addEventListener(‚load‘,…) rufen Anweisungen und Funktionen auf, nachdem die Seite vollständig geladen ist. Erst dann existieren alle Elemente der Seite (HTML, CSS, Scripte, Bilder …) als DOM-Objekte. Nach dem Eintreten des onload-Events können Event Handler wie onclick oder onsubmit für die Elemente der Seite abgehört werden.

<script>
    window.onload = function () {
        console.log('Dokument geladen');
        
    }
</script>

Ein Laden der Datei kann über <script src=“dateiname.js“> veranlasst werden.

Über die Angabe id in einem Feld wird der Name festgelegt über den er im Javascript angesprochen werden kann.

<form>
          <p><input id="idEingabe">Eingabe</p>
          <p><input id="idButton" type="button" value="Klicken">
          <p><input id="idAusgabe">Ausgabe</p>
 </form>

Über input wird ein einzeiliges Eingabefeld erstellt. Wird der Typ Button angegeben wird eine Schaltfläche erstellt. Der wert von Value entspricht dem Text der auf der Schaltfläche angezeigt wird.

Ein einfaches Formular womit die Summe zweier Werte berechnet wird:

<!DOCTYPE html>
<html lang="de">
  <head>      <script>function summe() 
    {
    let eingabefeld1=document.getElementById("eingabe1");
    let eingabe1=eingabefeld1.value;
    
    let eingabefeld2=document.getElementById("eingabe2");
    let eingabe2 =eingabefeld2.value;
    eingabe1=parseInt(eingabe1);
    eingabe2=parseInt(eingabe2);
    summe=eingabe1+eingabe2;
    document.write("Die Summe ist " + summe);
    }      
      </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head> <body>      <form>
          <p>Eingabe 1: <input id="eingabe1"></p>
          <p>Eingabe 2: <input id="eingabe2"></p>
          <p><input id="klick" type="button" value="Klicken" onclick="summe()">
          
      </form>
     </body></html>

Damit die Eingaben als Zahlen definiert werden müssen sie in Zahlen konvertiert werden. Dies geschieht über parseInt.

on click verweist auf die geschriebene Funktion summe()

<!DOCTYPE html>
<html lang="de">
  <head>      <script>function geklickt() 
    {
    const eingabefeld=document.getElementById("idEingabe");
    const eingabe=eingabefeld.value;
    alert("Klick" + eingabe);
    const ausgabefeld=document.getElementById("idAusgabe");
    ausgabefeld.value="Klick: " + eingabe;
    }      
      </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head> <body>      <form>
          <p><input id="idEingabe">Eingabe</p>
          <p><input id="idButton" type="button" value="Klicken">
          <p><input id="idAusgabe">Ausgabe</p>
      </form>
    <script>
      const bu=document.getElementById("idButton");
      bu.addEventListener("click",geklickt);
      </script>
 </body></html>

Die EventListener-Schnittstelle ist die primäre Methode zum Behandeln von Ereignissen. Benutzer implementieren die EventListener-Schnittstelle und registrieren ihren Listener auf einem EventTarget mithilfe der AddEventListener-Methode.

Wird ein Feld in HTML als required definiert ist eine Eingabe des Users in dieses Feld erforderlich.

<textarea rows=10 cols="125" id=ueber required="required">

Über <input type=“checkbox“ > wird eine Auswahlbox erstellt.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Übersetzung einer Anleitung</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <p>
  <body><h1>Herzlich Willkommen zur Übersetzung einer Häkelanleitung</h1>
      <form>
          <p align="center"><textarea rows=10 cols="125" id=ueber required="required"></textarea><p>
            <p align="center"><input type="checkbox" id=box1 value="Russisch - Deutsch">Russisch Deutsch<p align="center"></p>
            <p align="center"><input type="checkbox" id=box2 value="Englisch - Deutsch">Englisch Deutsch
          <p align="center"><input type="button" value="Übersetzung" onclick="uebersetzen()"></p>
      </form>
  </body> 
  </html>

Die Methode window.confirm() zeigt einen modalen Dialog mit einer optionalen Nachricht und zwei Schaltflächen an, OK und Abbrechen. Hier ist message die optionale Zeichenfolge, die im Dialogfeld angezeigt werden soll, und das Ergebnis ist ein boolescher Wert, der angibt, ob OK oder Abbrechen ausgewählt wurde (true bedeutet OK).window.confirm() wird normalerweise verwendet, um eine Benutzerbestätigung abzufragen, bevor eine gefährliche Operation wie löschen durchgeführt wird.

result = window.confirm("soll das element wirklich gelöscht werden?")

Hier gibt es die Möglichkeit die Eingabe eines Passwortes zu überprüfen. Das Passwort muss zwischen 3 und 8 Zeichen lang sein.

<form><p><input id="benutzername" required="required">Benutzername</p>
    <p></p><input id="passwd" type="password" required="required">Passwort</p>
    <p><input id="idButton" type="button" value="Bitte klicken"></p>
    
</form>

Die Angabe required heisst das eine Eingabe in das Feld erforderlich ist. Die Angabe type=“passwort“ sorgt dafür das die Eingabe als Stern dargestellt wird.

Ein Formular mit RadioButton:

<html>
    <head>
        <meta charset="utf-8">
        <script></script>
         </head>
    <body>
<form id="idForm" method="POST" action="zumBeispielPhp.php">
<p>
    <input id="Deutsch" type="radio" value="Deutsch" checked="checked">Deutsch
    <input id="Englisch" type="radio" value="Englisch">Englisch
    <input id="Russisch" type="radio" value="Russisch">Russisch
</p><p><input type="submit"><input type="reset"></p>
</form>      
    </body>
</html>

Bei der Angabe von checked ist das betreffende Element markiert.