39. Lektion: Webseiten für den Webserver erstellen: Unterschied zwischen den VersionenAus Attraktor Wiki
Version vom 8. Februar 2024, 14:56 UhrWenn der Webserver effektiv genutzt werden soll, so sind entsprechende Webseiten erforderlich. InhaltsverzeichnisHTML SteuerelementeKnopf (button)So sieht z.B. ein Button aus:
<form action="/control/led" method="GET"> <input type="hidden" name="state" value="on"> <button type="submit">LED Einschalten</button> </form> Das sehen wir uns mal näher an: <form action="/control/led" method="GET"> ... </form> Zuerst wird ein HTML-Formular erstelt. Dieses enthält 2 Attribute:
Hier die Stelle in Serverprogramm: @server.route("/control/led", ["GET"]) def led(request):
<input type="hidden" name="state" value="on"> Dazu dient das Input-Element. Es hat keinen schließenden Tag. Dieses hat hier 3 Argumente:
Hier wird als type hidden verwendet, weil nichts eingegeben werden muss. Dieser Button liefert per Definition den Wert on zurück.
Hier wird von der Server-Funktion der Wert geholt: @server.route("/control/led", ["GET"]) def led(request): state = request.query.get("state", None) Nun muss noch der Button definiert werden: <button type="submit">LED Einschalten</button> Das Button-Tag hat das Argument type mit dem Wert submit. Das bedeutet, das beim Anklicken des Button die Werte des Formulars zum Server geschickt werden.
Dropdown-Menue - (select/option)Das Dropdown- oder Auswahl-Menue enthält eine Liste aus der eine Möglichkeit ausgewählt werden kann. Das Menue wird durch Anklicken aufgemacht. <form action="/control/led" method="GET"> <select name="state" onchange="this.form.submit()"> <option value="">-- Auswahl --</option> <option value="on">Einschalten</option> <option value="toggle">Toggle</option> <option value="off">Ausschalten</option> <option value="blink">Blinken</option> </select> </form> Hier ist die folgende Zeile neu: <select name="state" onchange="this.form.submit()"> Das ist das öffnende Select-Tag. Damit wird die Definition eines Dropdown-Menues eingeleitet. Es enthält hier 2 Attribute:
<option value="">-- Auswahl --</option> <option value="on">Einschalten</option> <option value="toggle">Toggle</option> <option value="off">Ausschalten</option> <option value="blink">Blinken</option> Zu jeder Option wird im öffnenden Tag der zurück zu gebende Wert angegeben. Dann folgt der Anzeige-Text der Option und schließlich das schließende Tag.
</select> </form> Eingabe Felder (text)Schieberegler (slider)Aufbau einer WebseiteZurück zur "Micropython Kurs 2023 Teil 2" Startseite |