<a ...> in <form ...> nicht mehr erlaubt?

[Linuchs]

Moin,

gestern wurde mir ein neues Problem gemeldet. In einer Anmeldemaske für Mitglieder hatte ich den Link zur Anmelde-Maske für Administratoren.

Der Link funktionierte nicht mehr (wie früher), weil das Feld für die Mitglieder-Nummer ein required hat. Das wird vom Browser also nicht mehr nur beim Absenden der <form> geprüft, sondern nun auch bei Links innerhalb einer Form.

Die Meldung kam wegen des Neueinspielens von Google Chrome, ich konnte das aber auch im Firefox 75.0 nachvollziehen.

Hat womöglich weite Auswirkung. Beim Pflicht-Ankreuzen von „ich habe ... gelesen“ ist ja meist ein Link zu dem, was man gelesen haben sollte.

Wie funktioniert nun ein Link in einer Form?

Gruß, Linuchs

[Der Martin]

Hallo,

leider werde ich aus deiner Beschreibung noch nicht schlau. Ein link innerhalb eines Formulars hat mit dem Formular selbst eigentlich gar nichts zu tun. Er ist kein Formular.Steuerelement (form control) und wird beim Absenden nicht betrachtet, und meines Wissens gibt es auch kein required-Attribut für Links.

Der Link funktionierte nicht mehr (wie früher), weil das Feld für die Mitglieder-Nummer ein required hat. Das wird vom Browser also nicht mehr nur beim Absenden der <form> geprüft, sondern nun auch bei Links innerhalb einer Form.

Hast du vielleicht mal ein Beispiel zur Veranschaulichung? Mir ist der Zusammenhang einfach nicht klar.

Hat womöglich weite Auswirkung. Beim Pflicht-Ankreuzen von „ich habe ... gelesen“ ist ja meist ein Link zu dem, was man gelesen haben sollte.

Ja schon, aber wie gesagt: Ich sehe nicht, in welcher Art ein Link mit dem Formular, dessen Nachfahrenelement er "zufällig" ist, interagieren sollte.

Wie funktioniert nun ein Link in einer Form?

Eigentlich so wie überall sonst auch.

Live long and pros healthy,
 Martin

[Linuchs]

Hallo Martin,

Hast du vielleicht mal ein Beispiel zur Veranschaulichung? Mir ist der Zusammenhang einfach nicht klar.

Hier die Seite mit dem „korrigierten“ und testweise hinzugefügten ursprünglichen Formular (Formulare sind gelb hinterlegt zwischen <form> ... </form>): https://remso.eu/?zp=p521

Bei Klick auf [Login als Administrator] ergibt sich bei 2. dieses Bild:

[Der Martin]

Hallo,

Hier die Seite mit dem „korrigierten“ und testweise hinzugefügten ursprünglichen Formular (Formulare sind gelb hinterlegt zwischen <form> ... </form>): https://remso.eu/?zp=p521

ah, simple answer: Der Link kann nichts dafür. Aber das button-Element darin. Ein button ohne type-Attribut arbeitet implizit als submit-Button und sendet das Formular ab.

Nebenbei ist die Verschachtelung von a und button auch semantisch nicht sinnvoll.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Nebenbei ist die Verschachtelung von a und button auch semantisch nicht sinnvoll.

Nicht nebenbei – sie ist verboten.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

Nebenbei ist die Verschachtelung von a und button auch semantisch nicht sinnvoll.

Nicht nebenbei – sie ist verboten.

das habe ich vermutet, weil es logisch ist - aber ich wollte mich nicht zu weit aus dem Fenster lehnen. Ich weiß ja, dass hier einige Teilnehmer unterwegs sind, die da sicherer sind als ich. 😀

Live long and pros healthy,
 Martin

[dedlfix]

Tach!

In einer Anmeldemaske für Mitglieder hatte ich den Link zur Anmelde-Maske für Administratoren.

[...]

Wie funktioniert nun ein Link in einer Form?

Ist es überhaupt notwendig, dass er im Formular steht? Wenn der Link zu einer Erläuterung für eines der Eingabeelemente führt, dann muss / sollte der in dessen Nähe, also auch im Formuler stehen. Aber wenn der Link zu einer Seite führt, die das Formular komplett ersetzt, muss er nicht als Bestandteil des Formulars notiert sein.

dedlfix.

[Rolf B]

Hallo dedlfix,

wenn es - wie beschrieben - ein Link ist, der die AGB erläutert (und dann tunlichst ein target="_blank" Link sein sollte), dann ergibt ein Link im Form schon Sinn.

