Pada artikel sebelumnya, Styling Form Part 1, kita telah belajar membentuk form agar label berada diatas element form. Nah untuk tutorial bagian kedua ini kita akan membuat agar label dan element form saling bersebelahan. Berikut hasil akhir dari form kita nantinya,

Sebelum kita menjamah pada CSS, kita harus terlebih dahulu sedikit merubah struktur Html, yaitu dengan merubah posisi teks required dari setelah label ke setelah input. Sebagai berikut :

<li>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" value="" />
  <em>(required)</em>
</li>

Struktur HTML yang lebih lengkap dapat dilihat pada perubahan struktur HTML.

Menyusun Kode CSS

Di dalam desain form yang kedua ini, kita akan membuat setiap rangkaian element form, yang terdiri dari label, field dan teks required sejajar dalam satu baris. Karena dari ketiga element tersebut bersifat inline, maka kita tidak perlu melakukan apapun. Selanjutnya kita akan terlebih dahulu menyusun style dasar dari form, sepert huruf, warna dan jarak antar element. Untuk mempersingkat tutorial ini, kita gunakan kode CSS dari tutorial styling form bagian I dan merubahnya sesuai dengan kebutuhan. Hasilnya dapat dilihat pada hasil kode CSS tutotial I.

Dari hasil kode CSS diatas terlihat bahwa teks required tidak ikut berubah. Hal ini dikarenakan kita merubah letaknya di dalam struktur HTML. Untuk memperbaikinya kita cukup merubah selector yang menargetkan element ini dari label em menjadi em. Selain itu tampak bahwa label dan element form tidak lagi sejajar, untuk mensejajarkannya kembali dilakukan dengan mengembalikan sifat asli dari element label menjadi inline. Untuk melakukannya hapus kode css display: block didalam selector label. Hasil dapat dilihat pada perbaikan teks required. Dari hasil yang didapatkan terlihat cukup bagus, namun belum sesuai dengan hasil akhir yang kita inginkan.

Memperbaiki Layout Form

Sampai titik ini, terlihat bahwa form masih kurang rapi dan berbeda dari hasil akhir yang diinginkan. Pada hasil akhir, terlihat bahwa label dan element form akan sejajar secara vertikal dan label mempunyai lebar yang sama. Kita tidak dapat menyelesaikannya dengan menambahkan nilai width, karena sifat inline dari tag label. Lebar dari suatu element inline ditentukan berdasarkan lebar dari teks yang ada di dalamnya. Walaupun kita dapat mempengaruhi lebar dengan attribute padding dan margin, namun tetap akan menghasilkan lebar yang berbeda.

Untuk dapat memberikan lebar pada element label kita harus merubah sifat dari element ini menjadi block, namun hal ini membuat label tidak lagi sejajar dengan element form. Satu-satunya cara yang tersisa adalah menggunakan float. Property CSS float digunakan untuk memaksakan suatu element untuk mengisi ruang kosong yang ada di atasnya. Element float mempunyai sifat yang unik, ketika masih ada ruang kosong diatasnya dia mirip seperti element inline, namun kita juga dapat memberikan dimension properties (width dan height). Inilah yang kita butuhkan disini.

Namun pertanyaannya adalah element apa yang perlu di-float ?. Cara termudah adalah dengan melakukannya pada element yang paling kiri dan kemudian kita berikan nilai left. Dalam struktur kita berarti adalah label, berikut kodenya,

label {
  float: left;
  font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif;
  color: #003399;
}

Hasilnya dapat dilihat pada hasil floating element label.

Terlihat masih tetap kurang rapi, untuk merapikannya kita berikan nilai width dan mengatur perataan dari element label, sebagai berikut,

label {
  float: left;
  width: 80px;
  text-align: right;
  margin-right: 10px;
  font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif;
  color: #003399;
}

Hasilnya dapat dilihat pada perbaikan layout form.

Untuk sentuhan akhir kita tambahkan property vertical align pada element teks required (<em>), sehingga teks akan selalu berada di bagian teratas.

em {
  font-size: 10px;
  color: #6699cc;
  font-weight: normal;
  vertical-align: top;
 }

Semuanya terlihat sangat sempurna, namun hal ini dicapai ketika kita melihatnya di Firefox, bagaimana dengan IE ? Beruntungnya semua terlihat sama dan tidak ada yang ganjal dengan tampilan form. Berikut seluruh kode CSS yang membentuk form bagian kedua.

ol {
  padding-left: 0;
  margin-bottom: 20px;
}
li {
  list-style: none;
}
label {
  float: left;
  width: 80px;
  text-align: right;
  margin-right: 10px;
  font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif;
  color: #003399;
}
input {
  margin-bottom: 16px;
  width: 180px;
}
input, textarea {
  border: 1px solid #6699cc;
  color: #003366;
}
textarea {
  width: 240px;
  height: 80px;
}
em {
  font-size: 10px;
  color: #6699cc;
  font-weight: normal;
  vertical-align: top;
}
.submit input {
  width: auto;
  padding: 4px 20px;
  font: bold 12px "Trebuchet MS", Calibri, Arial, sans-serif;
}
.submit input:hover {
  cursor: pointer;
  background-color: #ccccff;
}

Hasil akhir dapat dilihat pada hasil akhir form.