Tutorial Pemrograman

Cara Membuat Contact Form Sederhana dengan Javascript

Seringkali, pembuatan Form dikaitkan dengan bahasa pemrograman HTML, dikarenakan HTML telah menyediakan template untuk pembuatan form. Seiring dengan perkembangannya, pembuatan form tidak selalu harus melalui HTML. Bahasa pemrograman seperti Javascript, jQuery maupun React mempermudah pengguna dalam pembuatan form secara dinamis yang nantinya akan terintegrasi dengan HTML.

Pada artikel kali ini, kita akan membuat contact form menggunakan metode penambahan element di Javascript.

Langkah:

1. Terlebih dahulu, buatlah file yang bernama index.html dengan konten file sebagai berikut:

2. Lalu, buatlah file yang bernama script.js dengan konten file sebagai berikut:

Pada kode Javascript di atas, kita menginisialisasi serta membuat konten yang diperlukan pada form kita. Adapun perintah yang digunakan pada Javascript ialah sebagai berikut:

  • getElementById : Ambil (serta tambahkan) informasi yang terdapat pada nama id terkait, yang ada pada HTML.
  • createElement : Buat obyek yang nantinya akan ditampilkan pada HTML (obyek harus merupakan perintah HTML).
  • setAttribute : atur konten yang akan ditampilkan pada HTML (menyesuaikan dengan jenis obyek yang di panggil).
  • appendChild : tambahkan hasil konten menuju obyek (yang nantinya akan di tampilkan pada HTML).

3. Setelah itu, buatlah file yang bernama style.css dengan konten file sebagai berikut:

Penggunaan CSS di maksudkan agar tampilan form menjadi lebih menarik serta mudah untuk di gunakan oleh pengguna. Sesuaikan tampilan form dengan keinginan kamu.

4. Simpan file yang telah dibuat, lalu jalankan file tersebut melalui browser. Jika berhasil, nantinya akan muncul form dengan kolom informasi yang dapat kita isi sesuai dengan kebutuhannya.

Demikian tutorial cara membuat Contact Form sederhana dengan Javascript. Semoga bermanfaat.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top