TUTORIAL MEMBUAT FORMULIR DATA DIRI DALAM BENTUK FORM HTML

     Disini saya akan memberikan tutorial membuat formulir data diri dalam bentuk form html. Selain membuat form html, saya juga menggunakan css untuk mempercantik tampilan formulir data diri tersebut. Hal pertama yang harus dilakukan yaitu kita harus mempunyai aplikasi untuk membuat html, seperti atom, bracket text, sublime text editor, notepadd ++ , visual studio editor, emacs, dll. Disini saya akan memberikan tutorial dengan aplikasi sublime text editor, mungkin tidak berbeda jauh kalau kalian menggunakan aplikasi yang berbeda. Langsung masuk saja ke langkah-langkah pembuatannya :

A. Pembuatan Form Html

1. Pertama, kita buat terlebih dahulu folder yang akan digunakan untuk menyimpan file html kita. Kalian bebas mau mebuat folder dimana saja. Bisa di bagian data komputer atau langsung pada dekstop komputer. Berikan nama pada folder kalian sesuai nama form yang akan kalian buat.

2. Setelah membuat folder, kemudian buka aplikasi html nya. Disini saya menggunakan sublime text editor. Pada laman utama sudah terlihat seperti sheet kosong. Lalu kalian buka folder kalian dan tarik masuk ke bagian aplikasinya. Lalu klik kanan pada folder yang ada pada aplikasi dan pilih new file, lalu simpan file html kalian dengan tekan ctrl+s, dan beri nama file kalian sesuai dengan judul form yang kalian buat dan ditambah (.html) dibelakangnya. Seperti contoh, (formulir data diri.html), lalu klik save.  

                                                                                                                                                                                                          3. Ketik html pada keyboard lalu klik tab, dan akan muncul struktur html lengkap secara otomatis.    

       

    

                                                                                                                                                                                                             4.  Ketikan judul laman kalian pada bagian title. Setelah itu untuk melihat tampilan browsernya, tekan ctrl+s dan klik kanan pada laman kosong lalu pilih open in browser. Maka akan muncul judul form kalian pada bagian sheet laman atas browser kalian.

         

    5. Selanjutnya untuk membuat judul pada halaman browser kita, bisa ketik dengan tag <h1></h1> kemudian tambahkan judul form kalian pada bagian tengahnya. Kemudian pada bagian bawah tambahkan tag <form action=” ”   methods=” “></form>. Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan dan atribut yang kedua berupa method. Method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. Nilai dari method ini biasanya get atau post.

  

    6. Setelah itu, ditengah tag form tadi, kita tambahkan tag <table></table>. Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.

      7. Kemudian di dalam tabel, kita isi poin-poin atau data diri apa saja yang akan ditampilkan pada formulir data diri tersebut. Disini kita mulai dengan data diri berupa “Nama Lengkap”. Ketikan nama lengkap pada bagian tengah tag <td></td>. Dibawahnya kita ketik tanda baca titik dua (:) agar terlihat lebih rapi. Lalu untuk membuat kolom jawaban yang bisa diisi oleh pengguna untuk memasukan nama lengkapnya kita menggunakan tag input. Tag input merupakan tag yang digunakan dalam form pengisian. Tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai dengan tombol submit berada dalam tag <input>. Pada pengisian nama lengkap ini kita menggunakan tag input jenis teks atau text. Form ini bersifat menerima inputan text misalkan: username, nama, tempat lahir atau berupa inputan text yang pendek. Sehingga pengetikannya seperti ini <input type="text" name="nama lengkap">. Setelah itu untuk melihat tampilan pada  browser kita, tekan ctrl+s dan pindah ke laman browser kita lalu di refresh. Maka akan terlihat form pengisian nama lengkap yang sudah kita buat sebelumnya.

 

     8. Selanjutnya informasi data diri yang kedua yaitu “Tempat Lahir”. Kita buat baris baru terlebih dahulu dengan tag <tr></tr> lalu ulangi langkah pada form Nama Lengkap sebelumnya, hanya diganti nama data diri nya menjadi Tempat Lahir. Lalu lihat tampilan pada browser dengan cara yang sama seperti sebelumnya.

    

        

  

     9. Informasi data diri selanjutnya yaitu “Tanggal Lahir”. Pada form pengisian tanggal lahir, tag input yang kita gunakan berbeda dengan sebelumnya. Kali ini kita menggunakan tag input jenis date atau tanggal. Inputan date ini memungkin para pengisi dapat dengan mudah mengisi tanggal lahir karena form pengisian nanti akan menampilkan berupa kalender tanggal yang bisa langsung di klik sesuai dengan tanggal lahir pengisi tersebut. Jadi nanti tagnya seperti ini, <td><input type=”date” name=”tanggal lahir”></td>.

 

     10. Berikutnya informasi data berupa “Jenis Kelamin”. Untuk pengisian form jenis kelamin hanya ada dua pilihan yaitu laki-laki dan perempuan. Langkahnya sama  seperti sebelumnya, tetapi kita menggunakan tag input jenis radio. Inputan ini berupa radio grup, dimana pengisi dapat memilih salah satu dari pilihan yang disediakan dengan menggunakan form radio. Contohnya adalah form pemilihan jenis kelamin. Jadi nanti penulisan tagnya seperti ini,                                                               <input type= "radio" name="jk" value="laki-laki">Laki-laki                                                                                               <input type="radio" name="jk" value="perempuan">Perempuan

 

     11. Selanjutnya untuk data diri berupa “Agama” dan “Pekerjaan” langkahnya sama seperti data diri “Nama Lengkap” di awal, tinggal mengganti penulisan nama formnya saja.

 

     12. Pada bagian data diri berupa “Alamat” langkahnya sama seperti langkah sebelumnya, tetapi karena biasanya alamat sesorang lumayan panjang, maka kita menggunakan tag yang berbeda kali ini. Tag ini bernama tag textarea. Tag <textarea> adalah tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contohnya untuk pengisian alamat lengkap. Jadi nanti penulisan tagnya seperti ini,                <td><textarea name="alamat"></textarea></td>  

 

      13. Informasi data diri berikutnya yaitu, “No Telepon”, karena no telepon berupa angka semua, jadi kali ini kita menggunakan jenis input yang berbeda yaitu input number atau nomor. Sehingga pengisi hanya bisa memasukan nomor ke form pengisian tersebut, tidak bisa huruf atau tanda baca apapun. Jadi nanti penulisan tag nya seperti ini, <td><input type="number" name="no telepon"></td>

 

     14. Informasi data diri berikutnya yaitu, “E-mail”, “Facebook”, “Instagram”. Ketiga data diri tersebut langkah pembuatannya sama dengan pembuatan data diri “Nama Lengkap” dia awal formulir. Jadi tinggal ulangi langkah data diri Nama Lengkap, lalu ganti penulisan nama form pengisiannya. 

 

   15. Informasi data diri yang terakhir yaitu “kewarganegaraan”. Dimana pengisi bisa berasal dari kewarganegaraan apapun. Pada penulisan form html kali ini kita menggunakan tag select. Tag <select> merupakan tag yang digunakan pengisi untuk memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk membuat beberapa pilihan. Disini saya menggunakan pilihan negara.

 

 

     16. Bagian terakhir dari formulir data diri ini yaitu tombol kirim untuk mengirimkan jawaban pengisi formulir data diri. Disini kita menggunakan tag button <button></button>. Dimana tag button ini digunakan untuk mengklik atau mengirim file data diri pengisi. Biasanya di sebelah tombol kirim terdapat tombol lain yang bertuliskan kembali atau batal.

    17. Untuk hasil akhir pembuatan form html, sebagai berikut :

