Jetzt anmelden...

Login
Passwort
Registrieren
25.04.19 5481 Views Kommentare [0] 1 0

credit: ©everythingpossible(stock.adobe.com)

PHP Tutorial #22

HTML Auswahlelemente mit PHP auswerten

Neben dem einfachen Text-Eingabefeld eines HTML-Eingabeformulars, wie wir es im letzten Kapitel kennengelernt haben, gibt es noch eine ganze Reihe weiterer Typen nützlicher Formularelemente. Schauen wir uns diese jetzt mal genauer an!

Download als eBook

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:

HTML PHP checkbox

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.

HTML PHP Radio button group

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:

HTML PHP Radio button group

<?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:

HTML PHP Range slider

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:

HTML PHP select auswahlmenu

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

einfach

Gestalten Sie folgendes HTML-Formular in einer Datei namens programm.php nach:

HTML PHP checkbox Übung

Wenn die Checkbox aktiviert und der Submit-Button geklickt wurde, soll am Bildschirm folgender Text erscheinen:

Die Checkbox wurde aktiviert                        
Lösung ein-/ausblenden

mittel

Platzieren Sie in einer Datei namens programm2.php zwei Range Slider:

HTML PHP slider Übung

Beim Absenden des Formulars werden die beiden Werte der Slider mit PHP miteinander multipliziert. Die beiden Werte und das Ergebnis sollen in dieser Form angezeigt werden:

5 * 3 = 15 (Beispielzahlen)                         
Lösung ein-/ausblenden

schwer

Entwerfen Sie ein Formular mit einer Radio-Button Gruppe und einem Auswahlmenu (drop-down).

Die beiden Auswahlelemente legen fest, welche Rahmenfarbe und welche Breite (in Pixel) das folgende Bild haben soll:

HTML PHP Übung
(rechte Maustaste -> speichern unter...)

Mögliche Rahmenfarben sollen schwarz, rot und blau sein (bei jeweils 5px dicke).

Als mögliche Bildbreite sollen 150px, 300px und 600px zur Auswahl stehen (achten Sie darauf, dass das Bild nicht verzerrt und die Proportionen erhalten bleibt).

Lösung ein-/ausblenden

Falconbyte unterstützen

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Objektsammlungen

Lernen Sie in diesem Kapitel, wie Sie eine Sammlung von Objekten erstellen können.

Statische Elemente

Statische Variablen und Methoden nutzen

Java einrichten

Erfahren Sie, wie einfach es ist, mit Java zu beginnen

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2021 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen discord programmieren lernen