# Membuat Form - Part 5
💡
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆
# Overview Pada tutorial sebelumnya kita sudah memahami cara membuat navbar dan juga footer. Sekarang kita ingin membuat sebuah form pada HTML dengan desain yang saya pilih dari Dribble. [![https://dribbble.com/shots/23585549-Registration-form](https://cdn.dribbble.com/userupload/12887697/file/original-464d03c400c1a9364d5f90e78a335f0d.png?resize=752x align="left")](https://dribbble.com/shots/23585549-Registration-form) [**Sumber Desain**](https://dribbble.com/shots/23585549-Registration-form). # Kick Off Menggunakan template yang kemarin kita akan membangun basenya terlebih dahulu, kita akan membuat dimana tampilan seperti card seperti yang ada di desain. ```xml Hello Tailwind
``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712614971141/e8711997-e1c9-4f67-b25d-5e6c99e71499.png align="center") Tampilannya akan menjadi seperti ini untuk base card-nya. Sekarang kita perlu paham seperti apa teori tampilannya. Berikut merupakan rancangan frame dari desain di atas. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712615203449/ec9c2f56-6af5-49ae-9312-6da61269ad92.png align="center") Sekarang kita isi bagian formnya dengan kode berikut berdasarkan frame di atas. ```xml

Registration

``` Maka, tampilannya akan menjadi seperti ini. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712616370603/f0fcd835-1083-4e0e-8f65-becda9cadd04.png align="center") Sekarang mari kita bedah kodenya. # Bedah Kode Berikut salah satu contoh dari input. ```xml
``` Karena kita memerlukan satu baris yang dibagi dua, maka kita memerlukan `flex-row`. Setelahnya, kita membagi dua baris dengan class `flex w-1/2`. Di dalamnya kita beri `flex-col`, kenapa? Karena label ada apda bagian atas, lalu di bawahnya ada teks input. Sekarang perhatikan class input, perbedaan paling mendasar antara Tailwind dengan Bootstrap adalah pada Tailwind kita tidak mudah untuk membangun sebuah input teks. Menggunakan Bootstrap, kita dapat dengan mudah membangun form dengan kode berikut: ```xml
We'll never share your email with anyone else.
``` Sesederhana menggunakan class `form-control`. Sedangkan menggunakan Tailwind, kita perlu dengan ribet dengan class sepanjang ini: `border border-gray-300 rounded-lg w-full py-3 px-3 text-gray-900 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900` Namun, justru ini yang membuat Tailwind terlihat indah. Dikarenakan fleksibilitas pembuatan sebuah input, kita dapat dengan bebas mengatur bentuk input yang kita mau. Berdasarkan [dokumen berikut](https://v2.tailwindcss.com/docs/hover-focus-and-other-states), kita dapat dengan mudah mengganti style ketika kita melakukan hover, focus, dan hal lainnya yang berhubungan dengan input. Artinya, bagi para backend developer, kita benar-benar bisa dikatakan tidak perlu berurusan dengan Vanilla CSS (CSS Murni). Hover dan focus adalah dua atribut umum yang sering digunakan untuk mengatur input. Tailwind sudah sangat membantu anak-anak backend untuk tidak berurusan dengan CSS. Selain itu kita bisa mengatur tinggi pendeknya input dengan `py-3` serta teks yang akan diinput dengan `text-gray-900`. Apabila ada desain yang membutuhkan warna yang berbeda, anak backend dapat dengan mudah mengatur ketebalan sebuah warna. --- Sekarang kita membahas bagian date of birth. Perhatikan kode bagian ini: ```xml
``` Pada bagian ini, kita membagi tiga ukurannya karena ingat bahwa konsep lebar kolom kiri ke kanan adalah 12, ditambah dengan bagian div terakhir dengan lebar yang otomatis mengikuti. Perbedaan paling mencolok antara Tailwind dengan Bootstrap adalah apabila pada bootstrap kita menambah satu elemen lagi setelah 12 ini penuh, elemen terakhir ini akan turun ke bawah. Nah pada Tailwind, hal ini tidak akan terjadi kecuali kita menambahkan class `flex-wrap` pada elemen div di atasnya. Kalau kamu lupa, coba cek lagi tutorial [berikut](https://blog.perogeremmer.id/belajar-layout-dengan-flex-part-2). Elemen terakhir untuk icon kita gunakan `w-auto` agar mengikuti lebar yang tersisa. --- Terakhir, kita bedah bagian button. ```xml
``` Dapat kita lihat bahwa untuk membuat button saja, kita perlu mengatur class pada button sepanjang kode di atas. Sedangkan pada Bootstrap, kita hanya perlu melakukan ini: ```xml ``` Tentu saja saya kembali ngingetin nih, bahwa Tailwind mempermudah kita membuat desain yang fleksibel, artinya kalau tiba-tiba butuh button yang sangat bulat, kita bisa menggunakan `rounded-full`. Bisa cek tutorialnya [disini](https://v2.tailwindcss.com/docs/border-radius#rounded-corners). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712616812420/6d6519a2-36bf-4100-9c3d-fc4e589e537a.png align="center") --- Keseluruhan kode akan menjadi seperti ini: ```xml Hello Tailwind

Registration

``` Sekarang bagaimana, mudah kan membuat form di Tailwind? Sebagai anak backend, membuat form yang fleksibel akan membantu kita untuk menyesuaikan design yang ada loh 😉