Dilansir dari situs www.duniaprogramming.com contoh program membuat form dengan HTML dan CSS merupakan langkah dasar yang biasa dilakukan oleh programmer pemula sebelum membuat sistem yang berinteraksi dengan database.
Form merupakan fitur yang sangat dibutuhkan dan pastinya digunakan oleh pengguna, baik dari kalangan umum, sekolah, instansi maupun organisasi.
Banyak dari mereka yang menggunakan fitur Form yang disediakan Oleh Google yaitu Google Form, dimana fitur ini sangat membantu bagi mereka yang belum mengetahui sama sekali bagaimana membuat form tanpa coding.
Namun bagi kalian yang ingin membuat fitur form dengan custom yang lebih luas, berikut cara yang harus kalian terapkan yaitu dengan memahami bahasa pemrograman HTML dan CSS terlebih dahulu.
Contoh Program Membuat Form dengan HTML dan CSS
Sebelum kalian menjalankan kode di bawah ini, alangkah baiknya kalian menyiapkan bahannya terlebih dahulu.
Kalian bisa menggunakan editor Sublime Text ataupun Visual Studio Code, namun keduanya memiliki Kelebihan dan Kekurangan Masing-masing.
Sublime Text Merupakan Editor dengan Memakan RAM Paling sedikit dan fitur yang lumayan sangat membantu programmer, namun jika digunakan untuk melakukan editing dengan berbagai bahasa pemrograman, Sublime Masih Memiliki banyak kekurangan.
Baca Juga : Cara Ngoding Cepat Dengan Menggunakan Sublime Text 3
Berbeda dengan Sublime Text, Visual Studio Code merupakan editor andalan para programmer yang mana sublime text memiliki fitur extension yang lengkap yang mana sangat membantu pekerjaan programmer dalam membuat sebuah aplikasi.
Namun kekurangan yang dimiliki oleh Visual Studio Code adalah, dia tidak bisa di jalankan pada Laptop atau Komputer dengan Spesifikasi RAM dibawah 4GB.
Berikut ini adalah contoh program sederhana untuk membuat form dengan menggunakan HTML dan CSS :
< !DOCTYPE html >
< htm l>
< head >
< title >Form Registrasi< /title >
< / head >
< body >
< div class="container" >
< h2 >Form Registrasi< /h2 >
< form >
< div class="form-group >
< label for="nama" >Nama:< /label >
< input type="text" id="nama" name="nama" placeholder="Masukkan nama" >
< /div >
< div class="form-group" >
< label for="email" >Email:< /label >
< input type="email" id="email" name="email" placeholder="Masukkan email" >
< /div >
< div class="form-group" >
< label for="jenis_kelamin" >Jenis Kelamin:< /label >
< select id="jenis_kelamin" name="jenis_kelamin" >
< option value="laki-laki" >Laki-laki< /option >
< option value="perempuan" >Perempuan< /option >
< /select >
< /div >
< div class="form-group" >
< input type="submit" value="Submit" >
< /div >
< /form >
< /div >
< /body >
< /html >
Catatan :
Untuk Code Hilangkan Spasi Pada Setiap Tag, Agar Tampilan bisa sesuai dengan yang diharapkan, karena tag di identifikasi sebagai TAG HTML
Penjelasan:
Kode di atas adalah dokumen HTML yang berisi form registrasi sederhana.
CSS digunakan untuk mengatur tampilan form dengan mendefinisikan style untuk elemen-elemen di dalam form.
Dalam form, terdapat tiga elemen input yaitu nama, email, dan jenis kelamin. Setiap elemen input memiliki atribut id untuk identifikasi dan atribut name yang akan digunakan saat mengirim data form.
Elemen select digunakan untuk memilih jenis kelamin dengan dua opsi yaitu laki-laki dan perempuan.
Tombol submit berfungsi untuk mengirimkan data form.
Seluruh elemen form dikelompokkan menggunakan class form-group agar dapat diberikan style dengan CSS.
Pada saat form di-submit, data form akan dikirimkan ke halaman yang dimasukkan dalam atribut action pada elemen form (tidak disertakan dalam contoh ini).
Anda dapat menyalin kode di atas ke dalam file dengan ekstensi .html, seperti form.html, lalu membukanya di web browser untuk melihat tampilan form.
Itulah penjelasan mengenai bagaimana membuat program form dengan HTML dan CSS dengan mudah, semoga bermanfaat
