HTML Auswahlelemente mit PHP auswerten

Schnelles Code-Beispiel

Checkboxen:
<input type="checkbox" name="cb1" value="wert1">
<input type="checkbox" name="cb2" value="wert2">

Radio-Buttons:
<input type="radio" name="radioA" value="wert1">
<input type="radio" name="radioA" value="wert2">

Range Slider:
<input type="range" name="rs" min="0" max="10">

Auswahlmenu:
<select name="menu">
  <option value="apple">Apple</option>
  <option value="samsung">Samsung</option>
</select>

Inhaltsverzeichnis

1. Checkboxen
2. Radio Buttons
3. Range Slider
4. Auswahlmenu (drop-down)
5. Übungen

Checkboxen

Checkboxen sind "Kontrollkästchen", die der Nutzer "aktivieren" und "deaktivieren" kann. Im aktivierten Zustand ist eine Checkbox mit einem kleinen Häckchen markiert. Der Nutzer kann auch mehrere Checkboxen gleichzeitig auswählen:

Mit <input type="checkbox"> definieren wir in HTML eine Checkbox. In unserem Beispiel sieht das ganze Formular dann so aus:

<h2>Checkboxen</h2>

<form action="programm.php" method="post">

    <input type="checkbox" name="cb1" value="Fahrrad"> Ich habe ein Fahrrad<br>
    <input type="checkbox" name="cb2" value="Auto"> Ich habe ein Auto<br>
    <input type="checkbox" name="cb3" value="Boot"> Ich habe ein Boot<br>

    <input type="submit">
</form>

Gehen wir die einzelnen Bestandteile eines Checkbox-Elements einmal durch:

• type: Das Attribut type bestimmt den Typ des Elements, also hier: checkbox.
• name: Die eindeutige Bezeichnung für ein Checkbox-Element, um es später in PHP abfragen zu können.
• value: Dieses Attribut ist optional und muss nicht vorhanden sein. Es ist aber oftmals ganz praktisch und bewirkt, dass das Checkbox-Element zusätzlich einen bestimmten (von uns festgelegten) String-Wert mit sich trägt (den wir später auch abrufen können).

Formular mit PHP auswerten

Um nun mit PHP zu festzustellen, ob eine Checkbox vom Nutzer ausgewählt wurde, verwenden wir die Funktion isset() und übergeben als Argument in Klammern $_POST["nameDerCheckbox"]. Die Funktion liefert true zurück, wenn die Checkbox markiert wurde. Hier der Code:

<?php

    if(isset($_POST["cb1"])){
        echo $_POST["cb1"] . " wurde ausgewählt <br>";
    }
    if(isset($_POST["cb2"])){
        echo $_POST["cb2"] . " wurde ausgewählt <br>";
    }
    if(isset($_POST["cb3"])){
        echo $_POST["cb3"] . " wurde ausgewählt <br>";
    }

?>

Da wir unseren Checkboxen auch passende values gegeben haben(Fahrrad, Auto, Boot), können diese mit echo ausgegeben werden.

Markieren wir nun die ersten beiden Checkboxen und klicken auf den Submit-Button, erhalten wir folgende Ausgabe:

Fahrrad wurde ausgewählt
Auto wurde ausgewählt                     

Radio Butons

Radio Buttons werden mit dem Tag <input typt="radio"> gesetzt. Sie sind eine Gruppe von "Optionsschaltern", wobei der Nutzer kann aus mehreren Optionen einen(!) Button auswählen kann.

Der HTML-Code hierzu ist folgender:

<h2>Radio Button Grupple</h2>

<form action="programm.php" method="post">

    <input type="radio" name="farbe" value="rot"> rot<br>
    <input type="radio" name="farbe" value="gruen"> grün<br>
    <input type="radio" name="farbe" value="blau"> blau<br>

    <input name="submit" type="submit">
</form>

Gehen wir auch hier die Bestandteile eines Radio-Buttons durch:

• type: Das Attribut type bestimmt den Typ des Elements. Für einen Radio-Button setzen wir radio ein.
• name: Alle Radio-Butons, die zusammengehören müssen denselben Wert bei name haben. Sie werden dann als Gruppe behandelt. Die Auswahl eines Butons führt so automatisch zur Deaktivieren der anderen in derselben Gruppe.
• value: Das value Attribut weist einem Button einen eindeutigen Wert zu. Dies ist notwendig und darf nicht wegelassen werden, um den ausgewählten Radio-Button später auch identifizieren zu können.

Formular mit PHP auswerten

Um die Auswahl des Nutzers mit PHP festzustellen, fragen wir im $_POST Array das Element farbe ab. Es wird dann der entsprechende value zurückgeliefert:

<?php
if(isset($_POST["submit"])){
    echo $_POST["farbe"] . " wurde ausgewählt";
}
?>

Wir prüfen mit der isset() Funktion zuerst, ob der Submit-Button überhaupt geklickt wurde. Andernfalls würde der Versuch, auf $_POST["farbe"] zuzugreifen, einen Fehler ergeben, da das Element farbe im $_POST Array vor dem Absenden des Formulars ja noch garnicht existiert.

Wenn wir nun also den Submit-Button abschicken, erhalten wir folgende Ausgabe im Browser:

Bei der Auswahl beispielsweise des ersten Radio-Buttons (value = rot), erhalten wir Folgendes angezeigt:

rot wurde ausgewählt                    

Eine Auswahl vordefinieren mit checked

