Navigation überspringen

Auswahl-Elemente

Radiobutton

Eine häufig verwendete Auswahlgruppe ist die Radiobutton-Gruppe. Sie kennzeichnet, dass aus einere speziellen Auswahl nur eine Auswahl exklusiv verwendet werden kann. Dafür deklariert man die Gruppe gleichnamig. Wir erweitern unser Formular Personendaten um das Geschlecht.

<!DOCTYPE html>
<html>
    <head>
        <title>Test Tabelle</title>
        <meta charset="ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <center>
        <form name="test" action="testFormular.php" method="post">
            <b>Personendaten</b><br>
            <input type="text" name="Vorname" placeholder="Bitte Vornamen eingeben" size="30"><br>
            <input type="text" name="Nachname" placeholder="Bitte Nachnamen eingeben" size="30"><br>
            <input type="date" name="Geburtsdatum" size="30" placeholder="Bitte Geburtsdatum eingeben"><br>
            <input type="email" name="Email" size="30" placeholder="Bitte EMail eingeben"><br>
            Geschlecht: <input type=radio name="Geschlecht" value="maennlich"> maennlich <input type=radio name="Geschlecht" value="weiblich"> weiblich <br>
            <input type="submit" name="speichern" value="speichern"><br>
        </form>
    </center>
</body>
</html>

Im Browser wird nun eine Gruppe erzeugt, die stets nur eine Auswahl zu läßt. Wichtig ist für die korrekte Funktionalität, dass zusammengehörige Gruppe den gleichen Namen (hier: name:"Geschlecht") tragen.

Checkboxen

Checkboxen sind eine Auswahlgruppe, die es ermöglicht aus einer Menge von Optionen mehrere auszuwählen. Nur die ausgewählten werden dann auch mit übertragen.

Wir erweitern unser Personendaten-Formular um die Auswahl: ich möchte Newsletter erhalten, ich bin an Infomaterialien interessiert, ich habe die AGBs gelesen

<!DOCTYPE html>
<html>
    <head>
        <title>Test Tabelle</title>
        <meta charset="ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <center>
        <form name="test" action="testFormular.php" method="post">
            <b>Personendaten</b><br>
            <input type="text" name="Vorname" placeholder="Bitte Vornamen eingeben" size="30"><br>
            <input type="text" name="Nachname" placeholder="Bitte Nachnamen eingeben" size="30"><br>
            <input type="date" name="Geburtsdatum" size="30" placeholder="Bitte Geburtsdatum eingeben"><br>
            <input type="email" name="Email" size="30" placeholder="Bitte EMail eingeben"><br>
            Geschlecht: <input type=radio name="Geschlecht" value="maennlich"> maennlich <input type=radio name="Geschlecht" value="weiblich"> weiblich <br>
            <input type=checkbox name="InfoSegment" value="Newsletter">  ich moechte Newsletter erhalten<br>
            <input type=checkbox name="InfoSegment" value="Infomaterial"> ich bin an Infomaterialien interessiert<br>
            <input type=checkbox name="InfoSegment" value="AGBs"> ich habe die AGBs gelesen<br>
            <input type="submit" name="speichern" value="speichern"><br>
        </form>
    </center>
</body>
</html>