Input statt Button: Keine Argumente

VeryPrivat · 21. April 2020

Ich programmiere für meinen ESP8266 html Seiten und stoße dabei immer wieder an meine Grenzen. Bisher habe ich unter anderem folgenden Button verwendet: <a href="cmd?type=funk&file=funk.cfg&ID=InetAn"><button class="button buttonOn">AN</button></a>

Das hat auch so funktioniert - der ESP hat das Kommando bekommen, ausgewertet und das gemacht was er soll. Da der HTML online Validator aber darüber gemeckert hat: "The element “button” must not appear as a descendant of the “a” element.", habe ich die Buttons auf Formen umgeschrieben (laut Hinweise im Internet):

<form class="btn" action="cmd?type=funk&file=funk.cfg&ID=InetAus"><button class="buttonOff">AUS</button></form>

Leider wird jetzt der Link nicht mehr beim über den Button fahren angezeigt (nicht so schlimm) und offensichtlich der Link nur mehr bis cmd? geschickt. Ich verstehe nicht warum und wie ich das lösen kann. Wie ersetzt man jetzt den Button im ersten Befehl "richtig".

Sempervivum · 21. April 2020

Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.

timtim · 21. April 2020

Hi Private Very,

in dem Form wird nur das cmd geschickt, weil die parameter hier im form erwartet werden.

Ich würde dir daher empfehlen für jeden Parameter ein hidden input hinzuzufügen, schau dir das hier mal an:

https://www.w3schools.com/tags/att_form_method.asp

Damit solltest du dann zum gewünschten Ergebnis kommen.

Grüße

Timo

VeryPrivat · 21. April 2020

Vielen Dank für die Hilfe! Da hätte ich vermutlich ewig gebraucht. Der Befehl wird dadurch schon ganz schön aufwändig:

aus <a href="cmd?type=funk&file=funk.cfg&ID=InetAn"><button class="button buttonOn">AN</button></a>

wird jetzt z.B.:

HTML

<form action="cmd" method="get">
  <input class="btn" type="hidden" name="type" value="funk">
  <input class="btn" type="hidden" name="file" value="funk.cfg">
  <input class="btn" type="hidden" name="ID" value="InetAn">
  <button class="buttonOn">AN</button></div>
</form>

HTML kann schon ganz schön aufwändig werden...
Nachtrag: Über Tipps, wie ich das (z.B. mit .css oder übergreifender Definition) noch vereinfachen kann, würde ich mich freuen. Immerhin habe ich 12 Buttons und speicher auf einem ESP8266 ist ein beschränktes Gut.

timtim · 21. April 2020

Das ist richtig, mit der Formular version hättest du den vorteil das du das Formular bearbeitbar machen kannst um so verschiedene befehle zu senden. Wenn du es einfacher willst, dann würde ich Sempervivum 's Vorschlag befolgen. Und weiter das <a href='..'>An</a> nutzen. Mittels CSS kannst du das aussehen anpassen.

Grüße

Timo

Sempervivum · 21. April 2020

Zitat

Der Befehl wird dadurch schon ganz schön aufwändig:

Das trifft allerdings zu Wenn Du dagegen mein Posting nicht ignorierst, ist es für jeden Button ein Einzeiler, wie bisher, plus ein paar Zeilen CSS, diese aber nur einmal für alle Buttons.

VeryPrivat · 21. April 2020

Oh, den Vorschlag von Sempervivum habe ich ganz überlesen, sorry! Das klingt auch interessant - ich werde mich mal daran versuchen. Ich hoffe ich kriege das (auch) hin. Im .css File habe ich schon so viel verdreht - da kommt es darauf wohl auch nicht mehr an

Sobald es klappt oder ich nicht weiter komme, werde ich es hier posten!

Fips · 21. April 2020

Zitat von VeryPrivat

Immerhin habe ich 12 Buttons und speicher auf einem ESP8266 ist ein beschränktes Gut.

Der Esp8266 hat ausreichend Spiffs, darin kannst du viele Webseiten speichern.

VeryPrivat · 22. April 2020

Zitat von Sempervivum

Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.

Danke für den Tipp - für meine Zwecke sehr brauchbar. Nach langem probieren bin ich jetzt auf folgende Einstellungen gekommen (falls jemand ein ähnliches Problem lösen möchte). Es handelt sich um einen Auszug meines Codes:

CSS: html5.css

<style>
.btnLnkOn{
    font-size: 1em; /*Button Schriftgröße: Relativ grid-funk!*/
    width:8em; /*Buttonbreite*/
    border-radius:10px; /*Abgerundete Ecken*/
    padding:5px 10px; /*Rahmenabstand zu Text (Button wird größer)*/ 
    border: outset;    /*Rahmendarstellung: Unbetätigt*/
    border-color: #24D; /*Rahmenfarbe: Bläulich*/
    background: linear-gradient(#fff,#aaa); /*Verlauf hellgrau > dunkelgrau*/
    color:#000; /*Schriftfarbe: Schwarz*/
    text-decoration:none; /*Kein Textformat (Standard bei Link: Unterstrichen)*/
    transition:.5s; /*Animationsdauer*/
    text-align:center;  /*Button Text zentriert*/
    margin: auto;        /*Abstand des Buttons*/
    display: block; /*Ermöglicht zentrieren des Textes und width*/
}
</style>

Alles anzeigen

HTML: LinkAsButton.html

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<link rel="stylesheet" href="html5.css">
<title>GRID-TEST!</title>
<div><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=InetAn">AN</a></div>
</html>

Vielen Dank für die rasche und kompetente Hilfe (an alle!)!

Input statt Button: Keine Argumente

Jetzt mitmachen!

Teilen

Tags