Ce qui vous manque, c'est une compréhension du balisage sémantique et du DOM.
De manière réaliste, vous pouvez à peu près faire ce que vous voulez avec le balisage HTML5, et la plupart des navigateurs l'analyseront. La dernière fois que j'ai vérifié, WebKit / Blink autorise même des pseudo-éléments à l'intérieur des <input>éléments , ce qui est une violation flagrante de la spécification - Gecko pas tellement. Cependant, faire ce que vous voulez avec votre balisage l'invalidera sans aucun doute en ce qui concerne la sémantique.
Pourquoi mettons-nous des <input>éléments à l'intérieur des <form>éléments? Pour la même raison, nous mettons des <li>balises à l'intérieur de<ul><ol> éléments et - c'est là qu'ils appartiennent. C'est sémantiquement correct et aide à définir le balisage. Les analyseurs, les lecteurs d'écran et divers logiciels peuvent mieux comprendre votre balisage lorsqu'il est sémantiquement correct - lorsque le balisage a un sens, pas seulement une structure.
le <form> élément vous permet également de définir methodet actionattributs, ce qui indique au navigateur que faire lorsque le formulaire est soumis. AJAX n'est pas un outil de couverture à 100%, et en tant que développeur Web, vous devez pratiquer la dégradation gracieuse - les formulaires doivent pouvoir être soumis et les données transférées, même lorsque JS est désactivé.
Enfin, les formulaires sont tous correctement enregistrés dans le DOM. Nous pouvons y jeter un coup d'œil avec JavaScript. Si vous ouvrez votre console sur cette même page, et tapez:
document.forms
Vous obtiendrez une belle collection de tous les formulaires de la page. La barre de recherche, les zones de commentaires, la zone de réponse - tous les formulaires appropriés. Cette interface peut être utile pour accéder aux informations et interagir avec ces éléments. Par exemple, les formulaires peuvent être sérialisés très facilement.
Voici du matériel de lecture:
Remarque: <input> éléments peuvent être utilisés en dehors des formulaires, mais si votre intention est de soumettre des données de quelque manière que ce soit, vous devez utiliser un formulaire.
C'est la partie de la réponse où je retourne la question.
Comment rendre ma vie plus difficile en évitant les formes?
D'abord et avant tout - les éléments de conteneur. Qui en a besoin, non?!
Certes, vos petits éléments <input>et <button>sont imbriqués dans une sorte d'élément conteneur? Ils ne peuvent pas simplement flotter au milieu de tout le reste. Alors si ce n'est pas un <form>, alors quoi? A <div>? UNE<span> ?
Ces éléments doivent résider quelque part, et à moins que votre balisage ne soit un gâchis fou, l'élément conteneur peut simplement être un formulaire.
Non? Oh.
À ce stade, les voix dans ma tête sont très curieuses de savoir comment vous créez vos gestionnaires d'événements pour toutes ces différentes situations AJAX. Il doit y en avoir beaucoup, si vous devez réduire votre balisage pour économiser des octets. Ensuite, vous devez créer des fonctions personnalisées pour chaque événement AJAX qui correspond à chaque «ensemble» d'éléments - que vous devez avoir à cibler individuellement ou avec des classes, non? Il n'y a aucun moyen de vraiment regrouper ces éléments de manière générique, puisque nous avons établi qu'ils se déplaçaient simplement autour du balisage, en faisant tout ce qui est nécessaire jusqu'à ce qu'ils soient nécessaires.
Donc, vous personnalisez le code de quelques gestionnaires.
$('#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>
C'est la partie où vous dites quelque chose comme:
«J'utilise cependant totalement des fonctions réutilisables. Arrêtez d'exagérer.
Assez juste, mais vous devez toujours créer ces ensembles d'éléments uniques ou des ensembles de classes cibles, n'est-ce pas? Tu dois encore grouper ces éléments d'une manière ou d'une autre.
Prêtez-moi vos yeux (ou vos oreilles, si vous utilisez un lecteur d'écran et avez besoin d'aide - bonne chose que nous pourrions ajouter un peu d' ARIA à tout ce balisage sémantique , n'est-ce pas?), Et voyez la puissance de la forme générique.
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>
Nous pouvons l'utiliser avec n'importe quelle forme courante, maintenir notre dégradation gracieuse et laisser la forme décrire complètement comment elle devrait fonctionner. Nous pouvons étendre cette fonctionnalité de base tout en conservant un style générique - plus modulaire, moins de maux de tête. Le JavaScript s'inquiète juste de ses propres choses, comme cacher les éléments appropriés ou gérer les réponses que nous obtenons.
Et maintenant tu dis:
'Mais j'emballe mes pseudo-formulaires dans des <div>éléments qui ont des ID spécifiques - je peux alors cibler les entrées de manière lâche avec avec .find, et .serializeeux, et ...'
Oh, qu'est-ce que c'est? Vous enveloppez réellement vos <input>éléments dans un conteneur?
Alors pourquoi n'est-ce pas encore une forme?