Schaltflächenkontrolle - mit und durch CSS?!

[Eric March]

Hallo!

Ich muss mit der Befürchtung eröffnen, ob ich zu viele oder zu wenige Infos gebe. Sehr einfach könnte ich fragen:
Da seien Tasten (ich nenne diese anzuklickenden Flächen/Objekte einfach mal so), auf Basis von CSS. Diese müssen in Form (und um das gleich mitzunehmen: Wirkung - nutzbar/inaktiv) per JS verändert werden.

Wenns so einfach wäre… Und am Schlimmsten: es geht nicht um eine schöne ›statische‹ Website sondern einen Haufen Einzelpages die immer wieder neu generiert werden.
Eine (aslo mehr: viele) maschinengenerierte HTML-Seite nämlich stellt - für einzelne Projekte - eine Art Formular dar welches über das Form-Tag und onSubmit Daten an eine Exe außerhalb sendet (diese generiert live just die jeweilige Seite aus einer jeweiligen Musterdatei; und setzt mit einem nächsten Formular fort). Dazu muss ein Input-Tag vom Typ Submit durch den Nutzer ausgelöst werden. Dieses Element ist über eine allgemeine CSS bereits kontrolliert (zu Deutsch: da war jemand schneller und hat das ›gepachtet‹.)
So weit mein Wissen also reicht kann ich «Submit», was eine richtig schöne Taste hergibt, vergessen. Oder evtl. doch nicht!?
Meine Tasten müssen neben der Auslöse-Taste existieren. Sie dürfen (was etwa das Tag Button tut) die besagte Form nicht auslösen. Mit ein bisschen CSS-Klassen und JS ist Umfärben so weit kein Problem. Nur kommen mir da Browser in die Quere. (Den IE8 lassen wir gleich mal weg!) Als kurze Codestückchen
<input class="homeward" id="FernsehTaste" Value="Fernseh" onclick="KlickFernsehen()" alt="Sehfunk">
und
#homeward {
font-size:15px;
text-align:center;
border-radius:4px;
border:0;
min-width:20px;
color:ffffff;
height:25px;
}
zeigt mir Chrome zwar ein buttonförmiges Objekt an, das ich klicken kann (die fehlende JS ändert erst mal nur die Hintergrundfarbe) - nur klicke ich zum 2. Mal in Folge taucht eine Anzeige daruntergeklebt auf, mit dem Text-Inhalt (Fernseh) darin. Und klicke ich (dann) da rein wird meine Pseudo-Taste zu irgendwas mit blassblauem Rand und hellgelbem Hintergrund - und zu einem toten Element. Das macht meine Idee völlig zunichte. Der IE11 tut das nicht, Mozilla-Browser haben eine Macke lokale und auf bestimmte weise referenzierte Files zu laden - und ich habe keine SW die Editieren + Vorschau mit eingebautem vorigem Hochladen beherrscht.
In den Seitenversionen davor wurden einfach nur Grafiken ausgetauscht, bloß braucht man für jede Sprache eigene Grafiken mit eigenen Texten (in den einzelnen Farben und Zuständen), und wehe da musste was geändert werden… Also hoffte ich, CSS könnte helfen den selben Text beizubehalten bzw. je Sprache eben schön einfach als Fließtext einzusetzen erlauben. Denn das würde vieles vereinfachen.


CSS ist nicht mein Spezialgebiet (geht auch gar nicht, wenn man an zig Fronten Wunder vollbringen soll). Wie kann ich solche autarken Tasten mit JS und CSS herstellen, auswerten und kontrollieren, falls überhaupt?
Merke: CSS soll ja erlauben ein Grunddesign mal hier und da anpassen zu können (CI eines Auftraggebers z.B.) und in dieser Flexibilitätsffalle sitze ich nun. Der selbe Tasten-Grundcode, die selbe Seitengrundstruktur, in HTML soll leicht umzuformatieren sein. Für eine Taste, für noch eine…

Eric March

 

[Tronjer]

Sorry, aber das ist sowohl sprachlich wie inhaltlich kaum verständlich. Poste den Beitrag mal in Englisch, falls das deine Muttersprache sein sollte.

 

[threadi]

In deinem Code-Beispiel hast Du offenbar ID und class verwechselt. Mit #homeward referenzierst Du auf eine ID, die es aber nicht gibt.

