Iznyn Blog - Your Web Design Solution

Form pada modern web seperti saat ini merupakan sebuah element yang cukup penting dalam menghubungkan user dengan sistem di dalam web tersebut. Fungsi utama dari suatu form adalah memungkinkan suatu user untuk memasukkan data ke dalam sistem web, dalam rangka untuk memenuhi suatu proses tertentu. Sebagai contoh adalah User Registration Form, pada form jenis ini, user memasukkan data pribadi untuk mandapatkan suatu hak khusus terhadap akses data di dalam web yang bersangkutan.

Penyusunan form tidak akan terlepas dari teknologi server-side, seperti PHP, ASP, Perl, dsb. Kita harus membuat fungsi-fungsi pemrosesan data yang dimasukkan melalui form dengan menggunakan teknologi ini. Namun demikian kita juga jangan sampai melupakan teknologi client-side, seperti CSS dan Javascript, untuk memberikan kenyamanan kepada user ketika memasukkan data melalui form. Dan pada artikel ini kita akan bercerita tentang bagaimana menyusun suatu form yang baik dan benar.

Menyusun Struktur HTML Untuk Form

Tentu saja, langkah pertama untuk menyusun Form adalah membentuk struktur HTML. Namun sebelum kita melangkah lebih jauh lagi, satu hal yang perlu diingat adalah bahwa masa kejayaan "Table" telah lewat dan kita tidak akan secara bodoh menggunakannya dalam tutorial ini.

Dari semua tag html yang tersedia, saya lebih suka menggunakan tag ordered list dalam menyusun form. Dengan menggunakan tag ini, maka dalam kondisi tanpa CSS, form akan tetap akan terstruktur dengan baik dan tetap mudah diikuti. Kemudian mengingat suatu form mempunyai urutan pengisian yang jelas dari atas ke bawah maka pemilihan tag ordered list akan menjadi semakin sempurna.

Berikut kode HTML dari form yang akan kita susun,

<form action="/" method="post">
  <ol>
    <li>
      <label for="name">Name <em>(required)</em></label>
      <input type="text" name="name" id="name" value="" />
    </li>
    <li>
      <label for="email">Email <em>(required)</em></label>
      <input type="text" name="email" id="email" value="" />
    </li>
    <li>
      <label for="message">Message <em>(required)</em></label>
      <textarea name="message" id="message"></textarea>
    </li>
  </ol>
  <p class="submit"><input type="submit" name="submit" value="Send Message" /></p>
</form>

Hasil dari kode HTML diatas dapat dilihat pada struktur html untuk form.

Menyusun Kode CSS

Sekarang kita masuk pada inti dari tutorial ini, yaitu menyusun kode CSS. Pada tutorial ini kita akan membentuk dua style form pada struktur html di atas. Berikut hasil akhir dari form kita.

Menyusun Style Form 1

Untuk membentuk tampilan form pada gambar 1 cukup mudah dilakukan. Pertama kita harus menghilangkan style-list dari tag list, sebagai berikut :

ol { padding-left: 0; }
li { list-style: none; }

Selanjutnya kita merubah attribute block pada tag label dan menambahkan sedikit ruang dibawah tag input. Berikut code CSS-nya :

label { display: block; }
input { margin-bottom: 16px; }

Anda dapat melihat hasil kode CSS diatas pada hasil untuk pembentukan layout form.

Selanjutnya kita mempercantik element form dengan merubah warna border dan sedikit memperbesar ukurannya, sebagai berikut :

input { 
  margin-bottom: 16px; 
  width: 180px; 
 }
input, textarea { 
  border: 1px solid #6699cc;  
  color: #003366; 
 }
textarea { 
  width: 240px; 
  height: 80px; 
 }

Berikutnya kita mengatur style dari tombol Send Message.

.submit input { 
  width: auto; 
  padding: 4px 20px; 
}
.submit input:hover { 
  cursor: pointer; 
  background-color: #ccccff; 
}

Untuk sementara bentuk form dapat dilihat pada hasil mempercantik form.

Terakhir kita tinggal mengatur style dari font. Berikut hasil dari kode CSS yang menyusun style form kita.

ol { 
  padding-left: 0; 
  margin-bottom: 20px;
}
li { list-style: none; }
label { 
  display: block; 
  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; 
}	
label em { 
  font-size: 10px; 
  color: #6699cc; 
  font-weight: normal; 
}		
.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 dari style form bagian 1 dapat dilihat pada hasil akhir form

Berikutnya kita akan menjelaskan cara menyusun style form untuk bagian ke 2. Pada bagian ini akan menjadi sedikit lebih rumit dari bagian sebelumnya dan kita akan menjelaskannya pada artikel saya selanjutnya. Enjoyed