Comment créer un formulaire en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-05-16 12:00:12
Thèmes : javascript - formulaire
Question

Comment faire pour créer un formulaire en JavaScript ?

Réponse

Pour concevoir un formulaire en JavaScript, vous pouvez utiliser la méthode document.createElement() et l'élément setAttribute() pour créer les différents éléments HTML du formulaire, puis les méthodes Node.appendChild() et Node.cloneNode() pour la mise en forme du formulaire.

Voici un exemple pour créer un formulaire HTML avec JavaScript :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment créer un formulaire en JavaScript ?</title>
</head>  
<body>
<div id="formulaire"></div>
<script>
// Saut de ligne
var br = document.createElement("br");
// Balise Form
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "exemple.php");
// Champ nom
var champ_nom = document.createElement("input");
champ_nom.setAttribute("type", "text");
champ_nom.setAttribute("name", "nom");
champ_nom.setAttribute("placeholder", "Votre nom de famille");
// Champ prénom
var champ_prenom = document.createElement("input");
champ_prenom.setAttribute("type", "text");
champ_prenom.setAttribute("name", "prenom");
champ_prenom.setAttribute("placeholder", "Votre prénom");
// Champ mail
var champ_mail = document.createElement("input");
champ_mail.setAttribute("type", "email");
champ_mail.setAttribute("name", "email");
champ_mail.setAttribute("placeholder", "Votre adresse email");
// Champs mot de passe
var champ_mdp1 = document.createElement("input");
champ_mdp1.setAttribute("type", "password");
champ_mdp1.setAttribute("name", "mdp1");
champ_mdp1.setAttribute("placeholder", "Choisissez un mot de passe");
var champ_mdp2 = document.createElement("input");
champ_mdp2.setAttribute("type", "password");
champ_mdp2.setAttribute("name", "mdp2");
champ_mdp2.setAttribute("placeholder", "Saisissez de nouveau votre mot de passe");
// Bouton
var bouton = document.createElement("input");
bouton.setAttribute("type", "submit");
bouton.setAttribute("value", "Envoyer");
// Mise en forme du formulaire
form.appendChild(champ_nom);
form.appendChild(br.cloneNode());
form.appendChild(champ_prenom);
form.appendChild(br.cloneNode());
form.appendChild(champ_mail);
form.appendChild(br.cloneNode());
form.appendChild(champ_mdp1);
form.appendChild(br.cloneNode());
form.appendChild(champ_mdp2);
form.appendChild(br.cloneNode());
form.appendChild(bouton);
document.getElementById("formulaire").appendChild(form);
</script>
</body>
</html>