Gestion de deux formulaires dans une page Web

Question

J'ai une page Web avec une zone div. Dans ce domaine, il peut y avoir deux formes différentes. Il ressemble à ceci:

Formule 1:

<div id="data" ...> 
    <form action="/action1" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Name</label> 
     <input type="text" name="name" id="label2" value="" /> 
     <label for="label3">Description</label> 
     <input type="text" name="desc" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
    </form> 
</div> 

Formule 2:

<div id="data" ...> 
    <form action="/action2" method="post"> 
     <label for="label1">ID</label> 
     <input type="text" name="id" id="label1" value="" /> 
     <label for="label2">Firstname</label> 
     <input type="text" name="first" id="label2" value="" /> 
     <label for="label3">Lastname</label> 
     <input type="text" name="last" id="label3" value="" /> 
     <label for="label4">Address</label> 
     <input type="text" name="address" id="label4" value="" /> 
     <label for="label5">eMail</label> 
     <input type="text" name="mail" id="label5" value="" /> 
    </form> 
</div> 

Donc il y a deux formes différentes. Les valeurs seront définies avec jQuery (appel Ajax au backend).

Quelle est la meilleure façon de gérer ces deux formes? Dois-je créer deux fichiers avec seulement le formulaire et charger le formulaire quand ils sont nécessaires? (Le formulaire 1 est nécessaire si certains clics sur le bouton 1, le formulaire 2 est nécessaire si quelqu'un clique sur le bouton 2 - les événements sont gérés sur le côté client). Ou devrais-je placer les deux formulaires dans le fichier HTML unique et activer ou désactiver le formulaire?

Answer 1

Rien ne vous empêche d'avoir les deux formes dans le HTML et de masquer/afficher conditionnellement celui que vous voulez actif. Le mieux est de donner à chaque formulaire (ou à son contenu div) un identifiant unique, et de l'utiliser pour afficher/masquer en utilisant jQuery.

Answer 2

Je pense que vous devriez conserver les deux formulaires dans la même page. Et montrer/cacher le formulaire requis selon l'exigence. Parce que si vous conservez les formulaires dans des fichiers HTML séparés et que l'utilisateur clique sur n'importe quel bouton, vous devrez créer un XMLHttpRequest pour obtenir le code HTML du formulaire, alors que vous pouvez facilement éviter cette requête HTML supplémentaire en incluant le HTML du formulaire dans la même page.

Je ne sais pas si votre audience de site Web est si grande ou non. Mais enregistrer un seul HttpRequest devrait être très utile.

Voir l'article Minimize HTTP Requests by Yahoo developers. Ils suggèrent clairement de minimiser les requêtes HTTP.