Halo, jumpa lagi dengan saya 🙂 , tidak akan bosan-bosan nya saya akan berbagi tutorial buat kalian, kali ini saya akan berbagi tutorial mengenai Cara Membuat Form Dengan Javascript, kalo kalian sering membuat form dengan HTML dan CSS sudah biasa, tidak ada salah nya untuk mencoba membuat form dengan Javascript, berikut langkah-langkahnya.
Silahkan kalian buka teks editornya, kemudian ketikan kode HTML berikut.
1
2
3
4
<div id="main">
<h2>Form Dengan Javascript</h2>
<div id="form_sample">
</div>
Kalo sudah, sekarang kita buat bentuk form dengan Javascript berikut ini.
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
//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
x.appendChild(createform);
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 email field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);
var emailelement = document.createElement('input'); // Create input field for email
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);
var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);
// Append Textarea
var messagelabel = document.createElement('label');
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);
// Append Submit Button
var submitelement = document.createElement('input');
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);
Setelah itu, kita sedikit percantik tampilan nya dengan kode CSS3 berikut ini.
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
/* below line is write to use google font online */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
div#main{
width: 830px;
height: 650px;
margin: 0px auto;
font-family: 'Ubuntu', sans-serif;
}
div#form_sample{
text-align:center;
border: 1px solid #ccc;
width: 300px;
padding: 0px 50px 15px;
margin-top:20px;
box-shadow: 0 0 15px;
border-radius: 6px;
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: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
}
Nah, kalo sudah semua, simpan terlebih dahulu, kemudian jalankan di browser masing-masing, dan lihat hasilnya. Selesai
Baik, selesai sudah tutorial mengenai Cara Membuat Form Dengan Javascript, semoga bermanfaat. Selamat mencoba