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 |