comment combiner les formes html
-
27-09-2019 - |
Question
Comment puis-je combiné 2 formulaires html
Je suis en train de combiné à des formes qui sont en position. donc je peux afficher toutes les données à la fois.
Voici un exemple
<form action="actions.php">
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
</form>
<form>
<input type="text">
<input type="text">
</form>
La solution
Ne pas faire 2 formes. Utilisez des éléments HTML et CSS appropriés pour la mise en page. Ne hésitez pas à utiliser javascript pour animer et ajouter des effets au besoin.
Par des éléments appropriés Je veux dire que vous pourriez faire quelque chose comme:
<form action="actions.php">
<fieldset id="personalInfo">
<legend>Personal Information:</legend>
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" name="button" id="button" value="submit" />
</fieldset>
<fieldset id="addressInfo">
<legend>Address information:</legend>
<input type="text" name="field3" />
<input type="text" name="field4" />
</fieldset>
</form>
Et utiliser les CSS pour les placer.
#personalInfo {position: relative; top: 0px}
#addressInfo {position: relative; top: 200px;}
Bien sûr, adapter l'exemple à vos besoins.
Autres conseils
Vous pouvez ajouter des champs cachés dans la deuxième forme et remplir ces champs (en utilisant un script java) avec les premières valeurs de forme avant la soumission.
Si je ne me trompe pas, vous pouvez mettre des choses entre les entrées dans une balise
<form action="actions.php">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
</form>
Maintenant, ils sont combinés.
Je ne sais pas votre besoin réel, mais il est conseillé pratique et standard (comme ce que je sais) d'avoir une forme et mettre les éléments dans ce .. peut être la position dans les div / table / etc Ensuite, css en utilisant javascript vous pouvez obtenir les valeurs de contrôle. par exemple:
document.getElementById("controlid").value
ou
document.forms[0].Element[0].value
document.forms[1].Element[0].value
espère que cela donnera une idée
Il suffit d'utiliser une seule balise form
:
<form action="actions.php">
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
<input type="text">
<input type="text">
</form>
Toutes les données du formulaire sera soumis à un appel (comme vous l'indiquez est ce que vous voulez dans un de vos commentaires) à actions.php
.
Notez que cette forme (et ceux que vous avez posté votre question) ne sont pas très utiles sans aucun ID sur l'un des éléments d'entrée, que vous trouverez qu'il est difficile de dire les valeurs en dehors sans.
En ce qui concerne la façon dont le look forme -. Vous devez utiliser le style CSS pour et positionner les différents éléments
Pour être utile, vos balises d'entrée ont besoin des attributs de nom.
Utilisez divisions et CSS, comme ceci:
<style>
.part1 {float: left}
.part2 {float: right}
</style>
<form action="actions.php">
<div class="part1">
<input name="input1" type="text">
<input name="input2" type="text">
<input type="submit" name="button" id="button" value="submit" />
</div>
<div class="part2">
<input name="input3" type="text">
<input name="input4" type="text">
</div>
</form>
CSS peut être utilisé pour positionner chaque partie de votre formulaire.
Une autre option serait d'utiliser javascript, comme ceci:
<form name="form1" action="actions.php">
<input name="input1" type="text">
<input name="input2" type="text">
<input name="input3" type="hidden">
<input name="input4" type="hidden">
<input type="submit" name="button" id="button" value="submit" />
<form name="form2">
<input onBlur="document.form1.input3.value = this.value" name="input3" type="text">
<input onBlur="document.form1.input4.value = this.value" name="input4" type="text">
</form>
L'inverse peut également être fait:
<form onSubmit="this.input3.value = document.form2.input3.value; this.input4.value = document.form2.input4.value;" name="form1" action="actions.php">
<input name="input1" type="text">
<input name="input2" type="text">
<input name="input3" type="hidden">
<input name="input4" type="hidden">
<input type="submit" name="button" id="button" value="submit" />
<form name="form2">
<input name="input3" type="text">
<input name="input4" type="text">
</form>
Je sais à quel âge cette question est, mais voici la réponse de toute façon, en utilisant l'attribut formulaire HTML5. (un attribut pas une balise.)
Il suffit de faire une id pour votre formulaire principal (à savoir id = « principale forme »)
Et dans vos autres entrées (sans utiliser une autre balise form) mettre le nouvel attribut formulaire HTML5 (un attribut pas une balise) avec une valeur de votre principal id du formulaire (par exemple sous forme = « principale forme ») .
* Toutefois, il est pas pris en charge dans IE
<form action="actions.php" id="main-form>
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
</form>
<input type="text" form="main-form">
<input type="text" form="main-form">
Avec javascript vous pouvez saisir tous les éléments de forme et de les combiner dans la même forme et les soumettre en même temps. Est-ce le genre de ce que vous cherchez?
HTML vous permet d'avoir un autre texte et des balises à l'intérieur d'une forme. Il suffit de faire ceci:
<form action="actions.php">
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
<input type="text">
<input type="text">
</form>