Unabhängig davon finde ich deinen Text etwas merkwürdig und vor allem unverständlich. Soweit ich es verstanden habe geht es um die Gestaltung eines Buttons und eines dazugehörigen Flyouts (welches Du uns ebenso wie die dafür verwendete JavaScript-Funktion vorenthältst). Was genau ist dabei das Problem? Wenn möglich solltest Du einen Link zur betroffenen Seite zeigen - das sagt meist mehr als tausend Worte.

 

[Eric March]

#homeward war also schon mal falsch… Müsste offenbar .homeward heißen?

«Sorry, aber das ist sowohl sprachlich wie inhaltlich kaum verständlich.»
Gut denn, dafür verstehe ich eure Fach-Spache nicht, was ist denn bitte ein Flyout?
Und wenns zu unverständlich ist, was war an meiner Frage »Wie kann ich solche autarken Tasten mit JS und CSS herstellen, auswerten und kontrollieren, falls überhaupt?« unverständlich?
Ich befürchte nämlich sehr, dass euch nach aller Wahrscheinlichkeit nötige Infos fehlen, sodass die Rückgabe mir u.U. nicht nützen wird, weil Dinge benutzt werden mögen die nicht (mehr) zur Verfügung stehen. Also wollte ich viele Infos geben. Was das denn grundverkehrt?

Ein Link - nun, zu was denn, zu etwas das gar nicht existiert? Das ist ja doch das Problem, ich will etwas bauen und weiß nicht wie das geht, da kann ich schlecht hin verlinken.

Also denn, dann die Fragmente mit denen ich herumteste, die Dinge enthalten die mit dem Problem nichts zu tun haben (die TextArea z.B. was Chrome damit veranstaltet)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/Ordner/Ordner2/global.css">
<link rel="stylesheet" type="text/css" href="../CHECK/TestCSS.css">

<script language="JavaScript">
<!-- Begin
function submitIt() {
alert(TC.value);
}
-->
</script>



</head>
<body OnLoad="TasteInit();">
<script src="../CHECK/TESTCSS_Extern.js" language="JavaScript"  type="text/javascript"></script>
<div id="page-wrap">
<div id="logo"><img src="/Ordner/Ordner2/logo.gif"></div>
<div id="top"><font face='Arial' size='1'></font></div>
<div class="main">
<br>

<form onSubmit="submitIt(this)">

<INPUT Type="submit" id="ContinueButton" Value="Continue" border="0" alt="Go to Next">
<br><br>

<!-- <input type="submit" id="RadioTaste" Value="Radio" onkeydown="ToteTaste()" onclick="GeklickteTaste()"> -->
<input Type="retour" id="RadioTaste" Value="DampfRadio" onclick="KlickRadio()" alt="Hörfunk"></button>
<br><br>
<!-- <input type="submit" id="RadioTaste" Value="Radio" onkeydown="ToteTaste()" onclick="GeklickteTaste()"> -->
<input class="homeward" id="FernsehTaste" Value="Fernseh" onclick="KlickFernsehen()" alt="Sehfunk">

<br><br>
<TEXTAREA name="TC" Rows="3" Cols="81" onKeyUp="txtLimit(this.form.T2,240);"></TEXTAREA><BR>

</form>
<br>
</div>
<div id="bottom"><font face='Arial' size='1'></font></div>
<div id="web">www.XXXXX.com</div>
</div>

</body>
</html>

Nun die CSS. mit dem # durch den . ersetzt

input[type=retour]{
font-size:15px;
text-align:center;
border-radius:5px;
border:0;
min-width:20px;
    color:ffffff;
height:25px;
}

.homeward {
font-size:15px;
text-align:center;
border-radius:4px;
border:0;
min-width:20px;
    color:ffffff;
height:25px;
}

Die globale CSS (nicht von mir, ich sehe nur zu mich daran zu orientieren)

#page-wrap{
width:100%;
position:static;
}

#logo{
width:312px;
height:57px;
margin-left:70px;
margin-bottom: -55px;
}

#top{
width:100%;
background-color:#393939;
height:10px;
margin-top:70px;
}

.main{
float:center;
background-color:#EEEEEE;
}

