Warum ein Formular-Tag verwenden, wenn Sie über Ajax senden?

Philosophische Frage:

Angenommen, ich habe eine Web-App, für die Javascript und ein moderner Browser erforderlich sind , sodass eine progressive Verbesserung kein Problem darstellt. Wenn mein Formular über Javascript erstellt wird und meine Datenaktualisierungen alle über Ajax-POSTs und -PUTs erfolgen, gibt es dann wirklich einen Grund, meine Steuerelemente in ein Formular-Tag zu verpacken? Wenn ich das Tag weiterhin verwenden werde, beispielsweise aus semantischen oder strukturellen Gründen, gibt es einen Grund für Aktions- und Methodenparameter, die ich ignorieren werde? Es fühlt sich für mich wie ein Überbleibsel aus einer früheren Ära an.

Es gibt mindestens eine wichtige Funktion für die Benutzererfahrung, die speziell durch das Umschließen von Eingaben in ein Formular-Tag bereitgestellt wird:

Die Eingabetaste sendet das Formular. In Mobile Safari wird auf diese Weise die Schaltfläche "Los" auf der Tastatur angezeigt .

Ohne ein Formular, das die Eingaben umschließt, gibt es nichts zu senden.

Sie können das Verhalten der Eingabetaste natürlich über ein Tastendruckereignis festlegen, aber ich weiß nicht, ob dies für mobile Geräte funktioniert. Ich weiß nichts über dich, aber ich würde lieber mit der vom Browser bereitgestellten Semantik arbeiten, als sie mit Ereignissen imitieren zu müssen.

In Ihrem Fall würden Sie einfach einen onsubmitEreignishandler für das Formular bereitstellen , der Ihre AJAX-Übermittlung durchführen und dann return falsedie eigentliche Übermittlung abbrechen würde.

Sie können einfach angeben action=""(was "Selbst" bedeutet) und methodist nicht erforderlich - standardmäßig GET.

Wenn Sie keine progressive Verbesserung benötigen, benötigen Sie diese theoretisch nicht.

Auf der anderen Seite haben forms einige coole Gruppierungs- und semantische Effekte. Mit ihnen können Sie Ihre Formularelemente logisch gruppieren und Ihren Skripten das Sammeln der Werte bestimmter Elemente erleichtern.

Wenn Sie beispielsweise eine Benutzereingabe per Ajax senden möchten, ist es immer einfacher zu sagen: "Nehmen wir alle Elemente in diesem Formular und senden Sie sie", als zu sagen: "Nehmen wir diese Eingabe, diese beiden Auswahlen und diese drei Textbereiche und senden Sie sie." ". Nach meiner Erfahrung hilft es dem Entwickler tatsächlich, wenn formTags vorhanden sind.

AJAX ist großartig, aber wie JamWaffles (+1 für ihn) sagte, formbietet die Verwendung von Tags eine Fallback-Methode.

Persönlich verwende ich Formular-Tags, auch für Dinge, die ich mit AJAX einreiche, da dies syntaktisch klar ist und es einfach macht, alle Eingaben in einem bestimmten Formular abzurufen. Ja, Sie könnten dies auch mit einem divoder was auch immer tun, aber wie gesagt, die Verwendung eines Formulars ist syntaktisch sinnvoll.

Im Übrigen behandeln Screenreader den Inhalt in einem formanderen Bereich unterschiedlich, sodass Zugänglichkeitsprobleme berücksichtigt werden müssen, je nachdem, welchen Weg Sie wählen. Beachten Sie, dass anekdotische Beweise darauf hindeuten, dass Google die Barrierefreiheit in seinen Rankings berücksichtigt. Wenn SEO für Sie ein Problem darstellt, verwenden Sie ein Formular und machen Sie es richtig.

Zusammenfassung: Formulare OK für MVC, einfache Webanwendungen, schlecht für komponentenorientierte, umfangreiche Webanwendungen.

Grund: Formulare können keine anderen Formulare verschachteln: große Einschränkung für eine komponentenorientierte Architektur.

Details: Für typische MVC-Anwendungen sind Formulare großartig. In umfangreichen, komplexen Webanwendungen, die viel Javascript und AJAX verwenden und hier und da viele Komponenten enthalten, mag ich keine Formulare. Grund: Formulare können keine anderen Formulare verschachteln. Wenn dann jede Komponente ein Formular rendert, können sich die Komponenten nicht gegenseitig verschachteln. Schade. Indem ich alle Formulare in divs ändere, kann ich sie verschachteln, und wann immer ich alle Parameter abrufen möchte, um sie an ajax zu übergeben, mache ich einfach (mit jQuery):

$ ("# id_of_my_div"). find ("[name]"). serialize ();

(oder eine andere Filterung)

anstatt:

$ ("# id_of_my_form"). serialize ();

Aus sentimentalen und semantischen Gründen benenne ich meine Divs immer wieder etwas_form, wenn sie als Formen fungieren.

Nicht dass ich sehen könnte. Ich erstelle derzeit eine Webanwendung, die <form>s verwendet, aber ich verwende sie, sodass ich eine Fallback-Methode habe, wenn der Benutzer JavaScript deaktiviert hat (und das e.preventDefaultSenden des Formulars normal stoppt). Für Ihre Situation, in der Sie sagen, dass der Benutzer JavaScript haben MUSS, ist ein <form>Tag nicht erforderlich, aber es könnte eine Idee sein, es trotzdem beizubehalten, falls der Browser etwas damit tun muss, oder als eine Art darauf zuzugreifen Klasse.

Kurz gesagt, nein, Sie müssen es nicht verwenden, <form>wenn Sie reines AJAX ausführen, obwohl es möglicherweise eine Idee ist, es zu belassen, wenn Sie sich plötzlich entscheiden, in Zukunft Fallback-Code zu erstellen.

Meiner Meinung nach: Wenn Sie es aus semantischen Gründen verwenden, verwenden Sie es wie vorgesehen. Das Aktionsattribut muss wohlgeformt sein (kann auch leer gelassen werden). Sie können auch Ihre URIs von Ihrer js-Logik trennen, indem Sie das Aktionsattribut festlegen und es vor dem Ajax-Aufruf lesen.

Ich verstehe nicht, warum Sie hier das Formular-Tag verwenden müssten. Der einzige Grund für die Verwendung eines Formular-Tags (außer um Ihr Markup zur Validierung zu bringen) besteht darin, dass der Benutzer die Daten mithilfe einer Sumbit-Eingabe oder eines Schaltflächen-Tags "übermittelt". Wenn Sie dies nicht tun müssen, ist das Formular nicht erforderlich. Ich bin mir jedoch nicht sicher, ob es als "gültiges" Markup angesehen wird. Wenn Sie es verwenden, können Sie es einfach tun, <form action="">da Aktion das einzige erforderliche Attribut des Formular-Tags ist. Sie sprechen jedoch einen guten Punkt an: Die Zukunft von Webanwendungen wird wahrscheinlich nicht mehr das Formular und die traditionelle Übermittlungsmethode benötigen. Sehr interessant und macht mich glücklich. hehe :)