Lo que le falta es una comprensión del marcado semántico y del DOM.
Siendo realistas, puedes hacer prácticamente lo que quieras con el marcado HTML5, y la mayoría de los navegadores lo analizarán. La última vez que verifiqué, WebKit / Blink incluso permite pseudoelementos dentro de <input>elementos , lo cual es una clara violación de la especificación; Gecko no tanto. Sin embargo, hacer lo que quiera con su marcado lo invalidará indudablemente en lo que respecta a la semántica.
¿Por qué ponemos <input>elementos dentro de <form>elementos? Por la misma razón, colocamos <li>etiquetas dentro de los elementos <ul>y <ol>: es donde pertenecen. Es semánticamente correcto y ayuda a definir el marcado. Los analizadores, lectores de pantalla y varios programas de software pueden comprender mejor su marcado cuando es semánticamente correcto, cuando el marcado tiene significado, no solo estructura.
El <form>elemento también le permite definir methody actionatributos, que indican al navegador qué hacer cuando se envía el formulario. AJAX no es una herramienta de cobertura del 100% y, como desarrollador web, debe practicar una degradación elegante: los formularios deben poder enviarse y transferirse los datos, incluso cuando JS está apagado.
Finalmente, todos los formularios se registran correctamente en el DOM. Podemos echar un vistazo a esto con JavaScript. Si abre su consola en esta misma página y escribe:
document.forms
Obtendrá una buena colección de todos los formularios de la página. La barra de búsqueda, los cuadros de comentarios, el cuadro de respuestas: todos los formularios adecuados. Esta interfaz puede ser útil para acceder a información e interactuar con estos elementos. Por ejemplo, los formularios se pueden serializar muy fácilmente.
Aquí hay material de lectura:
Nota: los <input>elementos se pueden usar fuera de los formularios, pero si su intención es enviar datos de alguna manera, debe usar un formulario.
Esta es la parte de la respuesta en la que le doy la vuelta a la pregunta.
¿Cómo hago mi vida más difícil evitando las formas?
En primer lugar, elementos contenedores. ¿Quién los necesita, verdad?
Ciertamente, sus elementos pequeños <input>y <button>están anidados dentro de algún tipo de elemento contenedor. No pueden simplemente estar flotando en medio de todo lo demás. Entonces, si no es un <form>, ¿entonces qué? A <div>? A <span>?
Estos elementos tienen que residir en algún lugar y, a menos que su marcado sea un desastre, el elemento contenedor puede ser simplemente una forma.
¿No? Oh.
En este punto, las voces en mi cabeza tienen mucha curiosidad sobre cómo crear sus controladores de eventos para todas estas diferentes situaciones AJAX. Debe haber mucho, si necesita reducir su marcado para ahorrar bytes. Luego, debe crear funciones personalizadas para cada evento AJAX que corresponda a cada 'conjunto' de elementos, que debe tener para apuntar individualmente o con clases, ¿verdad? No hay forma de agrupar realmente estos elementos de forma genérica, ya que hemos establecido que simplemente deambulan por el marcado, haciendo lo que sea hasta que sean necesarios.
Así que personalizas el código de algunos controladores.
$('#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>
Esta es la parte en la que dices algo como:
Sin embargo, utilizo totalmente funciones reutilizables. Deja de exagerar.
Es bastante justo, pero aún necesita crear estos conjuntos de elementos únicos, o conjuntos de clases de destino, ¿verdad? Todavía tienes que agrupar estos elementos de alguna manera.
Préstame tus ojos (u oídos, si estás usando un lector de pantalla y necesitas ayuda, es bueno que podamos agregar algo de ARIA a todo este marcado semántico , ¿no?), Y contempla el poder de la forma genérica.
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>
Podemos usar esto con cualquier forma común, mantener nuestra elegante degradación y dejar que la forma describa completamente cómo debería funcionar. Podemos ampliar esta funcionalidad básica manteniendo un estilo genérico : más modular, menos dolores de cabeza. El JavaScript solo se preocupa por sus propias cosas, como ocultar los elementos apropiados o manejar cualquier respuesta que obtengamos.
Y ahora dices:
'Pero envuelvo mis pseudo-formularios en <div>elementos que tienen ID específicos; luego puedo apuntar las entradas libremente con .find, y .serializeellos, y ...'
¿Oh, qué es eso? ¿De verdad envuelves tus <input>elementos en un contenedor?
Entonces, ¿por qué no es una forma todavía?