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