-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTMLform.js
81 lines (54 loc) · 2.44 KB
/
HTMLform.js
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
72
73
74
75
76
77
78
79
80
81
let heading = document.createElement('div');
heading.setAttribute('class','container');
document.body.appendChild(heading);
let h2 = document.createElement('h2');
h2.textContent="HTML FORM";
h2.setAttribute('class','h2');
heading.appendChild(h2);
let form = document.createElement('form');
let userInput = document.createElement('div');
let nameDiv = document.createElement('div');
nameDiv.setAttribute('class','mb-3');
let labelName = document.createElement('label');
labelName.setAttribute('class','col-sm col-form-label text-bg-secondary p-3');
labelName.textContent="Name";
let inputName1 = document.createElement('input');
inputName1.setAttribute('class','form-control');
inputName1.setAttribute('type', 'text');
inputName1.setAttribute('placeholder','First Name');
let inputName2 = document.createElement('input');
inputName2.setAttribute('class','form-control');
inputName2.setAttribute('type', 'text');
inputName2.setAttribute('placeholder','Last Name');
nameDiv.append(labelName,inputName1,inputName2);
let mailDiv = document.createElement('div');
mailDiv.setAttribute('class', 'mb-3');
let labelMail = document.createElement('label');
labelMail.setAttribute('class','form-label text-bg-secondary p-3');
labelMail.textContent="Mail";
let inputMail = document.createElement('input');
inputMail.setAttribute('class','form-control');
inputMail.setAttribute('type', 'mail');
inputMail.setAttribute('placeholder','Your Mail Id');
mailDiv.append(labelMail,inputMail);
let genderDiv = document.createElement('div');
genderDiv.setAttribute('class', 'mb-3');
let labelGender = document.createElement('label');
labelGender.setAttribute('class','form-label text-bg-secondary p-3');
labelMail.textContent="Gender";
let inputGender1 = document.createElement('input');
inputGender1.setAttribute('class','form-check-input');
inputGender1.setAttribute('class','form-check-label');
inputGender1.setAttribute('type', 'radio');
inputGender1.setAttribute('value','Male');
inputGender1.setAttribute('name','radioButton');
let inputGender2 = document.createElement('input');
inputGender2.setAttribute('class','form-check-input');
inputGender2.setAttribute('class','form-check-label');
inputGender2.setAttribute('type', 'radio');
inputGender2.setAttribute('value','Female');
inputGender2.setAttribute('name','radioButton');
genderDiv.append(labelGender,inputGender1,inputGender2);
userInput.append(nameDiv,mailDiv,genderDiv);
form.appendChild(userInput);
heading.appendChild(form);