Question 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 de formulaire. Il semble presque superflu d'envelopper les intrants.

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 envelopper 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 le bénéfice ou le besoin. Peut-être que je manque quelque chose.


36
2018-06-26 06:49


origine


Réponses:


Ce qui vous manque, c'est une compréhension de balisage sémantiqueet le DOM.

En réalité, vous pouvez pratiquement faire ce que vous voulez avec le balisage HTML5, et la plupart des navigateurs vont l’analyser. La dernière fois que j'ai vérifié, WebKit / Blink permet même pseudo-éléments à l'intérieur <input> éléments, qui est une violation claire 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 <input> éléments à l'intérieur de <form> éléments? Pour la même raison, nous mettons <li> tags à l'intérieur de <ul> et <ol> éléments - c'est où ils appartiennent. Ses sémantiquement correct, et aide à définir le balisage. Les analyseurs, les lecteurs d’écran et divers logiciels peuvent mieux comprendre votre balisage quand 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 method et action attributs, 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 progressive - 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 enregistrés correctement dans le DOM. Nous pouvons jeter un coup d'oeil 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 - toutes les formes appropriées. Cette interface peut être utile pour accéder aux informations et interagir avec ces éléments. Par exemple, les formulaires peuvent être sérialisé très facilement.

Voici quelques documents de lecture:

Remarque: <input> Les éléments peuvent être utilisés en dehors des formulaires, mais si vous souhaitez 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 est-ce que je rends ma vie plus difficile en évitant les formes?

D'abord et avant tout - des éléments de conteneur. Qui en a besoin?

Certainement ton petit <input> et <button> les éléments sont imbriqués à l'intérieur une sorte de conteneur? Ils ne peuvent pas simplement circuler au milieu de tout le reste. Donc, sinon un <form>alors quoi? UNE <div>? UNE <span>?

Ces éléments avoir pour résider quelque part, et à moins que votre balisage ne soit un gâchis fou, l'élément conteneur ne peut être qu'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 avoir beaucoup, si vous devez réduire votre balisage pour économiser des octets. Vous devez ensuite créer des fonctions personnalisées pour chaque événement AJAX correspondant à chaque «ensemble» d'éléments - que vous devez cibler individuellement ou avec des classes, n'est-ce pas? Il n’ya aucun moyen de regrouper ces éléments de façon générique, car nous avons établi qu’ils se promenaient simplement dans le balisage, en faisant tout ce qui était nécessaire jusqu’à ce qu’ils soient nécessaires.

Donc, vous avez personnalisé quelques gestionnaires de code.

$('#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 totalement des fonctions réutilisables. Arrête d'exagérer.

Assez bien, mais vous devez quand même créer ces ensembles d'éléments uniques ou ensembles de classes cibles, n'est-ce pas? Vous devez encore groupe ces éléments en quelque sorte.

Prête-moi tes yeux (ou tes oreilles, si tu utilises un lecteur d’écran et que tu as besoin d’aide) ARIA à tout ça sémantique balisage, non?), et voyez le pouvoir 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 utiliser ceci avec n'importe quelle forme commune, maintenir notre dégradation gracieuse et laisser la forme complètement décrire comment il devrait fonctionner. Nous pouvons développer cette fonctionnalité de base tout en gardant une générique style - plus modulaire, moins de maux de tête. Le JavaScript se soucie simplement de ses propres choses, comme de cacher les éléments appropriés ou de gérer les réponses que nous recevons.

Et maintenant vous dites:

«Mais j'emballe mes pseudo-formes <div> éléments qui ont des identifiants spécifiques - je peux alors cibler les entrées avec .find, et .serialize eux et ...'

Oh, qu'est-ce que c'est? Vous enroulez réellement votre <input> éléments dans un conteneur?

Alors, pourquoi n'est-ce pas encore une forme?


25
2018-06-26 07:04



Les balises de formulaire sont toujours nécessaires si vous souhaitez pouvoir soumettre le formulaire sans AJAX (ce qui peut être utile au début du développement). Mais même s’il est possible d’utiliser javascript pour envoyer des données sans balise de formulaire, quelques avantages viennent à l’esprit:

  1. L'utilisation de balises de formulaire peut aider les utilisateurs à lire et à comprendre votre code dans certains cas, en leur montrant vos intentions.
  2. La méthode de soumission est disponible sur les formulaires. Si vous avez un formulaire avec une entrée [type = submit], et qu'il n'est pas désactivé, alors, quand quelqu'un clique sur «entrer» en remplissant l'une des autres entrées du formulaire, le formulaire se soumet. 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 les balises de formulaire.
  3. Il y a quelques autres choses qui fonctionnent uniquement 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 simple de toujours les utiliser partout et d'éviter les problèmes. Vraiment, la vraie question est, pourquoi ne pas utiliser une balise de formulaire?

1
2018-06-26 07:09



L'élément HTML représente une section de document contenant des contrôles interactifs pour soumettre des informations à un serveur Web.

Nous connaissons tous les formulaires sur les pages Web HTML. Pour différentes raisons, des personnes ou des entreprises demandent nos adresses e-mail, noms et URL de site. L'achat de produits sur Internet est aujourd'hui un jeu d'enfant et avec l'avènement des dispositifs de sécurité, la méthode utilisée pour soumettre vos données et votre argent durement gagné est généralement effectuée via des formulaires.

Plus d'informations

lien un 

lien deux


0
2018-06-26 06:54