Aber, Linuchs, da muss noch irgendwas anderes hereinspielen. Ein schnelles Fiddle, gestartet unter Chrome 81, zeigt dieses Verhalten nicht. Weder mit, noch ohne target="_blank".

Rolf

[Gunnar Bittersmann]

@@Rolf B

und dann tunlichst ein target="_blank" Link sein sollte

Tunlichst nicht.

Könnten die Staubsaugerfuzzis ihre Kippen bitte woanders hinschmeißen? Danke.

Top 10 Mistakes in Web Design, Punkt 9

Ein schnelles Fiddle, gestartet unter Chrome 81, zeigt dieses Verhalten nicht.

Eine schnelle Beispielseite auch nicht. Auch nicht im Firefox.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[kai345]

@@Rolf B

und dann tunlichst ein target="_blank" Link sein sollte

Tunlichst nicht.

Könnten die Staubsaugerfuzzis ihre Kippen bitte woanders hinschmeißen? Danke.

Top 10 Mistakes in Web Design, Punkt 9

Genau. Der Nutzer bevorzugt es nämlich, nach einem Klick zu einem Feld-Erklär-Link im Formular danach alle schon getätigten Eingaben erneut eintippen zu müssen.

[Rolf B]

Hallo kai345,

danke, wollte ich gerade schreiben. Der Top-10 Mistake Nr. 9 meint nämlich das Zumüllen des Users mit Fenstern, um ihn nicht von der Seite zu lassen. Das ist hier nicht der Fall. Einen Sidestep in einem Prozess sollte man NICHT im gleichen Tab/Fenster öffnen, oder wenn doch, dann müsste man die Eingaben zwischenspeichern und würde dann genau auf dieses Required-Problem stoßen

Die Alternative wäre ein HTML-Popup auf der Seite, das aber nur mit JS funktioniert. Kann man per PE ja hinzufügen, aber wenn ich am Ende des Bestellprozesses bin, die AGB abnicken soll, auf den Link drücke und damit meine Eingaben schrotte, bin ich sauer. Okay, viele Eingaben befinden sich dann hoffentlich noch in der Session, weil ich ja am Ende des Bestellprozesses bin und hoffentlich einen Assistenten durchlaufen habe, aber diese AGB-Abnick-Checkboxen stehen zumeist nicht allein auf der Seite. Im konkreten Fall definitiv nicht, sonst hätten wir das required-Problem nicht.

Und nicht jeder denkt daran, in dem Moment "open in new tab" zu befehlen.

Rolf

[Der Martin]

Hallo Rolf,

ich schließe mich deinen Ausführungen komplett an.

Die Alternative wäre ein HTML-Popup auf der Seite, das aber nur mit JS funktioniert.

Mit Einschränkungen wohl auch mit CSS allein.

Und nicht jeder denkt daran, in dem Moment "open in new tab" zu befehlen.

Außer Martin, der durch jahrelange Konditionierung Links fast immer mit der mittleren Maustaste klickt. ;-)
Das war auch einer der vielen Pluspunkte im alten Opera Classic. Da konnte man auch Submit-Buttons mit der mittleren Maustaste anklicken und die Antwort des Formulars so in ein neues Tab lenken.
Dafür benutze ich die Zurück-Funktion des Browsers so gut wie nie. Brauche ich ja selten. Tab schließen und gut is'.

Live long and pros healthy,
 Martin

[Robert B.]

Moin,

Top 10 Mistakes in Web Design, Punkt 9

Genau. Der Nutzer bevorzugt es nämlich, nach einem Klick zu einem Feld-Erklär-Link im Formular danach alle schon getätigten Eingaben erneut eintippen zu müssen.

der Nutzer bevorzugt es, wenn beim Zurück-Gehen das Formular bestehen bliebe – mit Vanilla HTML passiert das nämlich.

Viele Grüße
Robert

[Linuchs]

Hallo Gunnar,

Eine schnelle Beispielseite auch nicht. Auch nicht im Firefox.

deine checkbox enthält required="" - ist die nun required oder nicht?

[Gunnar Bittersmann]

@@Linuchs

deine checkbox enthält required="" - ist die nun required oder nicht?`

Ja, ist sie.

<input required=""/> ist dasselbe wie <input required> – nur dass ersteres „polyglott“ ist, d.h. XHTML-kompatibel.

Attributwerte sind grundsätzlich Strings [Spec §3.2.4.1]. Wird kein Wert zugewiesen (was in HTML-Syntax möglich ist; nicht aber in XHTML-Syntax), hat das Attribut den Wert "" (Leerstring).

Möglich wäre auch die Angabe <input required="required"/>; aber kein anderer Attributwert. [Spec §2.4.2]

🖖 Stay hard! Stay hungry! Stay alive! Stay home!