#bottom{
width:100%;
background-color:#393939;
height:10px;
position:relative;
}

#web{
margin-right:20px;
float:right;
font-family:Arial;
color:#000080;
font-size:10px;
margin-top:4px;
position:relative;
}

label{
display:inline-block;
cursor:pointer;
position:relative;
padding-left:25px;
margin-right:15px;
font-size:13px;
}
.wrapper{
width:500px;
margin:50px auto;
}

input[type=radio],input[type=checkbox]{
display:none;
}
label:before{
content:"";
display:inline-block;
width:16px;
height:16px;
margin-right:10px;
position:absolute;
left:0;
bottom:1px;
background-color:#aaa;
box-shadow:inset 0px 2px 3px 0px rgba(0,0,0,.3),0px 1px 0px 0px rgba(255,255,255,.8);
}
.radio label:before{
border-radius:8px;
}
.checkbox label{
margin-bottom:10px;
}
.checkbox label:before{
border-radius:3px;
}
input[type=radio]:checked+label:before{
content:"\2022";
color:#0E0D8D;
font-size:40px;
text-align:center;
line-height:15px;
}
input[type=checkbox]:checked+label:before{
content:"\2713";
text-shadow:1px 1px 1px rgba(0,0,0,.2);
font-size:15px;
color:#23227B;
text-align:center;
line-height:15px;
font-weight:bold;
}

