💡

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.

Sumber Desain.

Kick Off

Menggunakan template yang kemarin kita akan membangun basenya terlebih dahulu, kita akan membuat dimana tampilan seperti card seperti yang ada di desain.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwind</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

</head>

<body class="bg-gray-100 flex flex-col min-h-screen max">
    <nav class="fixed inset-x-0 top-0">
        <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
            <div class="flex justify-center">
                <p class="text-white text-lg font-bold">My Registration</p>
            </div>
        </div>
    </nav>

    <div class="container mx-auto mt-24 flex justify-center">
        <form class="flex flex-col w-8/12 shadow-sm rounded-lg bg-white py-10 px-3">
            <!-- code disini -->
        </form>
    </div>

    <footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
        <div class="flex justify-center">
            <p class="text-white text-lg font-bold">Footer</p>
        </div>
    </footer>


</body>

</html>

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.

Sekarang kita isi bagian formnya dengan kode berikut berdasarkan frame di atas.

<div class="flex w-full justify-center ">
  <p class="text-2xl font-medium">Registration</p>
</div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> First name </label>
    <input class="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" id="firstname" type="text" placeholder="First name">
  </div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name"> Last name </label>
    <input class="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" id="lastname" type="text" placeholder="Last name">
  </div>
</div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Email address"> Email address </label>
    <input class="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" id="email" type="emai" placeholder="Email address">
  </div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Company"> Company </label>
    <input class="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" id="company" type="text" placeholder="Company">
  </div>
</div>
<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Address"> Address </label>
    <input class="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" id="address" type="text" placeholder="Address">
  </div>
</div>
<div class="flex flex-col w-full mt-12 px-5">
  <div class="flex w-full">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> Date of birth </label>
  </div>
  <div class="flex flex-row w-full justify-between">
    <div class="flex w-4/12 flex-col pr-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
        <option>Month</option>
      </select>
    </div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
        <option>Day</option>
      </select>
    </div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
        <option>Year</option>
      </select>
    </div>
    <div class="flex w-auto">
      <i class='text-5xl text-gray-400 bx bx-calendar-alt'></i>
    </div>
  </div>
</div>
<div class="flex flex-col w-full px-5 mt-20">
  <button class="bg-black py-3 text-white rounded-lg font-semibold">Register</button>
</div>

Maka, tampilannya akan menjadi seperti ini.

Sekarang mari kita bedah kodenya.

Bedah Kode

Berikut salah satu contoh dari input.

<div class="flex flex-row w-full mt-12">
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> First name </label>
    <input class="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" id="firstname" type="text" placeholder="First name">
  </div>
  <div class="flex w-1/2 flex-col px-5">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name"> Last name </label>
    <input class="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" id="lastname" type="text" placeholder="Last name">
  </div>
</div>

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:

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>

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, 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:

<div class="flex flex-col w-full mt-12 px-5">
  <div class="flex w-full">
    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name"> Date of birth </label>
  </div>
  <div class="flex flex-row w-full justify-between">
    <div class="flex w-4/12 flex-col pr-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
        <option>Month</option>
      </select>
    </div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
        <option>Day</option>
      </select>
    </div>
    <div class="flex w-4/12 px-4">
      <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
        <option>Year</option>
      </select>
    </div>
    <div class="flex w-auto">
      <i class='text-5xl text-gray-400 bx bx-calendar-alt'></i>
    </div>
  </div>
</div>

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.

Elemen terakhir untuk icon kita gunakan w-auto agar mengikuti lebar yang tersisa.

Terakhir, kita bedah bagian button.

<div class="flex flex-col w-full px-5 mt-20">
  <button class="bg-black py-3 text-white rounded-lg font-semibold">Register</button>
</div>

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:

<button type="button" class="btn btn-primary">Primary</button>

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.

Keseluruhan kode akan menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwind</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

</head>

<body class="bg-gray-100 flex flex-col min-h-screen max">
    <nav class="fixed inset-x-0 top-0">
        <div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
            <div class="flex justify-center">
                <p class="text-white text-lg font-bold">My Registration</p>
            </div>
        </div>
    </nav>

    <div class="container mx-auto mt-24 flex justify-center">
        <form class="flex flex-col w-8/12 shadow-sm rounded-lg bg-white py-10 px-3">
            <div class="flex w-full justify-center ">
                <p class="text-2xl font-medium">Registration</p>
            </div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name">
                        First name
                    </label>
                    <input class="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" id="firstname" type="text"
                        placeholder="First name">
                </div>
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Last name">
                        Last name
                    </label>
                    <input class="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" id="lastname" type="text"
                        placeholder="Last name">
                </div>
            </div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Email address">
                        Email address
                    </label>
                    <input class="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" id="email" type="emai"
                        placeholder="Email address">
                </div>
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Company">
                        Company
                    </label>
                    <input class="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" id="company" type="text"
                        placeholder="Company">
                </div>
            </div>
            <div class="flex flex-row w-full mt-12">
                <div class="flex w-1/2 flex-col px-5">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="Address">
                        Address
                    </label>
                    <input class="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" id="address" type="text"
                        placeholder="Address">
                </div>
            </div>
            <div class="flex flex-col w-full mt-12 px-5">
                <div class="flex w-full">
                    <label class="block text-gray-900 text-md font-semibold mb-2" for="First name">
                        Date of birth
                    </label>
                </div>
                <div class="flex flex-row w-full justify-between">
                    <div class="flex w-4/12 flex-col pr-4">
                        <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="month" placeholder="Month">
                            <option>Month</option>
                        </select>
                    </div>
                    <div class="flex w-4/12 px-4">
                        <select class="border border-gray-300 bg-white rounded-lg w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="day" placeholder="Day">
                            <option>Day</option>
                        </select>
                    </div>
                    <div class="flex w-4/12 px-4">
                        <select class="border border-gray-300 bg-white rounded-full w-full py-3 px-3 text-gray-900 
              leading-tight focus:outline-none focus:ring-2 focus:ring-gray-900" id="year" placeholder="Year">
                            <option>Year</option>
                        </select>
                    </div>
                    <div class="flex w-auto">
                        <i class='text-5xl text-gray-400 bx bx-calendar-alt'></i>
                    </div>
                </div>
            </div>
            <div class="flex flex-col w-full px-5 mt-20">
                <button class="bg-black py-3 text-white rounded-lg font-semibold">Register</button>
            </div>
        </form>
    </div>

    <footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
        <div class="flex justify-center">
            <p class="text-white text-lg font-bold">Footer</p>
        </div>
    </footer>


</body>

</html>

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