Quel est le but de la balise de formulaire html
Je ne comprends pas le but de la balise de formulaire en html.
Je peux facilement utiliser n'importe quel type d'entrée sans utiliser la balise form. Il semble presque redondant de l'enrouler autour des entrées.
De plus, si j'utilise ajax pour appeler une page côté serveur, je peux simplement utiliser jQuery pour cela. La seule exception est que j'ai remarqué que vous devez enrouler un script de téléchargement autour d'une balise de formulaire pour une raison quelconque.
Alors, pourquoi les formulaires sont-ils encore si largement utilisés pour des choses simples comme les entrées de texte? Cela semble être une chose très archaïque et inutile à faire.
Je ne vois tout simplement pas l'avantage ni le besoin. Peut-être que je manque quelque chose.
Ce qui vous manque, c'est une compréhension de balisage sémantique, et du DOM.
De façon réaliste, vous pouvez à peu près faire tout 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 pseudo-éléments à l'intérieur des éléments <input> , ce qui est une violation claire des spécifications - 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 éléments <input> À l'intérieur des éléments <form>? Pour la même raison, nous avons mis des balises <li> À l'intérieur des éléments <ul> Et <ol> - 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.
L'élément <form> Vous permet également de définir les attributs method et action, qui indiquent au navigateur quoi faire lorsque le formulaire est soumis. AJAX n'est pas un outil de couverture à 100%, et en tant que développeur Web, vous devriez pratiquer une dégradation gracieuse - les formulaires devraient pouvoir être soumis et les données transférées, même lorsque JS est désactivé.
Enfin, les formulaires sont tous enregistrés correctement dans le DOM. Nous pouvons y jeter un œ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 sur 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: les éléments <input> 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 puis-je rendre ma vie plus difficile en évitant les formes?
Tout d'abord - des éléments de conteneur. Qui en a besoin, non?!
Certes, vos petits éléments <input> Et <button> Sont imbriqués à l'intérieur une sorte d'élément conteneur? Ils ne peuvent pas simplement flotter au milieu de tout le reste. Si ce n'est pas un <form>, Alors quoi? Un <div>? Un <span>?
Ces éléments ont pour résider quelque part, et à moins que votre balisage soit un bordel fou, l'élément conteneur peut simplement être une forme.
Non? Oh.
À ce stade, les voix dans ma tête sont très curieuses de savoir comment créer 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 pour 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, car nous avons établi qu'ils parcourent simplement le balisage, faisant tout ce qui est nécessaire.
Vous codez donc 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. '
D'accord, mais vous devez toujours créer ces ensembles d'éléments uniques, ou ensembles de classes cibles, non? Vous devez toujours groupe ces éléments en quelque sorte.
Prêtez-moi vos yeux (ou vos oreilles, si vous utilisez un lecteur d'écran et avez besoin d'aide - c'est une bonne chose que nous pourrions en ajouter ARIA à tout cela semantic balisage, non?), 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 commune, maintenir notre dégradation gracieuse et laisser le formulaire complètement décrire comment il 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 se soucie juste de ses propres choses, comme masquer les éléments appropriés ou gérer les réponses que nous obtenons.
Et maintenant vous dites:
'Mais j'encapsule mes pseudo-formulaires dans des éléments <div> Qui ont des ID spécifiques - je peux ensuite cibler les entrées de manière lâche avec avec .find, Et .serialize, et ... '
Oh, c'est quoi ça? Vous emballez réellement vos éléments <input> Dans un conteneur?
Alors pourquoi ce n'est pas encore un formulaire?
Les balises de formulaire sont toujours nécessaires si vous voulez pouvoir soumettre le formulaire sans AJAX (ce qui peut être utile dans les premiers stades de développement). Mais même s'il est possible d'utiliser javascript pour soumettre des données sans balise de formulaire, quelques avantages viennent encore à l'esprit:
- L'utilisation de balises de formulaire peut aider les gens à lire et à comprendre votre code dans certains cas, en leur montrant vos intentions.
- La méthode "soumettre" est disponible sur les formulaires. Si vous avez un formulaire avec une entrée [type = soumettre], et qu'il n'est pas désactivé, alors quand quelqu'un frappe "entrer" tout en remplissant l'une des autres entrées du formulaire, le formulaire sera soumis. Vous pouvez toujours le faire en écoutant l'événement `` keydown '' sur les éléments d'entrée, mais c'est une belle interface utilisateur que vous obtenez gratuitement avec des balises de formulaire.
- Il y a quelques autres choses qui ne fonctionnent qu'avec une balise de formulaire, ou sont plus faciles avec une balise de formulaire. Les développeurs finiront par se heurter à ces cas, et décideront qu'il est plus facile de les utiliser partout et d'éviter les problèmes. Vraiment, la vraie question est, pourquoi pas utiliser une balise de formulaire?
L'élément HTML représente une section de document qui contient des contrôles interactifs pour soumettre des informations à un serveur Web.
Nous connaissons tous les formulaires sur les pages Web html. Pour de nombreuses raisons différentes, des personnes ou des entreprises demandent nos adresses e-mail, noms et URL de sites. L'achat de produits sur Internet aujourd'hui est principalement un jeu d'enfant et avec l'avènement des dispositifs de sécurité, la méthode utilisée pour soumettre vos coordonnées et l'argent durement gagné est généralement effectuée via des formulaires.
plus d'informations