Wiki zum Unterricht

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
======Webformulare======

Mit Hilfe von Webformularen kann man Daten zwischen Webseiten und Webskripten Austauschen. Ein Formular wird in den ''%%<form> ... </form>%%'' eingebettet. Im Attribut ''%%action%%'' wird die Datei/Webseite angegeben, die vom Formular aufgerufen wird. Innerhalb des Formular-Tags werden nun verschiedene Formularelemente (Siehe unten!) eingebettet, in die die zu übertragenden Daten eingegeben werden.

Das folgende Beispiel zeigt ein einfaches Webformular, welches den Inhalt des Eingabefeldes an die Google-Suche sendet.

**Aufgabe 1**

Teste das Beispiel!

<code html formulare01.html>
<!DOCTYPE html>
 
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Formulare</title>
    </head>
    <body>
        <form action="http://www.google.de/search" >
            <input name="q" type="text"  />
            <button>Google Suche</button>
        </form>
    </body>
</html>
</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 .

=====Datenübertragung=====

Die zu übertragenden Daten werden in Eingabeelemente (''%%input%%'') eingetragen bzw. sind vordefiniert. Damit die Daten von der aufgerufenen Webseite erkannt werden, benötigt jedes Eingabeelement einen Namen (''%%name%%'') und einen Wert/Inhalt (''%%value%%''). Die Angabe ''%%value%%'' ist nur notwendig, wenn nichts eingegeben werden kann.



Bei der Datenübertragung unterscheidet man zwei unterschiedliche Methoden (''%%method%%''): POST und GET. Bei GET erscheinen die zu übertragenden Daten in der URL, bei POST werden sie verschlüsselt geschickt. Voreingestellt ist die Methode GET. 

Die Datenübertragung kann durch verschiedene Aktionen ausgelöst werden z.B. durch das Klicken auf einen Button oder das Betätigen der <ENTER>-Taste in einem Eingabefeld 

=====Eingabeelemente=====

Eingabeelemente in Formularen werden mit dem ''%%<input>%%''-Tag realisiert. Eine vollständige Auflistung aller Elemente findet man hier: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/input .

Im folgenden Beispiel werden einige ''%%<input>%%''-Elemente demonstriert.



<code html formulare2.html>
<!DOCTYPE html>
 
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Formulare</title>
    </head>
    <body>
        <form>
            Name: <input type="text" size="10" maxlength="40" name="name" /><br />
            Password: <input type="password" size="10" maxlength="10" name="password" /><br />
            Datum: <input type="date"  name="date" /><br />
            Farbe: <input type="color"  name="color" /><br />     
        </form>
    </body>
</html>
</code>

**Aufgabe 2**

Teste das Beispiel!
=====Auswahllisten=====

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>