input[type=submit]{
border-radius:5px;
border:0;
min-width:200px;
    color:ffffff;
height:25px;
background:#0E0D8D;
/* Old browsers */
  background:-moz-linear-gradient(top, #0E0D8D 1%, #0E0D8D 100%);
/* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(1%, #0E0D8D), color-stop(100%, #0E0D8D);
/* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, #0E0D8D 1%, #0E0D8D 100%);
/* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top, #0E0D8D 1%, #0E0D8D 100%);
/* Opera 11.10+ */
  background:-ms-linear-gradient(top, #0E0D8D 1%, #0E0D8D 100%);
/* IE10+ */
  background:linear-gradient(to bottom, #0E0D8D 1%, #0E0D8D 100%);
/* W3C */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0E0D8D', endColorstr='#0E0D8D', GradientType=0);
/* IE6-9 */
}

Und das hier ist die JS

/* JavaScript Document */

var RadioZustand=0;
var FernsehZustand=0;

function TasteInit() {
KlickRadio();
KlickFernsehen();
}

function DontKnowButton() {
var farbe;
var bunt=document.getElementById("noanswer");
farbe=document.getElementById("noanswer").style.backgroundColor;
alert("Farbe="+farbe);
farbe=bunt.style.backgroundColor;
alert("Farbe="+farbe);
for (var i=0; i<bunt.length; i++) {
  alert(i);
  bunt[i].style.backgroundColor = "00ff00";
    }
// alert("Weißnicht");
}

function KlickRadio() {
var RTaste=document.getElementById("RadioTaste")
if (RadioZustand==0) {
  RTaste.style.backgroundColor = "#ff0000";
  RadioZustand=1;
} else {
  RTaste.style.backgroundColor = "#00ff00";
  RadioZustand=0;
}
}

function KlickFernsehen() {
var FTaste=document.getElementById("FernsehTaste")
if (FernsehZustand==0) {
  FTaste.style.backgroundColor = "#00ffff";
  FernsehZustand=1;
} else {
  FTaste.style.backgroundColor = "#ff00ff";
  FernsehZustand=0;
}
}

Das ist ohne Frage Chaos und vermutlich stehen dem geneigten Leser die Haare zu Berge, aber der derzeitige Codewust da ich ja dauernd darn rumändere, andere Stücke zwischenlagere…

Eric March

 

[Tronjer]

Und wenns zu unverständlich ist, was war an meiner Frage »Wie kann ich solche autarken Tasten mit JS und CSS herstellen, auswerten und kontrollieren, falls überhaupt?« unverständlich?

Du bedienst dich hier einer Terminologie, die in keinerlei Zusammenhang mit der Materie steht, und wahrscheinlich fehlen dir auch sämtliche Grundlagen. Es gibt keine Tasten, höchstens Buttons, und wo da der Unterschied zwischen 'autark' und 'pseudo' liegen soll, habe ich nicht verstanden. Buttons kann man weder herstellen, noch auswerten oder kontrollieren.

Lies dich erstmal ein und komm anschließend wieder. Dann verstehen wir dich und du uns vielleicht besser.

 

[Eric March]

Sorry,
aber wenn ich mir erst alles beibringen soll um kompetent Fragen zu stellen zu können bin ich hier wohl falsch… Ich habe auf Hilfe gehofft eben weil ich wenig Ahnung habe und werde runtergeputzt. Nett.

Du bedienst dich hier einer Terminologie, die in keinerlei Zusammenhang mit der Materie steht,
Vielleicht weil ich diese nicht kenne und erfahren möchte welche Zusammenhänge existieren?

und wahrscheinlich fehlen dir auch sämtliche Grundlagen.
Hallo-Welt CSS-Kurse und das Stylen ganzer statischer Websites sind nun eben nicht das was ich brauche.
Ich bin Programmierer, der Logikkonstrukte baut - und der nicht jede Sprache mit der er von außen konfrontiert wird kennen kann! Deswegen frage ich hier nach Lösungen wie CSS-Elemente geschrieben sein müssen um den gewünschten Effekt zu erreichen: etwas Anklickbares das wie eine zu drückende Taste arbeitet.

Es gibt kene Tasten, höchstens Buttons,
Und es gibt Anführungszeichen und Erklärungen. Die habe ich geliefert warum normale Konstrukte wie <Button …> oder <Input type="submit" …> in meinem Falle nicht greifen, und ich daher eine Beschreibung brauche mit der man vorläufig arbeiten kann das Objekt der Begierde zu benennen.

und wo da der Unterschied zwischen 'autark' und 'pseudo' liegen soll, habe ich nicht verstanden.
Den gibts auch nicht weil es um zwei unterschiedliche Dinge geht.
autrak - die sog. Tasten dürfen nicht von den in der obigen Antwort benannten HTML-Funktionen sein weil diese innerhalb einer Form-Konstruktion (die nun mal so aufgebaut ist und nicht zu ändern geht) deren submit auslöst, was nicht passieren darf. Meine sog. Tasten müssen arbeiten wie Buttons, aber von den Erwähnten und ihrem Auslösevorgang unabhängig sein.
pseudo - weil es eben keine o.g. echten Buttons sein dürfen sondern etwas das so aussieht.

Buttons kann man weder herstellen, noch auswerten oder kontrollieren.
Mit dem Button-Tag kann ich einen Button herstellen; ich kann aber selbst ein SPAN-Tag verwenden um daraus ein Etwas zu basteln was wie ein Button wirkt, das würde ich auch Herstellen nennen. Mit der JS die der Button, Pardon: das was wie einer aussieht, auslöst kann ich sein Tun auswerten. Und den beschriebenen Input-Submit-«Button» kann ich in z.B. seiner Farbe ändern, ich habe eine gewisse Kontrolle über ihn (ich kann ich sogar disablen, das wäre die volle Kontrolle über sein Dasein).


Das wäre teilweise alles halb so wild wenn nicht Browser den Code unterschiedlich auswerten würden! Das ist der Sumpf in dem ich stecke - etwas zu konstruieren das möglichst überall auf gleiche Weise unfallfrei (siehe Chrome) funktioniert.
Klicken, Maßnahmen der JS, deren Folgen - dieses logische Gerüst steht! Es geht beinahe nur noch um die Optik und den Vorzug Fließtext einsetzen zu können.

Eric March

 

[Tronjer]

Ich bin Programmierer, der Logikkonstrukte baut - und der nicht jede Sprache mit der er von außen konfrontiert wird kennen kann!

CSS-Selektoren zu schreiben, ist absolut trivial.

<button class="foo">Bar</button>
.................
.foo {
  color: #ff0000;
}

Eine Referenz findest du hier
http://www.css4you.de
und zur Vermeidung von Darstellungsproblem in unterschiedlichen Browsern bieten sich entsprechende Frameworks an.
http://getbootstrap.com/

Und es gibt Anführungszeichen und Erklärungen. Die habe ich geliefert warum normale Konstrukte wie <Button …> oder <Input type="submit" …> in meinem Falle nicht greifen, und ich daher eine Beschreibung brauche mit der man vorläufig arbeiten kann das Objekt der Begierde zu benennen.

Die greifen schon. By default senden sie die Formulardaten an die im Form-Tag angegebenen angegebene URL und verwenden dazu, soweit nicht anders definiert, die Methode GET. Damit das auch funktioniert, muss sich auf der anderen Seite ein Webserver befinden.

Wenn du das nicht willst, kannst du auch einen asynchronen Request per AJAX absenden.

<form action="http://example.com">
  <input type="text">
  <input type="submit" value="Click">
</form>

$('form').on('submit', function(event) {
  event.preventDefault();
  $.ajax({
    ......
  })
});

Eine genaue Erläuterung von $.ajax() findest du nebst Beispielen in der offiziellen jQuery Doc. Sollte für dich als Programmierer eigentlich kein Problem sein.

 

[Eric March]

CSS-Selektoren zu schreiben, ist absolut trivial.
Müsste dir aufgefallen sein, dass ich so weit schon bin.
Wie verheirate ich diesen Selektor XY mit einem HTML-Tag AB das schon von anderen Selektoren (u.a.m.) kontrolliert wird - kann ich das überschreiben? Die ID (HTML) sollte doch helfen solche «Kinder beim Namen nennen zu können»?
Nebenbei: Wenn ich 2 CSS-Files nacheinander definiere (angenommen mit widersprechenden Einträgen), hat da eines von Vorrang; das erste, das zweite? Ein File ist mir logischerweise lieber als (s.u.) solche Styles inline einflechten zu müssen (und wer hat da dann wieder Vorrang?)

und zur Vermeidung von Darstellungsproblem in unterschiedlichen Browsern bieten sich entsprechende Frameworks an.
Was soll mir das Beispiel konkret sagen? Was sind die einzelnen Besonderheiten ich ich ggf. gar nicht mal werde umsetzen können - <nav Class="xyz"> um ein Tag NAV zu definieren, oder der Einsatz von DIV und SPAN als typische Container?
Ich sitze in einem Käfig, maschinengeneriert vorgebacken (damits Spaß macht: selbst das erfolgt da und dort keinen nachvollziehbaren Regeln). Mir bleibt nur innerhalb des FORM-›Rahmens‹ irgendwas zu basteln, JS von da aus zu erreichen. Das gibt einen Roh-Code der von der hinter FORM stehenden Anwendung geladen und geparst wird um dann als HTML-Seite zurückgegeben zu werden. Das Ding ist zickig genug. Und innerhalb des FORM-›Rahmens‹ stehen weitere Dinge aus dieser Höllenmaschine die ein Ändern erschweren.
All dieser Vorerzugte Code durchläuft eine Behandlung durch ein Programm (und sei dies auch VBA unter Excel - bedient von mehr oder weniger Laien was HTML angeht, aus Not von mir geboren und immer weiter gewachsen, „Könntest du nicht noch…“) was überhaupt etwas Vorzeigbares erzeugt (und da ist CSS schon eine gewisse Erleichterung), Vorhandenes anpasst und über Tricks per JS die Standardmethode ABC für etwas ganz anderes einspannt. Der User muss etwas ›Unfallfreies‹ bekommen, was Chrome da treibt ist grenzwertig, Ein INPUT z.B. verhindert auf den Fließtext zuzugrifen (Markieren reicht da schon beim draufklicken) - das alles sind Zahnrädchen im Getriebe.
Wenns so einfach wäre würde ich nicht nach pfiffigen Workarounds suchen.

Die greifen schon.
Ich meinte Anführungszeichen um Taste herum (eben weils kein Button o.ä. ist). Was Form tut wissen wir, und wir sollten wissen was <FORM onsubmit="JS()" …> auslöst: in erster Linie Buttons (ohne irgendwelches Submit!), Input-Type Submit. Und eben deswegen brauche ich »Tasten anderer Kategorie«.

Wenn du das nicht willst, kannst du auch einen asynchronen Request per AJAX absenden.
Was ich will..? Ich habe nichts zu wollen, ich muss all die Mechanismen schlucken die maschinengeneriert auf mich einstürzen - Form, OnSubmit. Nur und genau dieses.
Eine eigene, statische, fertige Site - das wäre schön. Mein Problem ist dynamisch. Immer gleich und gleichzeitig immer anders.


Nachtrag
DIV und SPAN fallen aus da sich ein Value="Beschriftung" zu einem Krampf um Textformatierung und noch viel mehr der Optik (auch breite) der Taste entwickelt. FORM wiederum umfasst Kontrollfunktionen der ›Hintergrund›-Software. Ich sehe derzeit nicht wie ich das Vorgegebene unfallfrei so umbaue, dass sich nur dieser Kontrollcode samt des Auslöse-Inputs innerhalb von FORM aufhalten. Bei Tests ist damit wenigsten BUTTON als eigenständiges Objekt neben Input-Submit nutzbar (ohne dass Chrome dazwischenfunkt) - CSS wenigsten erlaubt die Font(-Familiy) zu kontrollieren. Ist dennoch unpraktischer als Value="…".

 

[thecain]

Ich verstehe zwar nicht ganz was du willst, habe aber versucht dein Problem nachzustellen und mal deinen Code von Beitrag 4 kopiert.

Da hats massenhaft Tags die du aufmachst und nicht wieder schliesst, sowie konstrukte wie:

<input Type="retour" id="RadioTaste" Value="DampfRadio" onclick="KlickRadio()" alt="Hörfunk"></button>

Das kann nicht funktionieren: 1. Type="retour" existiert nicht
2. input öffnen, button schliessen...

Wenn ein Browser das toleriert ist das schön, aber grundsätzlich führt solcher Code zu einem von dir beschriebenen Fehlerverhalten. Denn: Browser halten sich an Spezifikationen wenn diese nicht erfüllt werden, ist auch das Verhalten undefiniert und kann je nach Browser variieren. http://validator.w3.org/ Kann beim validieren vom Code dein Freund sein.

 

[Eric March]

Das Mit dem </Button> habe ich wortwörtlich aus den Augen verloren (rechts neben dem Bildschirmrand) und auch erst gemerkt als es zu spät war.
Retour? → input[type=retour] - siehe weiter oben. Ich denke mal der existierte zu dem Zeitpunkt durchaus noch.

Testcode, der völlig andere Bruchlandungen hinlegt, durch den Validator zu jagen halte ich für nicht recht zielführend. Wenn die Mechanik denn endlich läuft kümmere ich mich auch ums ›Smarten‹. (Ließe ich den Maschinencode durch den Validator laufen… Besser nicht )

Der Aktuelle Stand ist der, das Form-Tag anzugreifen (das Oberteil zu verschieben) um die Auslösefunktion von <Button …> damit irrelevant werden zu lassen weil es nun außerhalb zu liegen kommt.
Ein fauler Kompromiss, da das garantiert wieder andere Schlaglöcher aufreißt. Jetzt muss ich erst mal zusehen, das so geänderte »Fahrgestell« mit den unterschiedlichen »Karosserien« auf Linie zu bringen um mir dann zu überlegen wie ich das »Interieur« (besagte Tasten) da einflechte. Alles, damit Kollegen auf Knopfdruck solch ganze Seitenkonstrukte erzeugen können.

 

[threadi]

input[type=retour] gibt es in keinem HTML-Standard. Welche Werte bei hTML5 zulässig sind steht hier:
http://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute
Wenn Du Elemente und Attribute erfindest und den Validator außer Acht lässt baust Du dir erst recht eine größere Baustelle als Du eigentlich beabsichtigst. Es gibt nicht ohne Grund die Vorgaben zu den HTML-Standards. Solange der Code nicht sauber ist, kann jeder Browser mit deiner Seite machen was er denkt, wodurch sich erst recht Funktionsunterschiede ergeben können.

 

[Tronjer]

Testcode, der völlig andere Bruchlandungen hinlegt, durch den Validator zu jagen halte ich für nicht recht zielführend. Wenn die Mechanik denn endlich läuft kümmere ich mich auch ums ›Smarten‹. (Ließe ich den Maschinencode durch den Validator laufen… Besser nicht )

Der Aktuelle Stand ist der, das Form-Tag anzugreifen (das Oberteil zu verschieben) um die Auslösefunktion von <Button …> damit irrelevant werden zu lassen weil es nun außerhalb zu liegen kommt.

und das von einem Programmierer ...