Ich verstehe den Zweck des Formular-Tags in HTML nicht.

Ich kann einfach alle Eingabetypen perfekt verwenden, ohne das Formular-Tag zu verwenden. Es scheint fast überflüssig, es um Eingaben zu wickeln.

Wenn ich Ajax zum Aufrufen einer serverseitigen Seite verwende, kann ich dafür einfach jQuery verwenden. Die einzige Ausnahme ist, dass mir aufgefallen ist, dass Sie aus irgendeinem Grund ein Upload-Skript um ein Formular-Tag wickeln müssen.

Warum werden Formulare immer noch so häufig für einfache Dinge wie Texteingaben verwendet? Es scheint eine sehr archaische und unnötige Sache zu sein.

Ich sehe einfach nicht den Nutzen oder die Notwendigkeit dafür. Vielleicht fehlt mir etwas.

Was Sie vermissen, ist ein Verständnis des semantischen Markups und des DOM.

Realistisch gesehen können Sie mit HTML5-Markup so ziemlich alles tun, was Sie wollen, und die meisten Browser analysieren es. Als ich das letzte Mal nachgesehen habe, erlaubt WebKit / Blink sogar Pseudoelemente innerhalb von <input>Elementen , was eine klare Verletzung der Spezifikation darstellt - Gecko nicht so sehr. Wenn Sie jedoch mit Ihrem Markup tun, was Sie möchten, wird es in Bezug auf die Semantik zweifellos ungültig.

Warum setzen wir <input>Elemente in <form>Elemente ein? Aus dem gleichen Grund setzen wir <li>Tags in <ul>und <ol>Elemente - dort gehören sie hin. Es ist semantisch korrekt und hilft beim Definieren des Markups. Parser, Screenreader und verschiedene Software können Ihr Markup besser verstehen, wenn es semantisch korrekt ist - wenn das Markup eine Bedeutung hat, nicht nur eine Struktur.

Das <form>Element ermöglicht auch definieren Sie methodund actionAttribute, die dem Browser mitteilen , was zu tun ist, wenn das Formular abgeschickt wird. AJAX ist kein Tool zur 100% igen Abdeckung, und als Webentwickler sollten Sie eine ordnungsgemäße Verschlechterung üben. Formulare sollten auch dann gesendet und übertragen werden können, wenn JS deaktiviert ist.

Schließlich werden alle Formulare ordnungsgemäß im DOM registriert. Mit JavaScript können wir einen Blick darauf werfen. Wenn Sie Ihre Konsole auf dieser Seite öffnen und Folgendes eingeben:

document.forms

Sie erhalten eine schöne Sammlung aller Formulare auf der Seite. Die Suchleiste, die Kommentarfelder, das Antwortfeld - alles richtige Formulare. Diese Schnittstelle kann nützlich sein, um auf Informationen zuzugreifen und mit diesen Elementen zu interagieren. Beispielsweise können Formulare sehr einfach serialisiert werden.

Hier ist etwas Lesematerial:

• Semantisches HTML
• Leitfaden für HTML-Formulare

Hinweis: <input>Elemente können außerhalb von Formularen verwendet werden. Wenn Sie jedoch Daten in irgendeiner Weise senden möchten, sollten Sie ein Formular verwenden.

Dies ist der Teil der Antwort, in dem ich die Frage umdrehe.

Wie mache ich mir das Leben schwerer, indem ich Formen vermeide?

In erster Linie - Containerelemente. Wer braucht sie schon?!

Sicherlich sind Ihre Kleinen <input>und <button>Elemente in einer Art Containerelement verschachtelt ? Sie können nicht einfach mitten in allem anderen herumschweben. Also wenn nicht a <form>, was dann? A <div>? A <span>?

Diese Elemente müssen sich irgendwo befinden, und wenn Ihr Markup kein verrücktes Durcheinander ist, kann das Containerelement nur eine Form sein.

Nein? Oh.

An diesem Punkt sind die Stimmen in meinem Kopf sehr neugierig, wie Sie Ihre Event-Handler für all diese verschiedenen AJAX-Situationen erstellen. Es muss eine Menge geben, wenn Sie Ihr Markup reduzieren müssen, um Bytes zu sparen. Dann müssen Sie benutzerdefinierte Funktionen für jedes AJAX-Ereignis erstellen, die jedem 'Satz' von Elementen entsprechen - auf die Sie einzeln oder mit Klassen abzielen müssen, oder? Es gibt keine Möglichkeit, diese Elemente wirklich generisch zu gruppieren, da wir festgestellt haben, dass sie sich nur um das Markup bewegen und alles tun, bis sie benötigt werden.

Sie codieren also einige Handler benutzerdefiniert.

$('#searchButton').on('click', function (e) {
  e.preventDefault();

  var search = $('#mySearch');

  $.ajax({
    url: 'http://example.com/text',
    type: 'GET',
    dataType: 'text',
    data: 'query=' + search.val(),
    success: function (data) {
      console.log(data);
    }
  });
});


$('#login').on('click', function (e) {
  e.preventDefault();
  var user = $('#username'),
      pass = $('#password'),
      rem = $('#remember');
  
  $.ajax({
    url: 'http://example.com/login',
    type: 'POST',
    data: user.add(pass, rem).serialize(),
    dataType: 'text',
    success: function (data) {
      console.log(data);
    }
  });
});

