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!

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>

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.

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>

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:

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>

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.

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>

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.

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>