B. Pembuatan  CSS

Setelah kita membuat form html sebelumnya, selanjutnya kita akan menghiasi atau mempercantik tampilan form html kita dengan menggunakan css. Langsung masuk saja ke langkah-langkah pembuatannya :

     1. Langkah pertama yaitu klik kanan pada folder yang sudah kita buat dalam aplikasi html, disini saya menggunakan sublime text editor. Setelah klik kanan, lalu pilih new file. Lalu akan muncul sheet ke dua pada laman aplikasi tersebut. Langsung simpan dan beri nama file baru tersebut. Untuk menyimpan file baru caranya yaitu tekan ctrl+s. Kalian bebas memberi nama filenya apa saja, dan jangan lupa di belakang nama file ditambah (.css), seperti contoh (style.css) lalu klik save. Maka sheet baru akan berubah sesuai nama yang kalian simpan tadi. 

   2. Langkah kedua yaitu menghubungkan file form html kita dengan file css nya. Dengan cara menambahkan link pada form html kita yang mengarah pada file css kita. Jadi untuk penulisan tag link nya nanti bagian href diberi nama file css yang sudah kita buat tadi. Penulisan seperti ini <link rel="stylesheet" type="text/css" href="style.css">. Setelah file html dan css kita terhubung, maka kita baru bisa mengedit css untuk html kita. 

   3. Ada banyak sekali tag dalam css untuk mempercantik tampilan html. Yang pertama kita akan mengubah warna background dari laman browser kita. Caranya ketikan pada file css tag body{}. Setelah itu di dalam kurung kurawa masukan type background, setelah itu tambahkan atribut lainnya di sebelah tulisan background, yaitu linear-gradient (to right) lalu tambahkan warna sesuai keinginan kita. Disini saya mengambil warna dengan kode warna tertentu dari Wikipedia Daftar Warna. Kode warna tersebut di copy dan di paste di sebelah (to right). 

 

 

     4. Setelah mengubah warna background browser kita, selanjutnya kita buat pengemlompokan pada html kita dengan menggunakan tag <div></div>. Tag div ini digunakan untuk pengelompokan data pada browser kita. Di dalam tag div tadi kita tambahkan juga class=”wrap” untuk kelas atau bagian dari pengelompokan.

  

     5. Lalu pada kelas wrap kita atur tampilannya menggunakan css. Mulai dari lebar tabel form pengisian dengan style width, lalu style margin untuk margins posisi tabel form pengisian pada laman browser. Kemudian warna huruf atau tulisan dengan style color, lalu ada style border-radius untuk mengatur kelengkungan sudut-sudut pada tabel agar todak terlalu monoton jika sudutnya siku-siku biasa. Dan ada font-family juga untuk memilih jenis font atau karakter huruf yang akan kita pakai. Lalu ada background-color untuk mengubah warna tabel. Penulisan pada css dan hasil pada browser sebagai  berikut : 

    6. Agar tulisan tidak terlalu rapat ke sebelah kiri tabel, maka kita menggunakan style container. Sebelumnya kita tambahkan dahulu tag div class container pada file html, lalu pada file css kita atur padding dan marginnya. Style padding berfungsi untuk mengubah jarak tabel dari tepi laman browser bagian atas, jadi disini saya agak turunkan tabelnya sehingga tidak terlalu rapat dengan bagian atas browser. Sedangkan style margin berfungsi untuk mangatur jarak tulisan dengan sisi garis tabel. Disini saya pindahkan tulisan yang sebelumnya masih terlalu rapat dengan batas garis tabel sebelah kiri. Penulisan pada html, css dan hasilnya pada browser sebagai berikut :

     7. Kemudian kita akan mengubah posisi tulisan judul Formulir Data Diri ke bagian tengah. Karena penulisan judul di dalam tag <h1></h1> maka pada file css kita mengarah pada h1 ditambah kurung kurawa dan masukan style text-align : center dalam kurung kurawa tersebut. Lalu kita juga mengubah posisi informasi data diri menjadi ke tengah tabel. Karena penulisan informasi data diri dari Nama Lengkap sampai ke Kewarganegaraan berada dalam tag table maka pada file css kita mengarah pada table, lalu kita gunakan style margin : auto. Dan agar posisi bawah tombol kirim tidak terlalu rapat dengan ujung bawah garis tabel, kita gunakan style padding-bottom dan kita isi ukuran sesuai keinginan kita. Penulisan pada css dan hasilnya pada browser sebagai berikut :

 

     8. Kemudian kita akan memberi jarak atau space antar poin-poin informasi data dari Nama Lengkap sampai Kewarganegaraan agar lebih terlihat lega tidak sempit karena terlalu rapat. Karena poin-poin data informasi berada dalam tag table dan tag td, maka pada file css kita mengarah pada table td lalu tambahkan kurung kurawa dan didalamnya tambahkan style padding dan beri ukuran sesuai keinginan. Penulisan pada css dan hasilnya pada browser sebagai berikut :

       9. Kemudian kita akan mengubah tampilan button kirim dan batal tersebut agar tidak terkesan monoton. Pertama kita atur lebar buttonnya dengan style width dan beri ukuran sesuai keinginan kita. Lalu yang kedua kita ubah jenis font nya dengan style font-family dan kita bisa pilih nama jenis font sesuai keinginan kita. Yang ketiga yaitu kita ubah tinggi button nyaa dengan style height dan beri ukuran sesuai. Dan selanjutnya kita ubah warna pada buttonnya dengan style background-color lalu tambahkan kode warna yang diinginkan. Terakhir ada style border-radius untuk mengubah sudut-sudut button menjadi melengkung agar terlihat sepadan dengan lengkungan sudut pada tabel. Penulisan pada css sebagai berikut :

 

      10. Untuk hasil akhir pembuatan formulir data diri menggunakan form html dan css, sebagai berikut :