Standardmäßig ist kein Radio-Button aktiviert. Wenn wir dies ändern wollen, d.h. einen bestimmten Button vorbelegen möchten, ergänzen wir den gewünschten Button mit dem Attribut checked="checked":

<input type="radio" name="farbe" value="rot" checked="checked">

Mehrere Radio-Button Gruppen

Wie gesagt, werden die einzelnen Radio-Buttons, die denselben Wert bei name haben, zu einer Gruppe zusammengefasst. Wollen wir nun mehrere Radio-Button Gruppen in einem Formular, brauchen wir zwei (oder mehr) unterschiedliche Werte beim Attribut name. Zum Beispiel:

<form action="programm.php" method="post">

<h2>Erste Gruppe</h2>
    <input type="radio" name="farbe" value="rot"> rot<br>
    <input type="radio" name="farbe" value="gruen"> grün<br>
    <input type="radio" name="farbe" value="blau"> blau<br>

<h2>Zweite Gruppe</h2>
    <input type="radio" name="tier" value="hund"> Hund<br>
    <input type="radio" name="tier" value="katze"> Katze<br>
    <input type="radio" name="tier" value="maus"> Maus<br>

    <input name="submit" type="submit">
</form>

Nun können wir in beiden Radio-Gruppen unabhängig voneinander eine Auswahl treffen. So sieht das dann im Browser aus:

<?php
if(isset($_POST["submit"])){
    echo $_POST["farbe"] . " wurde ausgewählt <br>";
    echo $_POST["tier"] . " wurde ausgewählt";
}
?>

Range Slider

Mit <input type="range"> können wir einen "Schiebregler" erzeugen. Der Vorteil dieses Steuerungselements liegt darin, dass wir einen gültigen Wertbereich (min bis max) vorgeben, der Nutzer also keine falschen Eingaben machen kann. Und so sieht das aus:

Der HTML-Code dafür ist:

<h2>Range Slider</h2>

<form action="programm.php" method="post">

0 <input type="range" name="points" min="0" max="10"> 10<br>

<input name="submit" type="submit">
</form>

Zu beachten sind die Attribute min und max. Diese legen für die Nutzer den möglichen Wertbereich fest.

Die Auswertung des Reglers nach dem Klick auf den Submit-Button läuft nach bekanntem Muster ab:

<?php
 if(isset($_POST["submit"])){
        echo $_POST["points"] . " wurde ausgewählt";
    }
?>

Auswahlmenu (drop-down)

Ein typisches Auswahlmenu bzw. drop-down Menu sehen wir hier:

Ein Auswahlmenu können wir mit dem Tag <select> erzeugen (nicht <input>!). Innerhalb von <select> werden die einzelnen Auswahlpunkte mit <option> gesetzt:

Auswahlmenu mit select

<form action="programm.php" method="post">

<select name="computer">
  <option value="apple">Apple</option>
  <option value="samsung">Samsung</option>
  <option value="sony">Sony</option>
  <option value="dell">Dell</option>
</select>

<input name="submit" type="submit">
</form>
                    

Zur Auswertung genügt bereits folgender PHP-Code:

<?php
    if(isset($_POST["submit"])){
        echo $_POST["computer"] . " wurde ausgewählt";
    }
?>

Wenn wir den Submit-Button mit der Menuauswahl Apple abschicken, erhalten wir die entsprechende Ausgabe im Browser:

apple wurde ausgewählt                    

Übungen

Die Checkbox wurde aktiviert                        

<html><head></head><body>

<h2>Einfache Übung</h2>

<form action="programm.php" method="post">

   <p><input type="checkbox" name="cb1"> Ich denke, also bin ich</p>
   <input type="submit">
</form>


<?php

if(isset($_POST["cb1"])){
    echo "Die Checkbox wurde aktiviert";
}

?>

</body></html>

5 * 3 = 15 (Beispielzahlen)                         

<html><head></head><body>

<h2>Miteinander multiplizieren</h2>

<form action="programm.php" method="post">

<p>1 <input type="range" name="zahl1" min="1" max="100"> 100</p>
<p>1 <input type="range" name="zahl2" min="1" max="100"> 100</p>

<input name="submit" type="submit">
</form>


<?php

if(isset($_POST["submit"])){
    echo $_POST["zahl1"] . " * " . $_POST["zahl2"] . " = " ;
    $erg = $_POST["zahl1"] * $_POST["zahl2"];
    echo $erg;
}

?>

</body></html>

<html><head></head><body>

<?php

if($_POST["z1"] + $_POST["z2"] > 10){
    echo "<span style='color: blue'>Die Summe ist größer als 10.</span>";
}
else{
    echo "<span style='color: red'>Die Summe ist nicht größer als 10.</span>";
}

?>

</body></html>

<html><head></head><body>

<form action="programm.php" method="post">

<h2>Rahmenfarbe bestimmen</h2>
<p>
 <input type="radio" name="color" value="black"> schwarz (5px)<br>
 <input type="radio" name="color" value="red"> rot (5px)<br>
 <input type="radio" name="color" value="blue"> blau (5px)<br>
</p>

<h2>Breite des Bildes bestimmen</h2>
<p>
<select name="size">
  <option value="150">150px</option>
  <option value="300">300px</option>
  <option value="600">600px</option>
</select>
</p>

<input name="submit" type="submit">
</form>


<?php

if(isset($_POST["submit"])){

    $color = $_POST["color"];
    $size = $_POST["size"];

    echo "<h2>Hier Ihre Auswahl:</h2>";
    echo "<img src='atlanta-falcon.jpg' style='width: $size; border: 5px solid $color'>";

}

?>

</body></html>