Comment ouvrir un formulaire HTML dans une nouvelle page ?

Réponses rédigées par Antoine
Dernière mise à jour : 2018-11-12 15:46:49
Thèmes : webmaster - html - javascript
Question

J'ai un formulaire HTML de la forme suivante :

<form action="page.php" method="get">
Nom: <input type="text" name="nom">
<input type="submit" value="Submit">
</form>

Comment faire pour ouvrir le résultat du formulaire html dans une nouvelle page ou un nouvel onglet ?

Réponse

Pour que le résultat d'un formulaire HTML s'ouvre dans un nouvel onglet, il faut utiliser l’attribut TARGET :

<form action="page.php" method="get" target="_blank">
Nom: <input type="text" name="nom">
<input type="submit" value="Submit">
</form>

Voici la liste des paramètres de l'attribut TARGET :

  • _blank : Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet.
  • _self : Ouvre le document dans le même cadre que celui sur lequel vous avez cliqué.
  • _parent : Ouvre le document dans le cadre parent lorsque vous utilisez des frames.
  • _top : Ouvre le document dans le corps de la fenêtre lorsque vous utilisez des frames.
  • framename : Ouvre le document dans un cadre et la frame dont vous devez spécifier le nom.
Réponse

Si vous voulez ouvrir la page dans une nouvelle fenêtre et non pas dans un nouvel onglet, vous ne pouvez pas utiliser l'attribut TARGET, il est tributaire de la configuration du navigateur de l'internaute, et la page s'ouvrira soit dans un nouvel onglet, soit dans une nouvelle fenêtre.

Si vous voulez forcer l'ouverture dans une nouvelle fenêtre vous devez utiliser JavaScript :

<html>
<head>
<meta charset="utf-8">
</head>
<body>

Nom: <input type="text" id="nom" value="">
<input type="button" onClick="nouvelle_fenetre();" value="Envoyer">

<script>
function nouvelle_fenetre(){
var nom = document.getElementById("nom").value;
window.open('https://www.exemple.com/exemple.php?nom=' + nom);
}
</script>

</body>
</html>

La fonction "nouvelle_fenetre" récupère la valeur du champ INPUT type TEXT avec la méthode document.getElementById, puis on utilise la fonction window.open pour rediriger vers la page cible.

Remarque : N'oubliez pas qu'un ID doit être unique. Vous ne devez pas avoir deux éléments ou plus avec le même ID.