Bonjour,
Je souhaiterais intégrer tout le code d'un formulaire au milieu d'une page html en appuyant sur un bouton de la barre de navigation mais je ne sais pas comment faire (utiliser du js, jQuery…?)
Aidez moi svp…
Merci d'avance
Bonjour,
Je souhaiterais intégrer tout le code d'un formulaire au milieu d'une page html en appuyant sur un bouton de la barre de navigation mais je ne sais pas comment faire (utiliser du js, jQuery…?)
Aidez moi svp…
Merci d'avance
Bonjour,
Tu peux le faire en js ou jQuery, comme tu veux.
un ex avec js
ton button (tu le mets ou tu veux)
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part <button onclick="myFunction()">Click Me</button>
ta fonction ds ton script js
et ta div contenant ton formulaire, se trouvant la ou tu veux qu'il apparaisse
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <div id="myDIV"> <form> Ton formulaire </form> </div>
voici le lien d’où je sorts çà https://www.w3schools.com/howto/howt..._hide_show.asp
Bon, l’inconvénient avec ce script est que tu risques d'avoir un blancs, a l'emplacement de la div que tu masques..... Si c'est le cas, il faut coder (en js, avec des .createElement(), .appendChild(), etc.) ton formulaire dans ta fonction, et laisser ta <div id="myDIV"> vide.
Salut,
Voici un code qui fonctionne, ton formulaire apparait et disparait lorsque tu click le bouton. Mets le bouton ou tu veux ca fonctionnera pareil.
fichier html:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <!DOCTYPE html> <html> <head> <title>Contact Form using JavaScript</title> <!-- Include CSS file here --> <link href="form.css" rel="stylesheet"> <script src="form.js"></script> </head> <body> <div id="main"> <h1>Contact Form using JavaScript</h1> <button style="background-Color: green ;" onclick="showForm()">Formulaire</button> <div id="form_sample"></div><!--Include JS file here --> </div> </body> </html>
le fichier js:
et t'as meme le css (magnifique non !!!):
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 let clicks = 0; function showForm() { clicks += 1; if (clicks < 2) { // Fetching HTML Elements in Variables by ID. var x = document.getElementById("form_sample"); var createform = document.createElement('form'); // Create New Element Form createform.setAttribute("action", ""); // Setting Action Attribute on Form createform.setAttribute("method", "post"); // Setting Method Attribute on Form createform.setAttribute("id", "toRemove"); x.appendChild(createform).style.visibility = status; var heading = document.createElement('h2'); // Heading of Form heading.innerHTML = "Contact Form "; createform.appendChild(heading); var line = document.createElement('hr'); // Giving Horizontal Row After Heading createform.appendChild(line); var linebreak = document.createElement('br'); createform.appendChild(linebreak); var namelabel = document.createElement('label'); // Create Label for Name Field namelabel.innerHTML = "Your Name : "; // Set Field Labels createform.appendChild(namelabel); var inputelement = document.createElement('input'); // Create Input Field for Name inputelement.setAttribute("type", "text"); inputelement.setAttribute("name", "dname"); createform.appendChild(inputelement); var linebreak = document.createElement('br'); createform.appendChild(linebreak); var emaillabel = document.createElement('label'); // Create Label for E-mail Field emaillabel.innerHTML = "Your Email : "; createform.appendChild(emaillabel); var emailelement = document.createElement('input'); // Create Input Field for E-mail emailelement.setAttribute("type", "text"); emailelement.setAttribute("name", "demail"); createform.appendChild(emailelement); var emailbreak = document.createElement('br'); createform.appendChild(emailbreak); var messagelabel = document.createElement('label'); // Append Textarea messagelabel.innerHTML = "Your Message : "; createform.appendChild(messagelabel); var texareaelement = document.createElement('textarea'); texareaelement.setAttribute("name", "dmessage"); createform.appendChild(texareaelement); var messagebreak = document.createElement('br'); createform.appendChild(messagebreak); var submitelement = document.createElement('input'); // Append Submit Button submitelement.setAttribute("type", "submit"); submitelement.setAttribute("name", "dsubmit"); submitelement.setAttribute("value", "Submit"); createform.appendChild(submitelement); } else { var x = document.getElementById("toRemove").remove(); clicks = 0; } }
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 /* Below line is write to use Google font online */ @import "http://fonts.googleapis.com/css?family=Ubuntu"; div#main{ width:830px; height:650px; margin:0 auto; font-family:'Ubuntu',sans-serif } div#form_sample{ text-align:center; width:300px; padding:0 50px 15px; margin-top:20px; float:left } #main h1{ margin-top:40px } hr{ margin-top:-5px } label{ float:left; font-size:16px } input[type="text"]{ width:100%; margin-top:10px; height:35px; margin-bottom:25px; padding:10px; border:3px solid #2BC1F2 } textarea{ width:100%; border:3px solid #2BC1F2; padding:10px; margin-bottom:25px; margin-top:10px; height:100px; resize:none } input[type="submit"]{ width:100%; padding:10px 45px; background-color:#2BC1F2; border:none; color:#fff; font-size:18px; font-weight:700; cursor:pointer; font-family:'Ubuntu',sans-serif } /* ------------------------------------- CSS for Sidebar (optional) ---------------------------------------- */ div#fugo{ float:right }
le lien d'origine (j'ai évidemment modifie 2-3 détails). https://www.formget.com/javascript-contact-form/
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager