Halo teman-teman berjumpa lagi dengan saya, pada artikel kemarin kita belajar tentang membuat Membuat Menu Dengan HTML,CSS dan Jquery. Dan di artikel kali ini kita akan membuat Form Menarik dan Responsive Dengan HTML,CSS berikut adalah demo yang akan nanti kita buat

Form Menarik dan Responsive Dengan HTML,CSS

Bagaimana,,?? cukup menarik bukan, Oke mari kita langsung membuatnya. Teman-teman ikuti langkah-langkahnya ya, pertama-tama jangan lupa siapkan text editornya dan copy kan script html nya di bawah ini

Dan pastekan pada text editornya, kemudian save dengan nama index.html. Jika sudah buka pada browsernya, maka akan menghasilkan output seperti gambar di bawah ini

Form Menarik dan Responsive Dengan HTML,CSS

Langkah berikutnya kita berikan css nya untuk mengatur struktur HTML yang sudah kita buat, teman-teman copy kan script css di bawah ini di dalam tag <head>

Jika sudah, di save dan refresh pada browsernya. Maka hasilnya seperti gambar di bawah ini

Form Menarik dan Responsive Dengan HTML,CSS

Nah teman-teman coba kecilkan layar monitornya, disini saya menggunakan ukuran 272 x 589

Form Menarik dan Responsive Dengan HTML,CSS

Form akan  mengikuti layar jika di perkecil atau di perbesar (responsive) karena adanya fungsi max-width

Form Menarik dan Responsive Dengan HTML,CSS

Jika saya ganti max-width menjadi width maka form akan terpotong tampilan ukurannya 187×579

Form Menarik dan Responsive Dengan HTML,CSS

Form Menarik dan Responsive Dengan HTML,CSS

Nah cukup mudah bukan, berikut adalah contoh untuk pembuatan form yang menarik dan responsive dengan menggunakan html dan css. Teman-teman juga bisa memodifikasinya sendiri dari contoh diatas yang kita buat tadi supaya kalian lebih banyak refrensi untuk membuat layout website lebih menarik. Oke mungkin sekian dulu di artikel kali ini tentang Form Menarik dan Responsive Dengan HTML,CSS kita berjumpa lagi di artikel berikutnya. Terima Kasih dan Sampai jumpa.

Semoga bermanfaat 🙂

Baca juga artikel tentang Cara Membuat Quotes dengan HTML dan CSS