<!-- No containers, extra markup is silly. -->

<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Dies ist der Teil, in dem Sie etwas sagen wie:

'Ich benutze jedoch wiederverwendbare Funktionen. Hör auf zu übertreiben. '

Fair genug, aber Sie müssen immer noch diese Sätze eindeutiger Elemente oder Zielklassensätze erstellen, oder? Sie müssen diese Elemente noch irgendwie gruppieren .

Leihen Sie mir Ihre Augen (oder Ohren, wenn Sie einen Bildschirmleser verwenden und Hilfe benötigen - gut, dass wir diesem semantischen Markup ARIA hinzufügen könnten , oder?) Und sehen Sie sich die Kraft der generischen Form an.

function genericAjaxForm (e) {
  e.preventDefault();
  var form = $(this);
  
  return $.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    dataType: form.data('type'),
    data: form.serialize()
  });
}

$('#login-form').on('submit', function (e) {
  genericAjaxForm.call(this, e).done(function (data) {
    console.log(data);
  });
});

<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
  <input type="text" name="username" value="user" />
  <input type="password" name="password" value="mypass" />
  <label>
    <input type="checkbox" name="remember" /> Remember me
  </label>

  <button type="submit">Login</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Wir können dies mit jeder gängigen Form verwenden, unsere anmutige Verschlechterung beibehalten und die Form vollständig beschreiben lassen, wie sie funktionieren sollte. Wir können diese Basisfunktionalität erweitern und dabei einen generischen Stil beibehalten - modularer, weniger Kopfschmerzen. Das JavaScript kümmert sich nur um seine eigenen Dinge, wie das Ausblenden der entsprechenden Elemente oder den Umgang mit Antworten, die wir erhalten.

Und jetzt sagst du:

'Aber ich verpacke meine Pseudoformulare in <div>Elemente, die bestimmte IDs haben - ich kann dann die Eingaben lose mit mit zielen.find und .serializeund und ... ausrichten."

Oh, was ist das? Sie wickeln Ihre <input>Elemente tatsächlich in einen Container?

Warum ist es noch kein Formular?

Formular-Tags sind weiterhin erforderlich, wenn Sie das Formular ohne AJAX senden möchten (was in frühen Entwicklungsstadien hilfreich sein kann). Obwohl es möglich ist, Javascript zum Senden von Daten ohne Formular-Tag zu verwenden, fallen Ihnen dennoch einige Vorteile ein:

1. Die Verwendung von Formular-Tags kann in einigen Fällen dazu beitragen, dass Benutzer Ihren Code lesen und verstehen, indem sie ihnen Ihre Absichten zeigen.
2. Die Methode "Senden" ist in Formularen verfügbar. Wenn Sie ein Formular mit einer Eingabe [type = submit] haben und es nicht deaktiviert ist, wird das Formular gesendet, wenn jemand beim Ausfüllen einer der anderen Formulareingaben die Eingabetaste drückt. Sie können dies immer noch tun, indem Sie auf das 'keydown'-Ereignis für die Eingabeelemente warten, aber es ist eine nette Benutzeroberfläche, die Sie kostenlos mit Formular-Tags erhalten.
3. Es gibt einige andere Dinge, die nur mit einem Formular-Tag funktionieren oder mit einem Formular-Tag einfacher sind. Entwickler werden irgendwann auf diese Fälle stoßen und entscheiden, dass es einfacher ist, sie immer überall zu verwenden und Probleme zu vermeiden. Die eigentliche Frage ist wirklich, warum nicht ein Formular-Tag verwenden?

Das HTML-Element stellt einen Dokumentabschnitt dar, der interaktive Steuerelemente zum Senden von Informationen an einen Webserver enthält.

Wir alle kennen Formulare auf HTML-Webseiten. Aus vielen verschiedenen Gründen fragen Personen oder Unternehmen nach unseren E-Mail-Adressen, Namen und Website-URLs. Der Kauf von Produkten im Internet ist heute größtenteils ein Kinderspiel. Mit dem Aufkommen von Sicherheitsgeräten wird die Methode zur Übermittlung Ihrer Daten und des hart verdienten Geldes normalerweise über Formulare ausgeführt.

Mehr Info

Link eins

Link zwei

Ich hatte ein Szenario, in dem eine einzelne Webseite drei Formulare hatte, die alle separate E-Mail-Felder (mit unterschiedlichen IDs) hatten. Ich wickelte sie zuerst getrennt ein <div>. Das automatische Ausfüllen von iOS in Safari verhielt sich seltsam, bis ich alle eingewickelt hatte<form> Tags . Eines der Formulare hatte nur ein Eingabefeld für das Newsletter-Abonnement. Wenn der Benutzer diese Eingabe automatisch ausfüllte, wurde die Webseite zum nächsten Eingabefeld gescrollt, das sich auf einem anderen Teil der Seite befand.

Also, danke Oka für den langen Beitrag. Tags mit semantischer Bedeutung sollten nach Möglichkeit verwendet werden, da Sie nie wissen, welcher Browser / welches Gerät andere Lösungen nicht gut handhabt.