Input statt Button: Keine Argumente

  • 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".

  • 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.

  • 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.

  • 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

  • Zitat

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

    Das trifft allerdings zu :D 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.

  • 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!

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

    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!)! :thumbup:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!