Membuat Tampilan Form Lebih Menarik
Sebelumnya, kita pernah belajar tentang cara membuat form dengan HTML. Namun tampilan sebuah form tanpa CSS sangatlah kurang menarik. Bagaimana jika sebuah form diberi CSS agar tampil lebih menarik ya? Kira-kira, seperti inilah tampilan form yang akan kita buat :
Mari analisis terlebih dahulu, elemen apa saja yang kita butuhkan untuk membuat form tersebut.
Elemen label untuk masing-masing form.
Elemen input bertipe text untuk first name dan last name.
Elemen select untuk country.
Elemen button untuk submit.
Dari elemen-elemen tersebut, mari buat dokumen HTMLnya.
<div>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<button>Submit</button>
</form>
</div>Pada kode HTML di atas, kita tidak memberikan class ke tiap elemen yang ada. Karena jika diperhatikan dari gambar sebelumnya, tidak ada lebih dari satu elemen yang sama yang memerlukan styling berbeda. Sehingga kita bisa menggunakan nama tag elemen tersebut sebagai selektor pada CSS.
Tampilan form kita masih sangat jauh dari ekspektasi. Mari kita mulai dengan mengubah display elemen-elemen form tersebut menjadi inline-block agar dapat berjejer ke bawah, tentunya juga dengan beberapa penyesuaian lain pada tiap elemen input dan select tersebut.
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}Karena elemen input dapat memiliki beberapa tipe, kita bisa membuat selektor yang lebih spesifik seperti di atas. Sehingga hanya elemen input bertipe text saja yang akan terpengaruh kode CSS tersebut. Kita juga menambahkan selektor untuk elemen select karena kode CSS yang dibutuhkan saat ini sama saja. Seperti ada masih kurang, tapi... apa ya? Aha, button berwarna hijau!
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}Kita juga memberikan :hover pada selektor button, yang maksudnya akan ada sedikit perubahan warna background dari elemen tersebut jika elemennya berada dalam keadaan hover (kondisi di mana sebuah elemen ditunjuk oleh kursor, meskipun belum diklik).
Sekarang tinggal penyelesaiannya saja, kita berikan sedikit padding, border-radius dan background-color pada elemen div terluar agar tampilan form menjadi lebih rapi.
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}Yeayy! Teman-teman sudah berhasil membuat tampilan form yang menarik. Sekarang, cobalah tantang diri kita untuk lebih berani mencoba membuat tampilan web lainnya dengan HTML dan CSS.
Salah satunya dengan meniru tampilan login dan register dari beberapa aplikasi yang sering gunakan, misalnya instagram, facebook atau apapun. Dengan meniru aplikasi yang sudah ada, teman-teman jadi lebih tau banyak teknik yang bisa dilakukan dengan CSS.
Referensi
Last updated